ASP. NET Core MVC + form validation + Ajax form notes

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