如何使用ASP.NET MVC验证和jQuery AJAX？

Question

我有一个简单的ASP.NET MVC操作，如下所示：

public ActionResult Edit(EditPostViewModel data)
{

}

EditPostViewModel 有像这样的验证属性：

[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }

我正在使用以下辅助程序：

 @Html.LabelFor(Model => Model.EditPostViewModel.Title, true)

 @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                        new { @class = "tb1", @Style = "width:400px;" })

如果我在包含此文本框的表单上执行提交，将首先对客户端进行验证，然后再对服务端(ModelState.IsValid)进行验证。

现在我有几个问题:

1. 是否可以与jQuery ajax提交一起使用? 我所做的只是删除表单，在单击提交按钮时，javascript将收集数据，然后运行$.ajax。

2. 服务器端的ModelState.IsValid会起作用吗?

3. 如何将验证问题转发回客户端，并呈现为使用内置验证(@Html.ValidationSummary(true))？

Ajax调用示例：

function SendPost(actionPath) {
    $.ajax({
        url: actionPath,
        type: 'POST',
        dataType: 'json',
        data:
        {
            Text: $('#EditPostViewModel_Text').val(),
            Title: $('#EditPostViewModel_Title').val() 
        },
        success: function (data) {
            alert('success');
        },
        error: function () {
            alert('error');
        }
    });
}

编辑 1：

包括在页面中：

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

- Ivy

---

下面是一个不错的答案。这里有一个相关的问题。该答案允许客户端或服务器端验证。我非常喜欢他们提供的JQuery代码。（不，那不是我的答案。）https://dev59.com/z4jca4cB1Zd3GeqPzqMz - Adventure

Answer 1

客户端

使用 jQuery.validate 库应该相当简单，只需要进行以下设置：

在您的 Web.config 文件中指定以下设置：

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

当你构建视图时，你会定义类似这样的东西：

@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                                new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)

注意：这些需要在表单元素内定义。

然后您需要包含以下库：

<script src='@Url.Content("~/Scripts/jquery.validate.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type='text/javascript'></script>

这应该能为您设置客户端验证做好准备。

资源

• http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx

服务器端

注意：这仅用于在jQuery.validation库之上进行附加的服务器端验证。

也许这样可以帮助您：

[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
    //Save data
    return Json(new { Success = true } );
}

ValidateAjax 是一个已定义的属性：

public class ValidateAjaxAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!filterContext.HttpContext.Request.IsAjaxRequest())
            return;

        var modelState = filterContext.Controller.ViewData.ModelState;
        if (!modelState.IsValid)
        {
            var errorModel = 
                    from x in modelState.Keys
                    where modelState[x].Errors.Count > 0
                    select new
                           {
                               key = x,
                               errors = modelState[x].Errors.
                                                      Select(y => y.ErrorMessage).
                                                      ToArray()
                           };
            filterContext.Result = new JsonResult()
                                       {
                                           Data = errorModel
                                       };
            filterContext.HttpContext.Response.StatusCode = 
                                                  (int) HttpStatusCode.BadRequest;
        }
    }
}

这将返回一个JSON对象，指定了您模型中的所有错误。

响应示例：

[{
    "key":"Name",
    "errors":["The Name field is required."]
},
{
    "key":"Description",
    "errors":["The Description field is required."]
}]

这将返回给你的错误处理回调函数$.ajax调用

您可以循环遍历返回的数据，根据返回的键来设置所需的错误消息（我认为类似于$('input[name="' + err.key + '"]')会找到您的输入元素

)

- Andrew Burgess

---

非常好的答案，特别是使用了令人惊叹的ValidateAjaxAttribute！谢谢！ - René

我不明白为什么这个答案会得到这么多票。它没有回答问题1：如何在使用$.ajax提交时进行客户端验证？我认为@Shyju的答案可以帮助解决这个问题。 - Valentin

@Valentin - 我的回答确实有帮助，因为数据也在服务器端进行验证。验证插件应该能够在填写表单时启用动态验证，并且当表单提交（无论OP想要如何提交）时，服务器将提供最终验证，这是更可取的，因为客户端验证可以被绕过。 - Andrew Burgess

我使用jQuery的验证消息框架，通过循环遍历返回的错误并将错误消息插入到正确的框中：`for (var i = 0; i < modelStateErrors.length; i++) { $('span[data-valmsg-for="' + modelStateErrors[i].key + '"]').text(modelStateErrors[i].errors[0]); }` - Ian

这个回答很好！但我仍然认为ASP.NET MVC框架应该提供一种内置的方法来实现这个。 - Zignd

谢谢您的回答。对于那些试图触发动态加载表单验证的人，请在内容加载时添加以下行。<pre><code>$.validator.unobtrusive.parse($('#yourdynamicallyloadedform'));</code></pre> - A P

Answer 2

你需要做的是序列化表单数据并将其发送到控制器动作。ASP.NET MVC将使用MVC模型绑定功能将表单数据绑定到EditPostViewModel对象（您的操作方法参数）。

您可以在客户端验证表单，如果一切正常，则将数据发送到服务器。 valid() 方法非常方便。

$(function () {

    $("#yourSubmitButtonID").click(function (e) {

        e.preventDefault();
        var _this = $(this);
        var _form = _this.closest("form");

        var isvalid = _form .valid();  // Tells whether the form is valid

        if (isvalid)
        {           
           $.post(_form.attr("action"), _form.serialize(), function (data) {
              //check the result and do whatever you want
           })
        }

    });

});

- Shyju

---

谢谢！我尝试了这个 $("form#" + formId).validate() 但是它说找到的表单没有 validate() 方法？ - Ivy

请看我的Edit1，我展示了验证脚本被包含在网页中。我还发现当使用常规的输入类型提交按钮时，验证正在运行。 - Ivy

你需要在页面中包含jquery.validate和jquery.validate.unobtrusive js文件。你的HTML输入框是否具有验证插件所寻找的属性？ - Shyju

我已经添加了三个脚本，它们都包含在页面中，并且验证方法现在可以工作。问题是如何处理来自服务的返回数据？我需要将操作从ActionResult更改为JsonResult吗？我如何将ModelState验证信息从操作转发到$.post内的客户端表单？ - Ivy

Ivy：你的返回类型（ActionResult）是JsonResult的基类，因此它可以返回JSON数据。你需要做的是，如果这是一个ajax调用（检查Request.IsAjax），获取验证错误并构建一个JSON发送回客户端。在$.post的回调方法中检查JSON并显示错误消息。 - Shyju

Answer 3

这里有一个相当简单的解决方案：

在控制器中，我们以以下方式返回错误：

if (!ModelState.IsValid)
        {
            return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
        }

以下是部分客户端脚本：

function displayValidationErrors(errors)
{
    var $ul = $('div.validation-summary-valid.text-danger > ul');

    $ul.empty();
    $.each(errors, function (idx, errorMessage) {
        $ul.append('<li>' + errorMessage + '</li>');
    });
}

这就是我们如何通过ajax处理它:

$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
        var isSuccessful = (data['success']);

        if (isSuccessful) {
            $('#partial-container-steps').html(data['view']);
            initializePage();
        }
        else {
            var errors = data['errors'];

            displayValidationErrors(errors);
        }
    }
});

同时，我通过以下方式使用Ajax呈现局部视图：

var view = this.RenderRazorViewToString(partialUrl, viewModel);
        return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);

RenderRazorViewToString 方法：

public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
                                                                     viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View,
                                         ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

- Alex Herman

---

将您的 "GetModelStateErrors" 方法转换为一行简单语句：return ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList(); 可以使其变得更加简洁易懂。这行代码会返回模型状态中所有错误信息的列表，不需要使用原始方法实现。 - Camilo Terevinto

为什么不直接返回一个 PartialView 以供 Ajax 渲染呢？ - Sinjai

Answer 4

我添加了一些逻辑到@Andrew Burgess提供的解决方案中。以下是完整的解决方案：

创建了一个操作过滤器来获取ajax请求的错误信息：

public class ValidateAjaxAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (!filterContext.HttpContext.Request.IsAjaxRequest())
                return;

            var modelState = filterContext.Controller.ViewData.ModelState;
            if (!modelState.IsValid)
            {
                var errorModel =
                        from x in modelState.Keys
                        where modelState[x].Errors.Count > 0
                        select new
                        {
                            key = x,
                            errors = modelState[x].Errors.
                                                          Select(y => y.ErrorMessage).
                                                          ToArray()
                        };
                filterContext.Result = new JsonResult()
                {
                    Data = errorModel
                };
                filterContext.HttpContext.Response.StatusCode =
                                                      (int)HttpStatusCode.BadRequest;
            }
        }
    }

我在控制器方法中添加了过滤器：

[HttpPost]
// this line is important
[ValidateAjax]
public ActionResult AddUpdateData(MyModel model)
{
    return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet);
}

添加了用于jQuery验证的通用脚本:

function onAjaxFormError(data) {
    var form = this;
    var errorResponse = data.responseJSON;
    $.each(errorResponse, function (index, value) {
        // Element highlight
        var element = $(form).find('#' + value.key);
        element = element[0];
        highLightError(element, 'input-validation-error');

        // Error message
        var validationMessageElement = $('span[data-valmsg-for="' + value.key + '"]');
        validationMessageElement.removeClass('field-validation-valid');
        validationMessageElement.addClass('field-validation-error');
        validationMessageElement.text(value.errors[0]);
    });
}

$.validator.setDefaults({
            ignore: [],
            highlight: highLightError,
            unhighlight: unhighlightError
        });

var highLightError = function(element, errorClass) {
    element = $(element);
    element.addClass(errorClass);
}

var unhighLightError = function(element, errorClass) {
    element = $(element);
    element.removeClass(errorClass);
}

最终我在我的Ajax Begin表单中添加了错误JavaScript方法：

@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}

- Manprit Singh Sahota

Answer 5

你可以这样做： （编辑：考虑到您正在等待使用dataType: 'json'的响应json） .NET

public JsonResult Edit(EditPostViewModel data)
{
    if(ModelState.IsValid) 
    {
       // Save  
       return Json(new { Ok = true } );
    }

    return Json(new { Ok = false } );
}

JS：

success: function (data) {
    if (data.Ok) {
      alert('success');
    }
    else {
      alert('problem');
    }
},

如果需要的话，我也可以解释如何通过返回错误500并在事件错误（ajax）中获取错误。但在你的情况下，这可能不是一个选项。

- andres descalzo

---

我知道如何进行常规的Jason请求，但这对于验证不同属性甚至使用我所要求的内置ASP.NET MVC验证是没有帮助的。我可能可以构建一个复杂的Jason对象来解释每个属性的验证错误，但这将是很多工作，我希望您能重用ASP.NET MVC验证的内置功能来完成此操作？ - Ivy

1 - 如何运行您的函数“SendPost”？ 2 - 您在客户端上的有效数据是什么？ - andres descalzo

请解释一下？我不理解你的最后一篇帖子。 - Ivy