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

我有如下简单的ASP.NET MVC操作:

公共操作结果编辑(EditPostViewModel数据)
{
}

EditPostViewModel具有如下验证属性:

[显示(名称=“…”,说明=“…”)]
[StringLength(100,MinimumLength=3,ErrorMessage=“…”)]
[必需()]
公共字符串标题{get;set;}

在视图中,我使用以下帮助程序:

@Html.LabelFor(Model=>Model.EditPostViewModel.Title,true)
@Html.TextBoxFor(Model=>Model.EditPostViewModel.Title,
新的{@class=“tb1”,@Style=“width:400px;”})

如果我在表单上提交此文本框,则验证将首先在客户端上完成,然后在服务上完成(ModelState.IsValid

现在我有几个问题:

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

  2. 服务器端ModelState.IsValid是否工作

  3. 如何将验证问题转发回客户端,并将其显示为使用build int验证(@Html.ValidationSummary(true)

Ajax调用示例:

函数SendPost(actionPath){
$.ajax({
url:actionPath,
键入:“POST”,
数据类型:“json”,
数据:
{
Text:$(’#EditPostViewModel_Text’).val(),
标题:$(’EditPostViewModel_Title’).val()
},
成功:功能(数据){
警惕(“成功”);
},
错误:函数(){
警报(“错误”);
}
});
}

编辑1:

包括在第页:

<脚本src=”https://stackoverflow.com/Scripts/jquery-1.7.1.min.js“&gt&lt/脚本>
<脚本src=”https://stackoverflow.com/Scripts/jquery.validate.min.js“&gt&lt/脚本>
<脚本src=”https://stackoverflow.com/Scripts/jquery.validate.unobtrusive.min.js“&gt&lt/脚本>

客户端

使用jQuery.validate库的设置应该非常简单

Web.config文件中指定以下设置:

<应用程序设置>
<add key=“ClientValidationEnabled”value=“true”/>
<add key=“UnobtrusiveJavaScriptEnabled”value=“true”/>
&lt/应用程序设置>

建立视图时,您将定义如下内容:

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

注意:这些需要在表单元素中定义

然后需要包括以下库:

<脚本src=https://stackoverflow.com/questions/14005773/@Url.Content(“~/Scripts/jquery.validate.js”)'type='text/javascript'&gt&lt/脚本>
<脚本src=https://stackoverflow.com/questions/14005773/@Url.Content(“~/Scripts/jquery.validate.unobtrusive.js”)'type='text/javascript'&gt&lt/脚本>

这应该可以为您设置客户端验证

资源

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

服务器端

注意:这仅用于在jQuery.validation库上进行额外的服务器端验证

也许这样的事情会有所帮助:

[ValidateAjax]
公共JsonResult编辑(EditPostViewModel数据)
{
//保存数据
返回Json(新的{Success=true});
}

其中,ValidateAjax是一个属性,定义如下:

公共类ValidateAjaxAttribute:ActionFilterAttribute
{
公共覆盖无效OnActionExecuting(ActionExecutingContext filterContext)
{
如果(!filterContext.HttpContext.Request.IsAjaxRequest())
回来
var modelState=filterContext.Controller.ViewData.modelState;
如果(!modelState.IsValid)
{
var错误模型=
来自modelState.Keys中的x
其中modelState[x].Errors.Count>0
选择新的
{
键=x,
errors=modelState[x]。错误。
选择(y=>y.ErrorMessage)。
ToArray()
};
filterContext.Result=新的JsonResult()
{
数据=错误模型
};
filterContext.HttpContext.Response.StatusCode=
(int)HttpStatusCode.BadRequest;
}
}
}

这将返回一个JSON对象,指定所有模型错误

例如,答案是

[{
“键”:“名称”,
“错误”:[“名称字段是必需的。”]
},
{
“键”:“说明”,
“错误”:[“说明字段是必需的。”]
}]

这将返回到$.ajax调用的错误处理回调

您可以根据返回的键(我认为类似于$('input[name=“”+err.key+“]”)的内容)循环返回的数据,根据需要设置错误消息。将找到您的输入元素

发表评论