Как разрешить пользователю выполнять поиск без обновления страницы

0

У меня есть следующие три раскрывающегося списка и кнопка, которая дает результат, основанный на выбранных критериях:

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

Когда я нажимаю на кнопку, ничего не происходит.

Как я могу решить проблему?

  • 0
    попробуйте поместить кнопку в шаблон содержимого и добавить к нему асинхронный триггер обратной передачи
  • 1
    просто добавить, насколько я знаю, у Hyperlink нет события OnClick
Показать ещё 1 комментарий
Теги:

1 ответ

4
Лучший ответ

Я думаю, что вам нужно.

Вам нужно установить, как кнопка updatePanel запускает кнопку.

Часть страницы, которую вы хотите обновить, должна находиться внутри панели обновления.

Javascript поймает изменения DropDownList, и после того, как все три DropDownList были изменены, postback будет поднят, как если бы вы нажали кнопку

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();
}
  • 0
    Когда я добавляю AutoPostBack = "True" для выпадающего списка, каждый раз, когда я выбираю вариант, страница обновляется.
  • 0
    @SearchForKnowledge Да, это по замыслу. Если вы не хотите, чтобы вся страница обновлялась, добавьте их в качестве асинхронных триггеров на панель обновления.
Показать ещё 13 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню