2017-03-03 48 views
0

我有一个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> 

回答

0

这里是一个片段,让你开始。 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> 
相关问题