部分視圖的AJAX模型驗證

我有一個局部視圖，它是一個用作彈出窗口的登錄。我想要做的就是讓我的模型進行驗證（服務器端）並通過AJAX返回任何錯誤。下面的代碼僅返回錯誤的部分視圖。我希望我的行動結果不會返回一個視圖，而只是錯誤。在舊的ASP.NET中，這將是部分回發。我不知道如何在MVC中完成此操作。部分視圖的AJAX模型驗證

這裏是示範

public class LoginModel 
{ 
    [Required] 
    public String Email { get; set; } 
    [Required] 
    [DataType(DataType.Password)] 
    public String Password { get; set; } 

}

下面是部分查看

@model MySite.Models.LoginModel 
@using (Ajax.BeginForm("Authenticate", "Account", null, new AjaxOptions { OnFailure = "error" }, new { id = "LoginForm" }))

{

<div class="modal-body" id="LoginPopupDialogMessage"> 
    The page you have requested requires you to login. Please enter your credentials and choose your country: 
    <br /> 
    <br /> 
    <div class="row"> 
     <div class="form-group col-lg-offset-2 col-lg-8"> 
      <label>Email Address</label> 
      @Html.TextBoxFor(u => u.Email, new { @class = "form-control input-lg input-sm", id = "Email", name = "Email" }) 
      @Html.ValidationMessageFor(u => u.Email) 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group col-lg-offset-2 col-lg-8 "> 
      <label>Password</label> 
      @Html.PasswordFor(u => u.Password, new { @class = "form-control input-lg input-sm", name = "Password" }) 
      @Html.ValidationMessageFor(u => u.Password) 
     </div> 

    </div> 
    <div style="text-align: center; padding-top: 20px;" class="ImageGroup"> 
     <button name="companyCode" value="LB_US" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-usa.png" /> 
     </button> 
     <button name="companyCode" value="LB_CA" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-canada.png" /> 
     </button> 
     <button name="companyCode" value="LB_EU" class="btn-link" type="submit"> 
      <img src="../../WebContent/Images/icon-flag-europe.png" /> 
     </button> 
    </div> 
</div> 
}

我叫parial認爲從_layout.cshtml.

<div class="modal fade" id="LoginPopupDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header" style="background: #e7e3e7; color:#000;"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#000;"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <div class="modal-title" id="LoginPopupDialogHeader">Please Login</div> 
      </div> 
       @Html.Action("Login", "Account") 

     </div> 
    </div> 
</div>

我的控制器操作：

[HttpPost] 
[Route("account/authenticate")] 
public ActionResult Authenticate(String companyCode, LoginModel model) 
     { 
    if (!ModelState.IsValid) 
     { 

      // ?? 
     } 
    return PartialView("Login", model); 
}

來源

2016-11-11 PhillyNJ

由於你的代碼做一個Ajax表單提交的登錄，你應該嘗試返回來自服務器的JSON響應。如果模型驗證失敗，您可以從模型狀態字典中讀取驗證錯誤並將其存儲在字符串集合（錯誤消息）中，並將其作爲json響應的一部分返回。如果模型驗證通過，您可以繼續執行代碼以驗證登錄憑據，如果這些憑據看起來不錯，請發回一個帶有用戶下一個URL的JSON響應（我們可以將用戶重定向到該URL）。

[HttpPost] 
public ActionResult Authenticate(String companyCode, LoginModel model) 
{ 
    if (!ModelState.IsValid) 
    { 
     var errors = ViewData.ModelState.Values 
          .SelectMany(x => x.Errors.Select(c => c.ErrorMessage)); 
     return Json(new { Status = "Error", Errors = errors }); 
    } 

    //to do :Verify login, if good, return the below respose 
    var url=new UrlHelper(Request.RequestContext); 
    var newUrl = url.Action("About"); 
    return Json(new { Status="Success", Url = newUrl}); 
}

現在，在你看來，你可以指定一個OnSuccess處理器作爲AjaxOptions的一部分。這將是一個JavaScript對象，來自服務器的json響應將來到這個對象。我們基本上需要檢查Status屬性值並做適當的事情。

new AjaxOptions { OnFailure = "error" , OnSuccess="loginDone"}

loginDone的以下實現只是提醒錯誤消息。您可以更新它以將其顯示爲DOM的一部分。

function loginDone(d) { 
    if (d.Status === "Success") { 
     window.location.href = d.Url; 
    } else { 
     $.each(d.Errors,function(a, b) { 
       alert(b); 
     }); 
    } 
}

您也可以考慮啓用不顯眼的客戶端驗證它執行客戶端驗證嘗試連接到服務器調用之前。這也將顯示驗證錯誤跨度中的錯誤消息（與正常的mvc模型驗證相同）

來源

2016-11-11 15:40:21 Shyju

部分視圖的AJAX模型驗證

回答

相關問題