asp.net mvc model attribute and razor and form and jquery validate 完美结合

1.创建Model，添加标注。

[Serializable]
public class BaseUserModel:BaseModel
{
[StringLength(100)]
[Required(ErrorMessage = "User Name can not be empty")]
public string UserName { get; set; }

}

2.controller中action传Model到razor页面

public ActionResult Create()
{

BaseUserModel model = new BaseUserModel();
return View(model);

}

public ActionResult Create(BaseUserModel editViewModel)
{
if (ModelState.IsValid)
{...............}

return View(model);

}

3.razor页面验证数据

@using (Html.BeginForm("Edit", "BaseUser", FormMethod.Post, new { id = "editBaseUser_Form", enctype = "multipart/form-data" }))
{
 .....

@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", @maxlength = "50" } })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })

....
}

var $form = $("#editBaseUser_Form");
var url = $form.attr("action");
var formDatas = $form.serializeJSON();
$form.removeData("validator");//必须写这个，不然第一次表单数据为空时，点击提交按钮，不会被Validation组件检测到，会被提交到服务器
$form.removeData("unobtrusiveValidation");//必须写这个，不然第一次表单数据为空时，点击提交按钮，不会被Validation组件检测到，会被提交到服务器
$.validator.unobtrusive.parse($form);//重新对控件进行验证
var bool = $form.validate().form();
if (bool) {
post(url, formDatas, function (data) {
if (data.Status == 200) {}

}

//易错总结

页面加载后运行此代码

$(function() {
$.validator.unobtrusive.parse($("form"));
});

原因：

页面加载后unobtrusive已对各标签的验证状态进行保存，页面局部加载后并不会导致unobtrusive重新对页面的控件进行验证并保存前状态，导致新页面无法进行验证。

原理：

注意看jquery.validate.unobtrusive源码最后一段：

$(function () {
$jQval.unobtrusive.parse(document);
});

jquery.validate.unobtrusive在页面加载后响应并运行上面代码，解析页面中data-val-*属性的标签，检验其验证规则。

局部刷新或加载页面后，jquery.validate.unobtrusive无法对新加入的标签进行data-val-*属性的过滤，导致验证失效。

解决：

$(function() {
$.validator.unobtrusive.parse($("form"));
});

调用上面代码，使unobtrusive重新对控件进行验证