基于局部视图的AJAX模型验证

我有一个局部视图，它是一个作为弹出窗口的登录。我只想让我的模型进行验证（服务器端），并通过AJAX返回任何错误。下面的代码仅返回带有错误的局部视图。我希望我的操作结果不返回视图，而只返回错误。在旧的ASP.NET中，这将是一个部分回帖。我不知道如何在MVC中实现这一点

这是模型

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" }))

{

我的控制器操作：

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

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

---

由于您的代码正在为登录进行ajax表单提交，因此您应该尝试从服务器返回JSON响应。如果模型验证失败，您可以从模型状态字典中读取验证错误，并将其存储在字符串集合（错误消息）中如果模型验证通过，您可以继续执行代码来验证登录凭据，如果这些凭据看起来不错，则返回一个json响应，其中包含用户的下一个url（我们可以将用户重定向到该url）

现在在您的视图中，您可以指定一个

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模型验证相同）

。

[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});
}

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

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