javascript - Repeater Control 方法的 ASP.NET 过滤器下拉列表

Question

我有一个页面 (category-list.apsx)，它使用 Repeater Control 方法在页面上显示 xml 详细信息。我使用了此处显示的示例:

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

这很好用，但我希望用户能够使用 CategoryName 的下拉列表来过滤结果。

结果中继器如下所示:

<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>

XML 看起来像这样:

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

激活中继器的脚本如下所示:

<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

好的，这里要介绍的内容很多，所以我不会对每个部分进行详尽的介绍。希望这能为您提供一个良好的起点，让您更深入地了解 ASP.NET 中的数据绑定(bind)。

我更喜欢在代码隐藏中编写我的代码，而不是 <script runat="server">在我的 .aspx 页面中，所以这就是我的代码在这个例子中的位置。但是，从功能上讲，这里没有区别，如果您愿意，您可以选择将此代码放在该 .aspx 端脚本中。

首先，让我们修复您的 Repeater模板。您似乎正在使用表格布局，但模板中没有任何地方是实际的 <table></table>标签。您需要添加一个 <HeaderTemplate>和一个 <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>

其次，让我们声明一个DropDownList在您想用于过滤的 aspx 页面上:

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

AutoPostBack这里的属性(property)意味着你的DropDownList将自动发回服务器并触发 SelectedIndexChanged您可以在代码中处理的服务器上的事件。或者你可以使用 Button在您想要触发过滤器时单击。

第三，让我们将您的数据绑定(bind)代码分离成更容易重用的漂亮、简洁的小方法。

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

第四，让我们更新你的Page_Load代码，以便我们可以利用这些方法:

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

最后当然也很重要，让我们创建 SelectedIndexChanged事件处理程序以触发此数据集的过滤:

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

那么我们在这里做了什么？通过分离出这些数据绑定(bind)方法，我让它变得更简洁，并允许两个单独的控件更轻松地共享相同的 DataSet。在您的 XML 文件中。使用 IEnumerable允许我使用 LINQ，我觉得它比对 DataTable 的标准查询要好得多。或 DataView对象。

在DropDownList数据绑定(bind)代码 我正在选择您的数据的单个列并将其转换为字符串集合。我也叫Distinct为了很好的措施，以便删除重复项。我还冒昧地在列表中添加了一个空白项，以便用户可以选择 NO filter，并显示所有内容。

您会注意到 SelectedIndexChanged 中有一些代码事件处理程序以查看 DropDownList 值是否为空。这不一定是最可靠的(如果您的其中一个项目实际上有一个空白的“CategoryName”并且您想对其进行过滤，则会崩溃)，但适用于此示例。另一种方法是使用 ddlCategory.SelectedIndex <> 0作为检查是否选择了过滤器。

这绝不是对这里发生的一切的完整解释，所以请随意提问。但是，这应该可以帮助您找到一个可以在未来开发中扩展的工作示例。

编辑:此代码要求您导入 System.Collections.Generic命名空间和 System.Linq命名空间。在 Visual Studio 2010 中，这可能已经自动导入到 Web 应用程序项目中。如果没有，您可以选择将它们直接添加到您的代码文件中，或者添加到您的 Web 应用程序的Project Properties 页面的References > Imported Namespaces

下