[英]asp.net controls values used on jquery ui dialog are empty in code behind
我正在一个asp.net应用程序上。 我正在使用Jquery UI将记录添加到数据库。 这是标记。
<div id="AddShippingPopup" class="popup" title="New Shipping Address">
<p>Shipping Address</p>
<table>
<tr>
<td> Line 1:</td>
<td><asp:TextBox ID="txtShippingLine1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Line 2:</td>
<td><asp:TextBox ID="txtShippingLine2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>City:</td>
<td> <asp:TextBox ID="txtShippingCity" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>State:</td>
<td> <asp:DropDownList ID="ddlShipingState" runat="server" Width="200px" CssClass="required">
<asp:ListItem Value="">Please select</asp:ListItem>
<asp:ListItem Value="AK">Alaska</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>Zip:</td>
<td><asp:TextBox ID="txtShippingZip" runat="server" Width="50px"></asp:TextBox></td>
</tr>
<tr>
<td>Preferred:</td>
<td>
<asp:CheckBox ID="chkPreferredShipAdd" runat="server" />
</td>
</tr>
</table>
</div>
这是该div之外的按钮:
<asp:Button ID="btnAddShipping" runat="server" Text="Add Shipping" style = "display:none" OnClick = "btnAddShipping_Click" />
和Jquery对话框代码:
$("#AddShippingPopup").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 370,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Save": function () {
$("[id*=btnAddShipping]").click();
$(this).dialog("close");
}
}
});
function createShippingAddress() {
$("#AddShippingPopup").dialog("widget").find(".ui-dialog-titlebar-close").hide();
$("#AddShippingPopup").dialog("open");
return false;
}
这是初始化对话框的链接:
<asp:LinkButton ID="lnkAddNewShippingAddress" runat="server" Font-Size="Smaller" OnClientClick="createShippingAddress(); return false;">Add New</asp:LinkButton>
但单击“保存”按钮时,文本框和下拉列表的值为空。 空字符串保存在db中。 如何解决?
在这种情况下,通常的问题是javascript对话框将其内容呈现在asp.net form元素之外 。
因此,通过使用appendTo
选项强制他在表单内部进行渲染。 这是jQuery网站的示例:
$( ".selector" ).dialog({ appendTo: "#someElem" });
并确保附加到的元素在asp.net表单内。
您的代码将为:
$("#AddShippingPopup").dialog({
appendTo: "#dialogAfterMe",
autoOpen: false,
modal: true,
width: 500,
height: 370,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Save": function () {
$("[id*=btnAddShipping]").click();
$(this).dialog("close");
}
}
});
并将此div放在表单内的某个位置
<div id="dialogAfterMe"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.