Question

我有一个ASP.NET表单，它包含几个字段。当我单击表单上的提交按钮时，我正在尝试显示一个jQuery模式，它显示表单上填写的所有字段（提交前的验证窗口）。一旦我点击jQuery Modal上的“确认”，ASP.NET表单就会将表单提交给我的服务器。我在将值从ASP.NET表单传递给jQuery Modal时遇到问题。

ASP.NET FORM

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

$("[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 MODAL DIALOG DISPLAY

<div id="modal_dialog" style="display: none;" >
    <p>Display ASP.NET form Values here</p>
    <br />
    <br />
    <br />
    <br />
    <br />
 </div>

Answer 1

这是一个可以帮助您入门的代码段。 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>

如何将值从ASP.NET表单传递给jQuery模式

1 个答案: