ASP.Net MVC 3 Biểu mẫu Hộp thoại Giao diện Người dùng Jquery

Question

Tôi đang cố gắng tạo hộp thoại bật lên để cho phép người dùng điền vào biểu mẫu. Khi họ nhấp gửi, tôi muốn gửi biểu mẫu. Tôi đã tìm ra cách làm cho cửa sổ bật lên phương thức nhưng không thể tìm ra cách để làm cho nó gửi biểu mẫu khi biểu mẫu được nhấp. Có ai biết cách để làm điều này không?

@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

Bạn cần đảm bảo bạn có phương thức POST hợp lệ trong trình điều khiển của mình để gửi biểu mẫu. Biểu mẫu của bạn ở đây có vẻ hợp lệ miễn là bạn không mong đợi nút gửi của hộp thoại để gửi biểu mẫu. Nếu đó là trường hợp thì bạn sẽ cần phải cung cấp cho các hình thức một ID và gọi trình từ chức năng của bạn cho hộp thoại "Gửi" nút.

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