asp.net Core MVC + form validation + ajax form 笔记
asp.net Core MVC 有特别处理form,controller可以自己处理model的验证,最大的优势是写form时可以少写代码
先了解tag helper ,这东西就是element上的attribute,在angular来说就是指令,通过指令可以很好的写代码
cshtml
@model Project.Web.Home.Product <form class="myForm" asp-controller="Home" asp-action="Form" method="post">
<!-- Input and Submit elements -->
<label asp-for="name"></label>
<input asp-for="name" class="form-control" />
<button type="submit">Submit</button>
<span asp-validation-for="name"></span>
</form>
Controller
public class Product
{
[Required(ErrorMessage = "Required")]//可以验证
[Display(Name = "Product Name")]
public string name { get; set; }
}
编辑后的cshtml
<form class="myForm" method="post" action="/form" novalidate="novalidate">
<!-- Input and Submit elements -->
<label for="name">Product Name</label>
<input class="form-control" type="text" data-val="true" data-val-required="Required" id="name" name="name" value="keat">//先忽略keat
<button type="submit">Submit</button>
<span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span>
</form>
通过以上的代码,结果可以看出tag helper大致上处理了一些代码,还需要最后的validation和 model binding
Controller
public class HomeController : Controller
{
[Route("")] //忽略
[Route("{cnOrAmp:regex(^cn$|^amp$)}")]//忽略
public IActionResult Index(string cnOrAmp = "en")
{
var vm = new HomeVm();
vm.product = new Product();
vm.product2 = new Product2();//忽略
vm.product.name = "keat";
vm.product2.name2 = "mark";//忽略 if (cnOrAmp == "amp") {//忽略
return View("~/Web/Home/Amp/Index.cshtml",vm);//忽略
}//忽略
return View("~/Web/Home/Index.cshtml", vm);
}
这样就实现了model binding
最后就是主角了,validation。
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
就这样就有一个完整的form了,在asp.net Core MVC有个麻烦的问题,就是form不好管理,如果一个项目一个页面就只有一个form,那么没事发生,但是如果在多个页面重复那该怎么办,答案是ajaxing(MVC不支持)
介绍github 4000多个星星的plugin
https://github.com/jquery-form/form
<script>
// wait for the DOM to be loaded
$(document).ready(function () {
// bind 'myForm' and provide a simple callback function
$('.myForm').ajaxForm({
success: function (response, textStatus, xhr, form) {
console.log("in ajaxForm success"); if (!response.length || response != 'good') {
console.log("bad or empty response");
return xhr.abort();
}
console.log("All good. Do stuff");
},
error: function (xhr, textStatus, errorThrown) {
console.log("in ajaxForm error");
},
complete: function (xhr, textStatus) {
console.log("in ajaxForm complete");
},
beforeSend: function () {
console.log("before send");
}
});
});
</script>
对提交过程中处理不同的状况
以上
asp.net Core MVC + form validation + ajax form 笔记的更多相关文章
- asp net core mvc 跨域ajax解决方案
1.配置服务端 在Startup文件中国配置Cors策略: IEnumerable<Client> clients= Configuration.GetSection("Clie ...
- ASP.NET Core MVC – Form Tag Helpers
ASP.NET Core Tag Helpers系列目录 ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Helpers ...
- ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览
原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...
- ASP.NET Core MVC 之模型(Model)
1.模型绑定 ASP.NET Core MVC 中的模型绑定将数据从HTTP请求映射到操作方法参数.参数既可以是简单类型,也可以是复杂类型.MVC 通过抽象绑定解决了这个问题. 2.使用模型绑定 当 ...
- ASP.NET Core MVC/WebAPi 模型绑定探索
前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...
- 创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图
创建ASP.NET Core MVC应用程序(4)-添加CRUD动作方法和视图 创建CRUD动作方法及视图 参照VS自带的基架(Scaffold)系统-MVC Controller with view ...
- ASP.NET Core MVC上传、导入、导出知多少
前言 本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天才研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 ...
- 008.Adding a model to an ASP.NET Core MVC app --【在 asp.net core mvc 中添加一个model (模型)】
Adding a model to an ASP.NET Core MVC app在 asp.net core mvc 中添加一个model (模型)2017-3-30 8 分钟阅读时长 本文内容1. ...
- ASP.NET Core Razor中处理Ajax请求
如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...
随机推荐
- liferay6.1.2的API
http://docs.liferay.com/portal/6.1/javadocs/overview-summary.html
- pdo sqlserver
PHP代码如果想要用以上的方式兼容linux服务器和windows服务器,那么大概的示例代码是这样的. <?php header("Content-type: text/html; c ...
- 取n的某些位
实例十一:取n的某些位 方法:result=(n>>4)&(~(~0<<4)) 取出某数n的低4位. 数值0 0000 0000 ~0 1111 1111 ~0& ...
- 论文笔记:语音情感识别(二)声谱图+CRNN
一:An Attention Pooling based Representation Learning Method for Speech Emotion Recognition(2018 Inte ...
- linux常用命令:ping 命令
Linux系统的ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地 址192.168.1.1试试 ...
- jsonp 方式处理跨域前后端代码如何配合?
JSONP(JSON with Padding)(json 数据填充)只支持GET请求 是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 跨域产生原因是浏览器的同源策略.( ...
- Hadoop MapReduce执行过程实例分析
1.MapReduce是如何执行任务的?2.Mapper任务是怎样的一个过程?3.Reduce是如何执行任务的?4.键值对是如何编号的?5.实例,如何计算没见最高气温? 分析MapReduce执行过程 ...
- 更改 Centos 6 的 yum 源
1.查看当前使用的源: yum repolist all 阿里源网址,使用方法点右边的帮助可以看到:https://opsx.alibaba.com/mirror 2.更改源: 第一步:备份你的原镜像 ...
- ubuntu服务器安装FTP服务
目录 ubuntu服务器安装FTP服务 一.实验环境 二.安装配置FTP 下载ftp 配置环境 新建用户 ubuntu服务器安装FTP服务 参考教程 [ubuntu16.04搭建ftp服务器 一.实验 ...
- 求LCA练习+部分算法复习 2017.1.22
第一题就LCA即可.不过推荐用Tarjan(最快,常数很小).然后Tarjan的时候顺便就出一个dist[i],表示i节点到根节点的距离.求出了LCA,那么两点间的距离就为dist[u] + dist ...