使用带有 jquery ajax 的 ASP.NET MVC 验证？

Posted 2023-02-22

【中文标题】使用带有 jquery ajax 的 ASP.NET MVC 验证？

【英文标题】：Use ASP.NET MVC validation with jquery ajax?

【发布时间】：2012-12-09 22:57:30

【问题描述】：

我有这样的简单 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)。

现在我有几个问题：

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

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

如何将验证问题转发回客户端并将其呈现为好像我使用构建 int 验证(@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>

【问题讨论】：

下面的答案很好。这是一个相关的问题。答案允许客户端或服务器端验证。我爱上了他们提供的 JQuery 代码。 （不，这不是我的答案。）***.com/questions/28987752/…

【参考方案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 + '"]') 这样的东西会找到您的输入元素

【讨论】：

很好的答案，尤其是很棒的 ValidateAjaxAttribute！谢谢！

我不明白为什么这个答案得到了这么多票。它没有回答问题 1：使用 $.ajax 发布时如何进行客户端验证？我认为@Shyju 的回答对此有所帮助。

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

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

这个答案很棒！但我仍然认为 ASP.NET MVC 框架应该提供一种内置的方式来做到这一点。

【参考方案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
           )
        

    );

);

【讨论】：

谢谢！我试过这个 $("form#" + formId).validate() 但它说（找到的）表单没有 validate()？

参见 Edit1，我在其中显示验证脚本包含在网页中。我还看到使用常规输入类型提交按钮时正在运行验证。

我发现了问题（从母版页中删除了 Scripts.Render）。但是仍然有问题将 ModelState 验证错误发送回客户端？我该如何处理呢？例如，如果用户不再登录（ModelState.AddModelError("CustomError", "validation text").

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

Ivy ：您的返回类型（ActionResult）是 JsonResult 的基类。所以它可以返回 JSON 数据。您应该做的是，如果是 ajax 调用（检查 Request.IsAjax），获取验证错误并构建 JSON 并将其发送回客户端。检查$.post的回调方法中的json并显示错误信息。

【参考方案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();
        
    

【讨论】：

您的“GetModelStateErrors”可以通过将其转换为更简单的单行语句来完全简化：return ModelState.Values.SelectMany(x => x.Errors).Select(x = > x.ErrorMessage).ToList();

为什么不简单地返回一个PartialView 来呈现给Ajax？

【参考方案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" ))

【参考方案5】：

你可以这样做：

（编辑：考虑到您正在等待json 和dataType: '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) 中获取错误。但在你的情况下，这可能是一种选择

【讨论】：

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

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

请解释一下？没有收到你的最后一篇文章？