为了账号安全,请及时绑定邮箱和手机立即绑定

将ASP.NET MVC验证与jquery ajax一起使用?

/ 猿问

将ASP.NET MVC验证与jquery ajax一起使用?

哆啦的时光机 2020-02-04 14:24:13

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


现在我有几个问题:


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


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


如何将验证问题转发回客户端,并像使用生成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>


查看完整描述

3 回答

?
缥缈止盈

客户端

使用该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 + '"]')会找到您的输入元素


查看完整回答
反对 2020-02-04
?
交互式爱情

您应该做的是序列化表单数据,并将其发送到控制器操作。ASP.NET MVC EditPostViewModel使用MVC模型绑定功能将表单数据绑定到对象(您的操作方法参数)。


您可以在客户端验证表单,如果一切正常,则将数据发送到服务器。该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

           })

        }


    });


});


查看完整回答
反对 2020-02-04
?
芜湖不芜

这是一个相当简单的解决方案:


在控制器中,我们返回如下错误:


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();

        }

    }


查看完整回答
反对 2020-02-04

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信