ASP.Net MVC 3 Jquery UIダイアログフォーム

Question

ユーザーがフォームに記入できるようにするためのポップアップダイアログを作成しようとしています。 提出をクリックすると、フォームを送信します。 私はモーダルポップアップの作成方法を理解しましたが、フォームがクリックされたときにフォームを送信する方法を理解できません。誰もこれを行う方法を知っていますか？

@using (Html.BeginForm()) 
{ 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.UserName) 
      </div> 
      <div class="editor-field"> 
       @Html.TextBoxFor(m => m.UserName) 
       @Html.ValidationMessageFor(m => m.UserName) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.Password) 
      </div> 
      <div class="editor-field"> 
       @Html.PasswordFor(m => m.Password) 
       @Html.ValidationMessageFor(m => m.Password) 
      </div> 

      <div class="editor-label"> 
       @Html.CheckBoxFor(m => m.RememberMe) 
       @Html.LabelFor(m => m.RememberMe) 
      </div> 

      <p> 
       <input type="submit" value="Log On" /> 
      </p> 
     </fieldset> 
    </div> 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dialog-form").dialog({ 
      modal: true, 
      buttons: { 
       "Submit": function() { 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
</script> 

Answer 1

送信するフォームに有効なPOSTメソッドがコントローラにあることを確認する必要があります。ダイアログの送信ボタンがフォームを送信することを期待していない限り、ここのフォームは有効です。そうであれば、フォームにIDを与え、ダイアログの "Submit"ボタンのために関数からsubmitを呼び出す必要があります。

<div id="dialog-form"> 
@using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "LogOnForm" })) { 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.UserName) 
      </div> 
      <div class="editor-field"> 
       @Html.TextBoxFor(m => m.UserName) 
       @Html.ValidationMessageFor(m => m.UserName) 
      </div> 

      <div class="editor-label"> 
       @Html.LabelFor(m => m.Password) 
      </div> 
      <div class="editor-field"> 
       @Html.PasswordFor(m => m.Password) 
       @Html.ValidationMessageFor(m => m.Password) 
      </div> 

      <div class="editor-label"> 
       @Html.CheckBoxFor(m => m.RememberMe) 
       @Html.LabelFor(m => m.RememberMe) 
      </div> 

      <p> 
       <input type="submit" value="Log On" style="display:none;" /> 
      </p> 
     </fieldset> 
    </div> 
} 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dialog-form").dialog({ 
      modal: true, 
      buttons: { 
       "Submit": function() { 
        $("#LogOnForm").submit(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 
</script>