ASP.Net 2012 JQuery 和更新面板不起作用:一个绑定列表框并使用 jquery 将我的结果填充到另一个列
本文关键字:jquery 列表 我的 另一个 填充 结果 绑定 一个 更新 JQuery Net | 更新日期: 2024-10-25 13:52:05
我的列表框位于 UpdatePanel 中。 我使用此代码将数据从绑定列表框传输到空列表框以获取结果。 我正在使用下拉列表来填充绑定列表框的结果。 我在这里做错了什么:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lstright").bind("click", function lstRight() {
var options = $("[id*=lstListTenants1] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).clone();
$("[id*=lstListTenants2]").append(opt);
}
});
$("#lstleft").bind("click", function lstLeft() {
var options = $("[id*=lstListTenants2] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).remove();
//$("[id*=lstEmailAddress]").append(opt);
}
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function (s, e) {
$(function () {
$("#lstright").bind("click", function lstRight() {
var options = $("[id*=lstListTenants1] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).clone();
$("[id*=lstListTenants2]").append(opt);
}
});
$("#lstleft").bind("click", function lstLeft() {
var options = $("[id*=lstListTenants2] option:selected");
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]).clone();
$(options[i]).remove();
//$("[id*=lstEmailAddress]").append(opt);
}
});
});
});
</script>
如何让 jquery 与我的 UpdatePanel 一起工作,以便正常工作?
这是我的aspx代码:
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<td class="h4" colspan="2">
<asp:Label ID="Label1" runat="server" Text="Name and Address of Property Where Incident Occurred:"></asp:Label>
</td>
</tr>
<tr>
<td class="h4">
<asp:Label ID="lblPropName" runat="server" Text="Name:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlPropName" runat="server" OnSelectedIndexChanged="ddlPropName_SelectedIndexChanged" AutoPostBack="True" Height="30px"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="h4">
<asp:Label ID="Label2" runat="server" Text="BU Number:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtBUNum" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="h4">
<asp:Label ID="Label3" runat="server" Text="Address1:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
</tr>
<tr>
<td class="h4">
<asp:Label ID="Label4" runat="server" Text="Address2:"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<table>
<tr>
<td class="h4">
<asp:Label ID="lblListTenants" runat="server" Text="List of Affected Tenants:"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="lstListTenants1" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
</td>
<td>
<input id="lstLeft" type="button" value="<<" />
<input id="lstRight" type="button" value=">>" />
<%--<asp:Button ID="btnLeft" runat="server" Text="<<" OnClick="btnLeft_Click" />
<asp:Button ID="btnRight" runat="server" Text=">>" OnClick="btnRight_Click" />--%>
</td>
<td>
<asp:ListBox ID="lstListTenants2" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPropName" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
对于 updatepannels,由于它们执行部分回发,jquery 会在部分回发后失去绑定。在这种情况下,您需要在回发后重新绑定 jquery 函数。
var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function (s, e) { 在此处调用您的函数 });