The second installment of my previous post on utilizing XMod Pro’s natural templating features, combined with its multi-view capability to create data-bound list controls that you can use to filter the data your user views.
In part one of this 2-part series of articles, I showed how easy it was to create a data-bound drop down lists inside an XMod Pro template. If you haven’t read part one yet, I recommend you do so. In this article, we’ll put the list to good use, filtering our list of records.
To recap, we’ve created a Template tag that creates an HTML drop-down list (an HTML SELECT tag) that is populated with a list of states. Those states are stored in a table in our database called, appropriately enough “States”.
Here’s the template thus far…
1: <xmod:Template Id="States">
2: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
3: <HeaderTemplate>
4: <select id="ddlStateFilter">
5: </HeaderTemplate>
6: <ItemTemplate>
7: <option value="[[StateId]]">[[StateName]]</option>
8: </ItemTemplate>
9: <FooterTemplate>
10: </select>
11: </FooterTemplate>
12: </xmod:Template>
We’re going to add a second template tag to our template. I realize throwing the word template around may get a bit confusing since we’re including multiple templates in a template…. So, to clarify. We’re creating a “View” which will contain multiple Template tags.
Right now we’ve got one template in our view to create the drop-down list. Let’s add a second template to display the data:
1: <xmod:Template Id="Results">
2: <ListDataSource CommandText="SELECT FirstName, LastName FROM Customers WHERE StateId=@StateId">
3: <Parameter Name="StateId" Value='[[Url:sid]]' DataType="Int32" DefaultValue="-1" />
4: </ListDataSource>
5:
6: <ItemTemplate>
7: <div>[[FirstName]] [[LastName]]</div>
8: </ItemTemplate>
9: </xmod:Template>
I’m keeping this template deliberately simple so we can focus on the main components. In lines 2-4, we’re creating the data source for our results list. It’s a simple SQL query, selecting customers in our Customers table who reside in the state we’ve selected in our drop-down. So, the SQL command will be using a parameter with the name “StateId”. This is represented in the CommandText as “@StateId”.
In line 3, the StateId parameter is defined. We use the URL token to retrieve the value of a parameter in the URL “sid” in this case. Importantly, we also specify the data type to use. This is an extra safeguard against attacks. Finally, I’m specifying a default value to use if the “sid” URL parameter isn’t found. If –1 is passed to the SQL command, no records will be displayed.
In lines 6-8, we’re just creating a simple display of our record values.
Astute readers at this point may be wondering “But how do you get the selected State ID into the sid URL parameter?”. That is a job tailor-made for a touch of Javascript:
1: <xmod:Template Id="States">
2: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
3: <HeaderTemplate>
4: <select id="ddlStateFilter" onchange="location.href='http://mysite.com/mypage.aspx?sid='+this.value;">
5: </HeaderTemplate>
6: <ItemTemplate>
7: <option value="[[StateId]]">[[StateName]]</option>
8: </ItemTemplate>
9: <FooterTemplate>
10: </select>
11: </FooterTemplate>
12: </xmod:Template>
I’ve revised the first template. Can you spot the difference? I’ve added an event handler to the SELECT tag. This little bit of Javascript will execute whenever the value in the drop-down list has changed and will redirect the user to "mysite.com/mypage.aspx”. The URL is a placeholder. You’ll want to replace that with the URL to the same page the module is on. In other words, the URL is self-referencing, but it also adds the value of the drop-down list to the URL (“…?sid=’+this.value;”). Of course, you can also use jQuery to assign the event to a function, but I wanted to keep the example simple.
Another option would be to add a "Filter" button or hyperlink to the FooterTemplate, after the closing "</select>" tag. Then, using jQuery or straight Javascript, hook up a function to its click event and set the page's location in that function.
Here's the completed view, with two templates. I've also thrown a couple of DIV tags in there to break up the two templates onto different rows. You're welcome to layout your templates using your own HTML.
1: <div>
2: <xmod:Template Id="States">
3: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
4: <HeaderTemplate>
5: <select id="ddlStateFilter" onchange="location.href='http://mysite.com/mypage.aspx?sid='+this.value;">
6: </HeaderTemplate>
7: <ItemTemplate>
8: <option value="[[StateId]]">[[StateName]]</option>
9: </ItemTemplate>
10: <FooterTemplate>
11: </select>
12: </FooterTemplate>
13: </xmod:Template>
14: </div>
15:
16: <div>
17: <xmod:Template Id="Results">
18: <ListDataSource CommandText="SELECT FirstName, LastName FROM Customers WHERE StateId=@StateId">
19: <Parameter Name="StateId" Value='[[Url:sid]]' DataType="Int32" DefaultValue="-1" />
20: </ListDataSource>
21:
22: <ItemTemplate>
23: <div>[[FirstName]] [[LastName]]</div>
24: </ItemTemplate>
25: </xmod:Template>
26: </div>