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

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>

我用从搜索中检索到的数据更新我的 Repeater:

<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();
}