如何将值从ASP.NET窗体传递给jQuery模态
问题描述:
我有一个ASP.NET窗体需要多个字段。当我点击表单上的提交按钮时,我试图显示一个jQuery模式,显示填写在表单上的所有字段(提交之前的验证窗口)。一旦我点击jQuery Modal上的“确认”,ASP.NET表单就会将表单提交给我的服务器。我有问题将值从ASP.NET窗体传递给jQuery模态。如何将值从ASP.NET窗体传递给jQuery模态
ASP.NET表单
<div class="row-fluid">
<p class="row-fluid">
<p class="span12 flush-left">
<label for="txtECAccountNumber" class="span12">Account #</label>
<asp:TextBox runat="server" CssClass="span12" ID="txtECAccountNumber" MaxLength="50" />
<asp:RequiredFieldValidator ID="rfvECAccountNumber" runat="server" ErrorMessage="Account # is required." Text="*Account # is required" ControlToValidate="txtECAccountNumber"
SetFocusOnError="True" ValidationGroup="vgCreateCustomer" Display="Dynamic" CssClass="error" />
<asp:RegularExpressionValidator ID="revECAccountNumber" runat="server" ErrorMessage="A maximum of 50 characters is allowed for the account #." Text="*" ControlToValidate="txtECAccountNumber"
SetFocusOnError="True" ValidationExpression="^[\s\S]{0,50}$" ValidationGroup="vgCreateCustomer" Display="Dynamic" CssClass="error" />
</p>
</p>
<p class="row-fluid">
<p class="flush-left span12">
<label for="txtECAccountName" class="span12">Account Name</label>
<asp:TextBox runat="server" ID="txtECAccountName" CssClass="span12" MaxLength="100" />
<asp:RequiredFieldValidator ID="rfvECAccountName" runat="server" ErrorMessage="Account name is required." Text="*Account name is required" ControlToValidate="txtECAccountName"
SetFocusOnError="True" ValidationGroup="vgCreateCustomer" Display="Dynamic" CssClass="error" EnableClientScript="true" />
<asp:RegularExpressionValidator ID="revECAccountName" runat="server" ErrorMessage="A maximum of 100 characters is allowed for the account name." Text="*" ControlToValidate="txtECAccountName"
SetFocusOnError="True" ValidationExpression="^[\s\S]{0,100}$" ValidationGroup="vgCreateCustomer" Display="Dynamic" CssClass="error" />
</p>
</p>
</div>
jQuery函数
$("[id*=btnModalPopup]").live("click", function() {
$("#modal_dialog").dialog({
title: "Create Customer Verification",
buttons: {
Close: function() {
$(this).dialog('close');
}
},
modal: true,
width: '800px'
});
return false;
});
jQuery模态窗口显示
<div id="modal_dialog" style="display: none;" >
<p>Display ASP.NET form Values here</p>
<br />
<br />
<br />
<br />
<br />
</div>
答
这里是一个片段,让你开始。 Modal还可以从头开始创建一个模版,而不是在模版内容的页面上某处显示<div>
。 然后,例如,用另一个函数中生成的内容填充该Modal。
<script type="text/javascript">
$("[id*=btnModalPopup]").live("click", function() {
$('<div />').html(getModalContent()).dialog({
title: "Create Customer Verification",
buttons: {
Close: function() {
$(this).dialog('close');
}
},
modal: true,
width: '800px'
});
return false;
});
function getModalContent() {
var content = " <p>Display ASP.NET form Values here</p>";
content += "<br><br>";
content += "<b>txtECAccountNumber:</b> " + document.getElementById("<%= txtECAccountNumber.ClientID %>").value + "<br>";
content += "<b>txtECAccountName:</b> " + document.getElementById("<%= txtECAccountName.ClientID %>").value + "<br>";
return content;
}
</script>