asp.net Core MVC + form validation + ajax form 筆記
阿新 • • 發佈:2017-10-11
for ade name git mvc scrip 答案 oval ora
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 筆記