在提交数据时常常会在客户端进行一次友好的验证信息提示,常见的就是直接通过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相关推荐

  1. asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染...

    在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...

  2. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Upload ...

  3. Spring MVC,Ajax和JSON第1部分–设置场景

    我一直在考虑在Spring,Ajax和JSON上写博客,但是我从来没有做过. 这主要是因为它非常复杂,并且所需的技术一直处于变化状态. 当我决定撰写此博客时,我在Internet上有一个侦察员,如果您 ...

  4. Spring MVC,Ajax和JSON第3部分–客户端代码

    如果您一直关注有关Spring,Ajax和JSON的简短博客系列,那么您会回想起我到目前为止已经创建了一个Spring MVC Web应用程序,该应用程序显示一个表单,该表单允许用户选择一堆项目并向服 ...

  5. Spring MVC,Ajax和JSON第2部分–服务器端代码

    在上一个博客中,我说过我将谈论Spring,Ajax和JSON,但是没有. 原因是我想使用(很少)可信的购物网站场景来设置场景. 在这种情况下,当用户单击"电子商务"页面链接时,服 ...

  6. Anti-Forgery Request Recipes For ASP.NET MVC And AJAX 防伪验证,防伪请求

    怎样在每一个action添加防伪验证 怎样在运行时指定非因定salt加密令牌 怎样在ajax场景带上服务端防伪验证 This post discusses solutions for anti-for ...

  7. MVC教程第五篇:MVC整合Ajax

    MVC教程第五篇:MVC整合Ajax     摘要 本文将从完成"输入数据验证"这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET M ...

  8. 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 ...

  9. MVC之Ajax如影随行

    一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...

  10. mvc php 分页,MVC+jQuery.Ajax异步实现增删改查和分页_jquery

    本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; u ...

最新文章

  1. 造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个:
  2. 【Grafana】函数
  3. 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例...
  4. docker -v 覆盖了容器中的文件_10分钟让你理解 docker 容器中的 uid 和 gid
  5. js 弹出框 背景不滑动 方案
  6. EBB-4、忘记root密码;文件,目录权限
  7. python 读取、写入 pkl文件
  8. java逆向框架,Android逆向之逆向框架层
  9. Jmeterbadboy环境搭建
  10. linux订阅软件包,安装 Manjaro Linux 后必做的 6 件事 | Linux 中国
  11. 默认空间和webapps下项目部署
  12. 一直弹出adb已停止工作(远程主机强迫关闭现有的连接)的最简单完美解决法
  13. 百度地图WEB服务-全景静态图使用心得
  14. 历代iphone详细对比
  15. 云蝠智能与华为云:是伙伴,更是一起逐梦的同路人
  16. JDBC使用教程详解
  17. 数字IC所用软件及IP分类
  18. 无法调用自己电脑的gpu,即torch.cuda.is_available()返回false
  19. GE IC697CPX935 CPU模块PDF帅
  20. AI为啥能读懂说话人的情感?

热门文章

  1. 开发一个手游需要的工种
  2. 最近一周MOSS的link
  3. 螺旋矩阵的上下左右四指针解法
  4. 如何结合短信和邮件有效的监控网站
  5. Webx MVC分析
  6. 深入探讨运维驱动的可监控性设计
  7. 静态内容负载均衡的具体实现-续《几百元搞定大型网站》
  8. DinnerNow中的Work Flow应用(下) --- 订单流程
  9. FP-Growth算法
  10. 可视化报表Superser