javascript - 中继器控制方法的 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这里的属性意味着您的 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为了更好地消除重复项。我还冒昧地向列表中添加了一个空白项目，以便用户可以选择“无过滤器”并显示所有内容。

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

这绝不是对这里发生的一切的完整解释，所以请随意提问。不过，这应该有助于您获得一个可以扩展以供将来开发的工作示例。

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

下