How does ASP. net mvc asynchronous verification work? 02. How does one create an asynchronous validation form Element? asp. netmvc

How does ASP. net mvc asynchronous verification work? 02. How does one create an asynchronous validation form Element? asp. netmvc

In the previous article "ASP. net mvc asynchronous verification is how 01, jQuery's authentication method, error message prompt, behind the validate method ", learned how jQuery verifies, how to display error information, this article will try ASP. net mvc Asynchronous Authentication form Element creation, and how to implement ASP. net mvc asynchronous verification.

 

There is a model like this:

    public class Student
    {
        public int Id { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required, StringLength(60)]
        public string LastName { get; set; }
        [Range(5, 50)]
        public int Age { get; set; }
    }

 

Load a strongly typed view through HomeController.

        public ActionResult Index()
        {
            return View(new Student());
        }
        [HttpPost]
        public ActionResult Index(Student student)
        {
            if (ModelState.IsValid)
            {
                return View(student);
            }
            else
            {
Return Content ("Verification Failed ");
            }
        }
    }   

 

Home/Index. cshtml is a Student with a strong view type.

@model MvcApplication2.Models.Student
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "fm" }))
{
    <li>
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        @Html.ValidationMessageFor(m => m.FirstName)
    </li>
    <li>
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
        @Html.ValidationMessageFor(m => m.LastName)
    </li>
    <li>
        @Html.LabelFor(m => m.Age)
        @Html.TextBoxFor(m => m.Age)
        @Html.ValidationMessageFor(m => m.Age)
    </li>
    <li>
<Input type = "submit" value = "submit"/>
    </li>
}
@section scripts
{
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        
    </script>
}

Browse the interface corresponding to http: // localhost: 4873/, Home/Index. cshtml:

 

Click the "Submit" button, and the verification on the client interface is not implemented. The error message returned by the Controller is displayed directly.

 

However, the html element corresponding to Home/Index. cshtml already hasdata-*Attributes starting:

<form action="/" id="fm" method="post">    
   <li>
        <label for="FirstName">FirstName</label>
The <input data-val = "true" data-val-required = "FirstName field is required. "Id =" FirstName "name =" FirstName "type =" text "value =" ">
        <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
    </li>
    <li>
        <label for="LastName">LastName</label>
<Input data-val = "true" data-val-length = "The LastName field must be a string with a maximum length of 60. The "data-val-length-max =" 60 "data-val-required =" LastName field is required. "Id =" LastName "name =" LastName "type =" text "value =" ">
        <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
    </li>
    <li>
        <label for="Age">Age</label>
The <input data-val = "true" data-val-number = "field Age must be a number. The "data-val-range =" field Age must be between 5 and 50. The "data-val-range-max =" 50 "data-val-range-min =" 5 "data-val-required =" Age field is required. "Id =" Age "name =" Age "type =" text "value =" 0 ">
        <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>
    </li>
    <li>
<Input type = "submit" value = "submit">
    </li>
</form>

Visible,
○data-*The attribute at the beginning is generated based on the Model verification feature.
○jquery.validate.unobtrusive.jsRead the attributes starting with data -*.
○ Whenjquery.validate.unobtrusive.jsAfter understanding the verification rules, calljquery.validate.jsOfvalidateMethod Verification
○data-val="true"Indicates that it can be verified asynchronously.
○The data-val-required = "FirstName field is required. "Indicates that the verification rule is required, and the attribute value indicates the error message.
○data-valmsg-for="LastName"Indicates the error message about the field LastName.
○data-valmsg-replace="true"Indicates that the error message will change dynamically according to the error type.
○class="field-validation-valid"When there is no error message, it is displayed when there is an error message.class="field-validation-error"

 

Obviously, the "three muskeys" implemented by ASP. net mvc for client verification are:

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

 

Run http: // localhost: 4873/again, and an error message is displayed:

 

Next article will try to understandjquery.validate.unobtrusive.jsIn ASP. net mvc, how does one work.