ASPNetCore MVC ModelValidation-ajax
2019-04-16 16:36
961 查看
在提交数据时常常会在客户端进行一次友好的验证信息提示,常见的就是直接通过ModelValidation验证(这种方式最快最简单),还有些情况期望使用ajax异步方式处理以实现更多其他逻辑的处理。
此篇文章主要描述在使用ajax和直接提交窗体--验证Model时如何正确进行验证信息的提示。
一、通过ModelValidation的方式实现
这个比较简单,没什么好说的直接上代码
前端: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <form> <div class="form-group"> <label>Age</label> <input class="form-control" asp-for="Age"/> <span asp-validation-for="Age"></span> </div> <button type="submit" class="btn btn-primary">submit</button> </form> 后端: public class ValidModel { [Required(ErrorMessage ="必须填写")] public long Age { get; set; } } 这里的话就已经实现了验证(MVC的验证模型)。
二、通过ajax的方式实现
1. 通过jquery, jqueryValidate实现
前端: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <form id="frmEdit"> <div class="form-group"> <label>Age</label> <input class="form-control" asp-for="Age" title="必须填写" required/> </div> <button type="submit" class="btn btn-primary" id="btnSave">submit</button> </form> <script> $(function () { // for editFormOne $("#btnSave").click(function () { $("#frmEdit").validate({ submitHandler: function () { //处理验证成功之后的逻辑 } }); }); }); </script> 后端: public class ValidModel { public long Age { get; set; } } 由于采用了ajax的验证,所以这里后台Model不再使用required属性, 前端这里也不需要引用jquery.validate.unobtrusive.js。
2 . 异常引用:jquery.validate,jquery, jquery.validate.unobtrusive并且采用asp-for
标记时就会出现:
对于Model的绑定属性是值类型时:
MVC会自动触发required属性的标签生成:data-val="true" data-val-required="The Age field is required."
这个属性会直接影响到jqueryvalidate的验证的处理结果,就是没有提示消息出来。
对于这个问题以下两种解决方案供参考
第一种在标签上不使用asp-for属性,而是直接静态方式name='xxx'.
前端: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <form id="frmEdit"> <div class="form-group"> <label>Age</label> <input class="form-control" name="Age" title="必填项" required /> </div> <button type="submit" class="btn btn-primary" id="btnSave">submit</button> </form> <script> $(function () { // for editFormOne $("#btnSave").click(function () { $("#frmEdit").validate({ submitHandler: function () { //处理验证成功之后的逻辑 } }); }); }); </script> 后端: public class ValidModel { public long Age { get; set; } }
第二种使用asp-for属性,对应的Model的话需要调整值类型为:可以null的类型, Nullable<T>或者T?的类型,这样的话就会默认过滤掉
required属性生成的标签data*,避免了和jquery.validate.unobtrusive的冲突.
前端: <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> <form id="frmEdit"> <div class="form-group"> <label>Age</label> <input class="form-control" asp-for="Age" title="必填项" required /> </div> <button type="submit" class="btn btn-primary" id="btnSave">submit</button> </form> <script> $(function () { // for editFormOne $("#btnSave").click(function () { $("#frmEdit").validate({ submitHandler: function () { //处理验证成功之后的逻辑 } }); }); }); </script> 后端: public class ValidModel { public long? Age { get; set; } // public Nullable<long> Age {get;set;} 一样的 }
参考链接
相关文章推荐
- Model Validation in Asp.net MVC
- ASP.NET MVC 3 (Adding Validation to the Model) (7/9)
- 返璞归真 asp.net mvc (5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test
- ASP.NET MVC 3 (Adding Validation to the Model) (7/9)
- 返璞归真 asp.net mvc (5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test
- Asp.net MVC中 model 验证方式 ajax +jquery
- Asp.net MVC +JQueryValidation + AjaxForm
- 返璞归真 asp.net mvc (5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test
- 返璞归真asp.net mvc 1.0(5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test【转】
- asp.net mvc 1.0(5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test(非原创)
- Asp.net MVC +JQueryValidation + AjaxForm
- ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
- Asp.net MVC +JQueryValidation + AjaxForm
- 返璞归真asp.net mvc 1.0(5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test
- asp.net mvc 1.0(5) - Action Filter, UpdateModel, ModelBinder, Ajax, Unit Test(非原创)
- 错误 11 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v2.0\Assemblies\System.Web.WebPages
- Asp.net MVC ajax 上传List<Model>
- 新建MVC3项目时出错:错误 2 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“C:\Program Files\Microsoft ASP.NET\ASP.NET Web Pages\v2.0\Assemblies\System.Web.WebPages.dll”和“C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 3\Assembli
- Model Validation in Asp.net MVC
- ASP.NET MVC使用ajax向控制器post Model 研究