Question

I have a page (category-list.apsx) that uses the Repeater Control method to display the xml details on the page. I used the example shown here:

http://www.w3schools.com/aspnet/aspnet_repeater.asp

This works fine but I would want the user to be able to filter the results using a dropdown for CategoryName.

The results repeater look like this:

<form runat="server">
<asp:Repeater id="categories" runat="server">

    <ItemTemplate>
      <tr>
        <td><%#Container.DataItem("CategoryName")%> </td>
        <td>&nbsp;</td>
        <td><%#Container.DataItem("CategoryMonth")%> </td>
        <td>&nbsp;</td>
        <td><%#Container.DataItem("CategoryMonthSpend")%> </td>
        <td>&nbsp;</td>
        <td><%#Container.DataItem("Amount")%> </td>
      </tr>
    </ItemTemplate>

</asp:Repeater>
</form>

The XML look like this:

<catalog>
    <categories>
    <CategoryName>Category Name1</CategoryName>
    <CategoryMonth>April 2012</CategoryMonth>
    <CategoryMonthSpend>£1</CategoryMonthSpend> <Amount>1</Amount>                              
    </categories>
</catalog>

The script that activates the repeater can be seen below:

<script  runat="server">
Public Sub Page_Load()
    If Not Page.IsPostBack Then
        Dim cat As String = Request.QueryString("cat")
        Dim mycategories As DataSet = New DataSet()
        mycategories.ReadXml(MapPath("XML/" + cat + ".xml"))
        categories.DataSource = mycategories
        categories.DataBind()
    End If
End Sub

</script>

Answer 1

OK, quite a bit to cover here so I won’t go into overwhelming detail for each section. Hopefully this should give you a good starting point to understanding Databinding in ASP.NET a little more.

I prefer actually writing my code in the code-behind, not a <script runat="server"> inside of my .aspx page, so that’s where my code is in this example. Functionally, however, there is no difference here and you can choose to put this code in that .aspx-side script if you’d prefer.

First, let’s fix your Repeater template. You appear to be using a table layout, but nowhere in your template is the actual <table></table> tag. You need to add a <HeaderTemplate> and a <FooterTemplate>

<asp:Repeater id="categories" runat="server">    
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><%#Container.DataItem("CategoryName")%> </td>
            <td>&nbsp;</td>
            <td><%#Container.DataItem("CategoryMonth")%> </td>
            <td>&nbsp;</td>
            <td><%#Container.DataItem("CategoryMonthSpend")%> </td>
            <td>&nbsp;</td>
            <td><%#Container.DataItem("Amount")%> </td>
          </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>    
</asp:Repeater>

Second, let’s declare a DropDownList on your aspx page that you would like to use for filtering:

<asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="true" />

The AutoPostBack property here means that your DropDownList will automatically post back to the server and fire off a SelectedIndexChanged event on your server that you can handle in your code. Alternatively you can use a Button to click when you want to trigger the filter.

Third, let’s separate your databinding code into nice, neat little methods that can more easily be reused.

Private Function GetXmlDataSet() As IEnumerable(Of DataRow)

    Dim cat As String = Request.QueryString("cat")
    Dim mycategories As DataSet = New DataSet()

    mycategories.ReadXml(MapPath("XML/" + cat + ".xml"))

    ' I like to use IEnumerable because so that I can use LINQ '
    Return mycategories.Tables(0).AsEnumerable()

End Function

Private Sub BindRepeater(query As IEnumerable(Of DataRow))
    categories.DataSource = query
    categories.DataBind()
End Sub

Private Sub BindDropDownList(query As IEnumerable(Of DataRow))

    ddlCategory.DataSource = query.Select(Function(x) x("CategoryName")).Distinct()
    ddlCategory.DataBind()

    ' Insert an empty choice into the DropDownList '
    ddlCategory.Items.Insert(0, "")

End Sub

Fourth, let’s update your Page_Load code so that we can take advantage of these methods:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If (Not IsPostBack) Then

        Dim query = GetXmlDataSet()

        BindDropDownList(query)
        BindRepeater(query)

    End If

End Sub

Last and certainly not least, let’s create the SelectedIndexChanged event handler in order to trigger filtering of this dataset:

Private Sub ddlCategory_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles ddlCategory.SelectedIndexChanged

    Dim selectedCategory As String = ddlCategory.SelectedValue.ToString()

    Dim query = GetXmlDataSet()
    If (Not String.IsNullOrEmpty(selectedCategory)) Then
        query = GetXmlDataSet().Where(Function(x) x("CategoryName") = selectedCategory)
    End If

    BindRepeater(query)

End Sub

So what did we do here? By separating out these databinding methods I made it a little cleaner and allowed the two separate controls to more easily share the same DataSet in your XML file. Using IEnumerable allows me to use LINQ which I feel is much nicer than standard querying over DataTable or DataView objects.

In the DropDownList databinding code I am selecting out a single column of your data and turning it into a collection of strings. I also call Distinct for good measure so that duplicates are removed. I also take the liberty of adding a blank item to the list, so that users have the option to choose NO filter, and display everything.

You’ll notice there is a little bit of code in the SelectedIndexChanged event handler to see if the DropDownList value is blank. This is not necessarily the most robust (would break down if one of your items actually had a blank “CategoryName” and you wanted to filter on it), but works for this example. An alternative would be to use ddlCategory.SelectedIndex <> 0 as a check for if a filter is selected.

This is by no means a complete explanation of everything going on here, so feel free to ask questions. However this should help get you to a working example that you can expand on for future development.

Edit: This code requires that you have imported the System.Collections.Generic namespace and the System.Linq namespace. In Visual Studio 2010, this is likely already automatically imported for you in the Web Application project. If not, you can choose to add them directly in your code file or on the Project Properties page for your web application under References > Imported Namespaces