ASP.NETフォームからjQueryモーダルに値を渡す方法

Question

私はいくつかのフィールドを取るASP.NETフォームを持っています。フォームのSubmitボタンをクリックすると、フォームに記入されたすべてのフィールド（送信前に確認ウィンドウ）を表示するjQuery Modalを表示しようとしています。 jQuery Modalで「確認」をクリックすると、ASP.NETフォームはフォームを自分のサーバーに送信します。 ASP.NETフォームからjQuery Modalに値を渡す際に問題が発生しています。

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の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のモーダルダイアログのDISPLAY

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

Answer 1

ここでは、始めるためのスニペットがあります。モーダルコンテンツを持つページのどこかに<div>を置く代わりに、Modalはゼロから作成することもできます。 次に、他の関数で生成されたコンテンツでその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>