У меня есть следующие три раскрывающегося списка и кнопка, которая дает результат, основанный на выбранных критериях:
<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>
Когда я нажимаю на кнопку, ничего не происходит.
Как я могу решить проблему?
Я думаю, что вам нужно.
Вам нужно установить, как кнопка 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();
}