使用jquery和ajax驗證登錄對話框

Question

我需要一些使用ajax進行驗證的幫助。我的登錄對話框有效，但它不處理在成功或驗證錯誤出現時發生的情況。我不知道如何或在哪裏我實際上創建了ajax後（我不使用jQuery經驗/阿賈克斯）

這是我的看法 @model Models.LoginModel

@{ 
     ViewBag.Title = "Log in"; 
    } 

    <hgroup class="title"> 
    @* <h1>@ViewBag.Title.</h1>*@ 
    </hgroup> 

    <section id="loginForm" style="margin-left: 20px; border-width: 0px;"> 

    @using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" })) 
    { 
     @Html.AntiForgeryToken() 
     @Html.ValidationSummary(true) 

     <fieldset> 
      <legend>Log in Form</legend> 
      <ol> 
       <li> 
        @Html.LabelFor(m => m.UserName) 
        @Html.TextBoxFor(m => m.UserName) 
        @Html.ValidationMessageFor(m => m.UserName) 
       </li> 
       <li> 
        @Html.LabelFor(m => m.Password) 
        @Html.PasswordFor(m => m.Password) 
        @Html.ValidationMessageFor(m => m.Password) 
       </li> 
       <li> 
        @Html.CheckBoxFor(m => m.RememberMe) 
        @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" }) 
       </li> 
      </ol> 


     </fieldset> 
     @*<p> 
      @Html.ActionLink("Register", "Register") if you don't have an account. 
     </p>*@ 
    } 
    </section> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dlgLogin").dialog({ 
      modal: true, 
      autoOpen: true, 
      draggable: true, 
      resizable: true, 
      title: "Login", 

      buttons: { 
       Login: function() { 
        $("#login_form").submit(); 

       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 


    }); 
</script> 

這是我loginpost方法在我的控制器中。

[HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Login(LoginModel model, string returnUrl) 
     { 
      if (ModelState.IsValid && WebSecurity.Login(model.UserName, model.Password, persistCookie: model.RememberMe)) 
      { 
       //return RedirectToLocal(returnUrl); 
       return Json(new { success = true }); 
      } 

      // If we got this far, something failed, redisplay form 
      ModelState.AddModelError("", "The user name or password provided is incorrect."); 
      return PartialView("LoginDialog",model); 
     } 

Answer 1

首先，在你的窗體聲明，這個需要是：

new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "loginForm" } 

，因爲它不知道該怎麼更換提交。恕我直言，我認爲你的結果應該是相同的，即如果你要返回視圖，返回視圖，如果你在JSON中處理，只處理JSON。如果您只想關閉成功的對話框，請創建一個名爲Success的視圖，在成功時返回該視圖，並在該視圖中植入必要的JavaScript來完成此操作。

返回不同類型的視圖將意味着客戶端的一大堆額外的流量語句。那有意義嗎？

希望這會有所幫助。

Answer 2

t

我自己解決了我的問題。這是代碼。是否可以將.ajax函數放置在創建對話框的相同腳本中？

<div id="dlgLogin"> 
     @model Models.LoginModel 

     @{ 
      ViewBag.Title = "Log in"; 
     } 

     <hgroup class="title"> 
     @* <h1>@ViewBag.Title.</h1>*@ 
     </hgroup> 

     <section id="loginForm" style="margin-left: 20px; border-width: 0px;"> 

     @using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" })) 
     { 
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true) 

      <fieldset> 
       <legend>Log in Form</legend> 
       <ol> 
        <li> 
         @Html.LabelFor(m => m.UserName) 
         @Html.TextBoxFor(m => m.UserName) 
         @Html.ValidationMessageFor(m => m.UserName) 
        </li> 
        <li> 
         @Html.LabelFor(m => m.Password) 
         @Html.PasswordFor(m => m.Password) 
         @Html.ValidationMessageFor(m => m.Password) 
        </li> 
        <li> 
         @Html.CheckBoxFor(m => m.RememberMe) 
         @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" }) 
        </li> 
       </ol> 
       <input id="submit" type="submit" value="Log in" style="display:none"/> 

      </fieldset> 
      @*<p> 
       @Html.ActionLink("Register", "Register") if you don't have an account. 
      </p>*@ 
     } 
     </section> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#dlgLogin").dialog({ 
       modal: true, 
       autoOpen: true, 
       draggable: true, 
       resizable: true, 
       title: "Login", 

       buttons: { 
        Login: function() { 
         $("#login_form").submit(); 

        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 


     }); 
    </script> 
    <script> 
     $(function() {  
      $('#login_form').on('submit', function() { 
       $.ajax({ 
        url: this.action, 
        type: this.method, 
        data: $(this).serialize(), 
        success: function (result) { 
         if (result.success) { 
          // We have a JSON object in case of success    
          $('#dlgLogin').dialog("close"); 

         } else { 
          // We have the partial with errors in case of failure 
          // so all we have to do is update the DOM 

          $('#dlgLogin').html(result); 
         } 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script>