ASPNetCore MVC ModelValidation-ajax
在提交数据时常常会在客户端进行一次友好的验证信息提示,常见的就是直接通过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;} 一样的}
参考链接
Required验证属性
jquery-validation-unobtrusive
jqueryvalidation
转载于:https://blog.51cto.com/dream1135134786/2379612
ASPNetCore MVC ModelValidation-ajax相关推荐
- asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染...
在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
[代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Upload ...
- Spring MVC,Ajax和JSON第1部分–设置场景
我一直在考虑在Spring,Ajax和JSON上写博客,但是我从来没有做过. 这主要是因为它非常复杂,并且所需的技术一直处于变化状态. 当我决定撰写此博客时,我在Internet上有一个侦察员,如果您 ...
- Spring MVC,Ajax和JSON第3部分–客户端代码
如果您一直关注有关Spring,Ajax和JSON的简短博客系列,那么您会回想起我到目前为止已经创建了一个Spring MVC Web应用程序,该应用程序显示一个表单,该表单允许用户选择一堆项目并向服 ...
- Spring MVC,Ajax和JSON第2部分–服务器端代码
在上一个博客中,我说过我将谈论Spring,Ajax和JSON,但是没有. 原因是我想使用(很少)可信的购物网站场景来设置场景. 在这种情况下,当用户单击"电子商务"页面链接时,服 ...
- Anti-Forgery Request Recipes For ASP.NET MVC And AJAX 防伪验证,防伪请求
怎样在每一个action添加防伪验证 怎样在运行时指定非因定salt加密令牌 怎样在ajax场景带上服务端防伪验证 This post discusses solutions for anti-for ...
- MVC教程第五篇:MVC整合Ajax
MVC教程第五篇:MVC整合Ajax 摘要 本文将从完成"输入数据验证"这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET M ...
- DayPilot——10分钟内用于ASP.NET MVC的AJAX每月事件日历
目录 1.项目设置(00:00:00-00:03:00) 2. ASP.NET MVC视图(00:03:00-00:04:00) 3.茶歇(00:04:00-00:05:00) 4. ASP.NET ...
- MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...
- mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...
最新文章
- 造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个:
- 【Grafana】函数
- 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例...
- docker -v 覆盖了容器中的文件_10分钟让你理解 docker 容器中的 uid 和 gid
- js 弹出框 背景不滑动 方案
- EBB-4、忘记root密码;文件,目录权限
- python 读取、写入 pkl文件
- java逆向框架,Android逆向之逆向框架层
- Jmeterbadboy环境搭建
- linux订阅软件包,安装 Manjaro Linux 后必做的 6 件事 | Linux 中国
- 默认空间和webapps下项目部署
- 一直弹出adb已停止工作(远程主机强迫关闭现有的连接)的最简单完美解决法
- 百度地图WEB服务-全景静态图使用心得
- 历代iphone详细对比
- 云蝠智能与华为云:是伙伴,更是一起逐梦的同路人
- JDBC使用教程详解
- 数字IC所用软件及IP分类
- 无法调用自己电脑的gpu,即torch.cuda.is_available()返回false
- GE IC697CPX935 CPU模块PDF帅
- AI为啥能读懂说话人的情感?