使用 JavaScript 在 VB.Net 中选择网格中的项目后维护搜索条件

Question

在 ASP.NET 创建的用户界面中，我有一个网格，可以在其中选择一组项目。为了便于参考，我使用 JavaScript 实现了一个搜索过程。

但是，当我从网格中选择一个项目时，搜索条件消失。每当我需要为同一条件选择多个项目时，这都会迫使我重新输入搜索条件。如何防止选择项目后搜索条件消失并且网格更新？

网格：

<asp:GridView ID="gridViewArtifacts"  
                 runat="server" 
                 EnableViewState="true" 
                 CssClass="grid-magin" 
                 Style="margin-top: 4px; text-align: left;" 
                 Width="100%" 
                 BackColor="White" 
                 BorderColor="#CCCCCC" 
                 BorderStyle="None" 
                 BorderWidth="1px" 
                 CellPadding="3" 
     OnRowDataBound="gridViewArtifacts_RowDataBound"
     OnRowCreated="gridViewArtifacts_RowCreated"
     OnRowCommand="gridViewArtifacts_RowCommand">
     <Columns>
         <asp:TemplateField>
             <ItemTemplate>
                 <asp:CheckBox ID="chkSelect" runat="server" OnCheckedChanged="chkSelect_CheckedChanged" AutoPostBack="true" />
             </ItemTemplate>
         </asp:TemplateField>
     </Columns>
     <FooterStyle BackColor="White" ForeColor="Black" />
     <HeaderStyle BackColor="#005AFF" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Left" />
     <RowStyle ForeColor="Black" />
     <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
     <SortedAscendingCellStyle BackColor="#F1F1F1" />
     <SortedAscendingHeaderStyle BackColor="#007DBB" />
     <SortedDescendingCellStyle BackColor="#CAC9C9" />
     <SortedDescendingHeaderStyle BackColor="#00547E" />

</asp:GridView>

搜索：

<script type="text/javascript">
$(document).ready(function () {
    $('#gridViewArtifacts').DataTable({
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        searching: true, // Enable the search input
        ordering: true,  // Enable sorting
        paging: true     // Enable pagination
    });
});

Answer 1

根本不清楚为什么您使用 JavaScript 来尝试设置某些属性，但随后并没有真正显示您正在使用哪些控件进行过滤。

从客户端 JavaScript 代码设置时，放入页面的标签将不会持久（保留其值）。但是，复选框、文本框在由用户或 JavaScript 代码设置时将保留其值。

我建议您只需将标准控件放置在 GridView 上方并使用它们进行过滤即可。

所以，说出这个标记：

        <h4>View Hotels</h4>
        <div style="float:left;width:190px">
            <asp:Label ID="Label1" runat="server" Text="Select City"></asp:Label>
            <br />
            <asp:DropDownList ID="cboCity" runat="server"  ClientIDMode="Static"
                DataTextField="City" SelectionMode="Multiple">
            </asp:DropDownList>


        </div>

        <div style="float:left;margin-left:20px;width:180px">
            <asp:Label ID="Label2" runat="server" Text="Select Province"></asp:Label>
            <br />
            <asp:DropDownList ID="cboProvince" runat="server" 
                DataValueField="Province"
                DataTextField="Province" SelectionMode="Multiple" >
            </asp:DropDownList>
        </div>

        <div style="float:left;margin-left:5px">

        <div style="float:left">
            <asp:CheckBox ID="chkDescripiton" runat="server" Text="&nbsp;Must Have Description" />
        </div>

        <div style="float:left;margin-left:15px">
            <asp:CheckBox ID="chkActiveOnly" runat="server" Text="&nbsp;Show only Active Hotels" />
        </div>
        <div style="clear:both"></div>
        <div style="float:left">
            <asp:CheckBox ID="chkBalconyOnly" runat="server" Text="&nbsp;Balcony" />
        </div>
        <div style="float:left;margin-left:112px">
            <asp:CheckBox ID="chkWaterOnly" runat="server" Text="&nbsp;Water/Lake View" />
        </div>

        </div>

        <div style="float:left;margin-left:20px">
            <asp:Button ID="cmdSearch" runat="server" Text="Search" CssClass="btn"/>
        </div>

        <div style="float:left;margin-left:20px">
            <asp:Button ID="cmdClear" runat="server" Text="Clear Fitler" CssClass="btn"/>
        </div>

然后在上述过滤器控件的正下方，放入 GridView。这么说：

        <div style="clear:both;height:10px">  <%-- this starts new line for grid --%>
        </div>

        <asp:GridView ID="GridView1" runat="server" ShowHeaderWhenEmpty="true"
            AutoGenerateColumns="False" DataKeyNames="ID"  
            CssClass="table table-hover" Width="52%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName"  />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Province" HeaderText="Province" />
                <asp:BoundField DataField="Description" HeaderText="Description"  />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button ID="cmdView" runat="server" Text="View" CssClass="btn"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

现在，我们可以过滤数据，并且过滤控件将保留其状态。

因此：

但是，请注意过滤器控件如何保留其状态/值。

所以，我现在可以向结果添加更多过滤选项，比如“必须有描述”

因此：

过滤网格的代码如下：

Protected Sub cmdSearch_Click(sender As Object, e As EventArgs) Handles cmdSearch.Click

    LoadByFilter


End Sub

Sub LoadByFilter()

    Dim strSQL As String = "SELECT * FROM tblHotels"
    Dim strOrderBy As String = " ORDER BY HotelName"
    Dim strWhere As String = ""

    Dim cmdSQL As New SqlCommand("")

    If cboCity.SelectedIndex > 0 Then
        strWhere = "(City = @City)"
        cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = cboCity.SelectedItem.Text
    End If

    If cboProvince.SelectedIndex > 0 Then
        If strWhere <> "" Then strWhere &= " AND "
        strWhere &= "(Province = @Prov)"
        cmdSQL.Parameters.Add("@Prov", SqlDbType.NVarChar).Value = cboProvince.SelectedItem.Text
    End If


    ' must have description
    If chkDescripiton.Checked Then
        If strWhere <> "" Then strWhere &= " AND "
        strWhere &= " (Description is not null)"
    End If

    If chkActiveOnly.Checked Then
        If strWhere <> "" Then strWhere &= " AND "
        strWhere &= " (Active = 1)"
    End If

    If chkBalconyOnly.Checked Then
        If strWhere <> "" Then strWhere &= " AND "
        strWhere &= " (Balcony  = 1)"
    End If

    If chkWaterOnly.Checked Then
        If strWhere <> "" Then strWhere &= " AND "
        strWhere &= " (LakeView  = 1)"
    End If



    If strWhere <> "" Then
        strSQL &= " WHERE " & strWhere
    End If

    strSQL &= " " & strOrderBy
    cmdSQL.CommandText = strSQL

    Dim rstData As DataTable = MyrstP(cmdSQL)
    GridView1.DataSource = rstData
    GridView1.DataBind()

End Sub

所以，请注意代码是如何编写的，我可以添加 2 个或 15 个以上的控件，并且选择的选项是“累积”的过滤。

因此，最好简单地在 GridView 上方放置一组筛选控件，因为这样控件将自动保留其状态和值。