部分视图的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模型验证

回答

相关问题