如何让用户在不刷新页面的情况下进行搜索

Question

我有以下三个下拉列表和一个按钮，它根据所选条件给出结果：

<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br />
<br /><br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br /><br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static">
    <asp:ListItem Text="Any Gender" Value="" Selected="True" />
    <asp:ListItem Text="Male" Value="1" />
    <asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<asp:Button ID="btnGoAll" Text="Search All" OnClick="btnGoAll_Click" runat="server" ClientIDMode="Static" />

前两个下拉列表使用代码隐藏函数填充。

如何让用户选择所有三个选项并点击搜索按钮以显示结果而不刷新页面？

我尝试过这样的事情：

<div style="width: 390px; margin: 0 auto;">
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:DropDownList AutoPostBack="True" ID="slcLocation" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
            </asp:DropDownList>
            <br /><br />
            <asp:DropDownList AutoPostBack="True" ID="slcSpecialty" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
            </asp:DropDownList>
            <br /><br />
            <asp:DropDownList AutoPostBack="True" ID="slcGender" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
                <asp:ListItem Text="Any Gender" Value="" Selected="True" />
                <asp:ListItem Text="Male" Value="1" />
                <asp:ListItem Text="Female" Value="2" />
            </asp:DropDownList>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="slcLocation" />
        </Triggers>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="slcSpecialty" />
        </Triggers>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="slcGender" />
        </Triggers>
    </asp:UpdatePanel>
</div>
<br /><br />
<div style="width: 390px; margin: 0 auto;">
    <asp:HyperLink class="loginButton" style="padding: 10px; float: right;" runat="server" ID="aSearchSubmit" ClientIDMode="Static" OnClick="btnGoAll_Click" Text="Search" />
</div>

我用从搜索中检索到的数据更新我的中继器：

<div style="width: 100%;">
    <asp:Repeater runat="server" ID="rptContent">
        <HeaderTemplate>
            <table border="0" ID="tblInfo" style="background: #43A79A; width: 100%;" ClientIDMode="Static">
                <tr>
                    <td>Physician Name</td>
                    <td>Image</td>
                    <td>Gender</td>
                    <td>Office1</td>
                    <td>Office2</td>
                    <td>Office3</td>
                    <td>Office4</td>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td><%# Eval("Physician Name").ToString() %></td>
                <td><img src="www.site.com/<%# Eval("Image").ToString() %>" /></td>
                <td><%# Eval("Gender").ToString() %></td>
                <td><%# Eval("Office1").ToString() %></td>
                <td><%# Eval("Office2").ToString() %></td>
                <td><%# Eval("Office3").ToString() %></td>
                <td><%# Eval("Office4").ToString() %></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</div>

当我点击按钮时，什么也没有发生。

我该如何解决这个问题？

Answer 1

我想你想要的是这个。

您需要设置 updatePanel 触发按钮的方式。

您要更新的页面部分需要在更新面板中。

javascript 将捕获 DropDownList 更改，并且在所有三个 DropDownList 都更改后，将引发回发，就像您单击按钮一样

aspx

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    var slcLocationSelect = false;
    var slcSpecialtySelect = false;
    var slcGenderSelect = false;
    $(document).ready(function () {
        $("#<%=slcLocation.ClientID %>").change(function () { changeDropDown(this) });
        $("#<%=slcSpecialty.ClientID %>").change(function () { changeDropDown(this) });
        $("#<%=slcGender.ClientID %>").change(function () { changeDropDown(this) });
    });
    function changeDropDown(sender) {
        if ($(event.target).attr('id') == $("#<%=slcLocation.ClientID %>").attr('id')) {
            slcLocationSelect = true;
        }
        if ($(event.target).attr('id') == $("#<%=slcSpecialty.ClientID %>").attr('id')) {
            slcSpecialtySelect = true;
        }
        if ($(event.target).attr('id') == $("#<%=slcGender.ClientID %>").attr('id')) {
            slcGenderSelect = true;
        }
        if (slcLocationSelect && slcSpecialtySelect && slcGenderSelect) {
            slcLocationSelect = false;
            slcSpecialtySelect = false;
            slcGenderSelect = false;
            __doPostBack("<%=LinkButton1.ClientID %>", "");
        }
    }
</script>
<div style="width: 390px; margin: 0 auto;">
    <asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static" Style="width: 365px;"
        class="default" AppendDataBoundItems="true">
    </asp:DropDownList>
    <br />
    <br />
    <asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static" Style="width: 365px;"
        class="default" AppendDataBoundItems="true">
    </asp:DropDownList>
    <br />
    <br />
    <asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static" Style="width: 365px;"
        class="default" AppendDataBoundItems="true">
        <asp:ListItem Text="Any Gender" Value="" Selected="True" />
        <asp:ListItem Text="Male" Value="1" />
        <asp:ListItem Text="Female" Value="2" />
    </asp:DropDownList>
    <br />
    <br />
    <div style="width: 390px; margin: 0 auto;">
        <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Find</asp:LinkButton>
    </div>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <div style="width: 100%;">
                <asp:Repeater runat="server" ID="rptContent">
                    <HeaderTemplate>
                        <table border="0" id="tblInfo" style="background: #43A79A; width: 100%;" clientidmode="Static">
                            <tr>
                                <td>
                                    Physician Name
                                </td>
                                <td>
                                    Image
                                </td>
                                <td>
                                    Gender
                                </td>
                                <td>
                                    Office1
                                </td>
                                <td>
                                    Office2
                                </td>
                                <td>
                                    Office3
                                </td>
                                <td>
                                    Office4
                                </td>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <%# Eval("Physician Name").ToString() %>
                            </td>
                            <td>
                                <img src="www.site.com/<%# Eval("Image").ToString() %>" />
                            </td>
                            <td>
                                <%# Eval("Gender").ToString() %>
                            </td>
                            <td>
                                <%# Eval("Office1").ToString() %>
                            </td>
                            <td>
                                <%# Eval("Office2").ToString() %>
                            </td>
                            <td>
                                <%# Eval("Office3").ToString() %>
                            </td>
                            <td>
                                <%# Eval("Office4").ToString() %>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="LinkButton1" />
        </Triggers>
    </asp:UpdatePanel>
</div>

cs

protected void LinkButton1_Click(object sender, EventArgs e)
{
    Label1.Text = slcGender.SelectedItem.ToString();
}