ASP. NET Core MVC has special handling Form,controller can handle the model validation, the biggest advantage is that writing form can write less code
First understand the tag helper, this thing is the element on the attribute, in angular is the instruction, through the instructions can write very good code
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")]//can verify [Display (name = "Product name")] Public string Name {get; set;} }
Edited by 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" >//first ignore keat <button type= " Submit ">Submit</button> <span class=" Field-validation-valid "data-valmsg-for=" name " Data-valmsg-replace= "true" ></span>???? </form>
Through the above code, the result can be seen that tag helper roughly processed some code, but also need the final validation and model binding
Controller
public class Homecontroller:controller { [Route (")]//Ignore [route (" {Cnoramp:regex (^cn$|^amp$)} ")]//ignore Public Iactionresult Index (String cnoramp = "en") { var vm = new HOMEVM (); Vm.product = new product (); Vm.product2 = new Product2 ();//Ignore Vm.product.name = "Keat"; Vm.product2.name2 = "Mark";//Ignore if (cnoramp = = "Amp") {//Ignore return View ("~/web/home/amp/index.cshtml", VM); /Ignore }//ignore return View ("~/web/home/index.cshtml", VM); }
This allows the model binding to be implemented
The last is the protagonist, 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>
So there is a complete form, in the ASP. NET Core MVC has a problem, is the form is not good management, if a project a page there is only one form, then nothing happens, but if you repeat on multiple pages what to do, The answer is ajaxing (MVC does not support)
Introducing the plugin of more than 4,000 stars on GitHub
Https://github.com/jquery-form/form
<script>//wait for the DOM to is loaded $ (document). Ready (function () {//bind ' myForm ' and provide a simple callback function $ ('. MyForm '). Ajaxform ({success:function (response, text Status, 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 complet E "); }, Beforesend:function () {Console.log ("before send"); } }); }); </script>
Dealing with different situations in the submission process
Above
ASP. NET Core MVC + form validation + Ajax form notes