I have the following three dropdownlist and a button which gives a result based on the selected criterias:

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

The first two dropdownlist populates using code-behind function.

How can I allow the user to select all three options and hit the search button to display the result without refreshing the page?

I tried something like this:

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

I update my Repeater with the data retrieved from the search:

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

When I click on the button, nothing happens.

How can I resolve the issue?

有帮助吗?

解决方案

I think what do you want is this.

You need set how updatePanel´s trigger the button.

The part of page what do you want update need to be inside the updatepanel.

The javascript will catch DropDownList changes, and after all three DropDownList were changed the postback will be raised like if you was clicked in button

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();
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top