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并从您的函数中调用提交对话框“提交”按钮。

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