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

如果我在将文本框置于验证中的表单上进行提交，则将首先在客户端上执行，然后在service（ModelState.IsValid）上完成。

现在我有几个问题：

1. 可以将其与jQuery ajax提交一起使用吗？我正在做的就是简单地删除表单，然后单击“提交”按钮，javascript将收集数据，然后运行$.ajax。

2. 服务器端可以ModelState.IsValid工作吗？

3. 如何将验证问题转发回客户端，并像使用生成intvalidation（@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>

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/zh-CN/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 + '"]')会找到您的输入元素