asp.net Core MVC + form validation + ajax form 笔记
Posted 泉油
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 中读取 JSON 发布数据