MVC Learning Series 11 --- Verification Series client verification, mvc11 ---

MVC Learning Series 11 --- Verification Series client verification, mvc11 ---

I learned about server verification. In this article, we will continue to learn about client verification and client verification, and use Jquery and Jquery plug-ins to implement [jquery. validate. min. js and jquery. validate. unobtrusive. min. js )]

In server verification, the page must be submitted to the server for verification. If the data verification fails, the server sends a response to the client, and then the client sends a response based on the corresponding information, the client verification is different. If the user input data is submitted, the client verifies the data first. If the data fails, an error is returned and the data is not submitted to the server for verification, if it passes, the request will be sent to the server.

 

If you are using a version later than VS2012, client verification is Enabled: [of course, you can also manually add the following configuration .]

<Configuration>
<Deleetask>
<Add key = "ClientValidationEnabled" value = "true"/>
<Add key = "UnobtrusiveJavaScriptEnabled" value = "true"/>
</AppSettings>
</Configuration>

For enabling client side validation, we require including the jQuery min, validating & unobtrusive scripts in our view or layout page in the following order. <script src = "@ Url. Content ("~ /Scripts/jquery-1.6.1.min.js ")" type = "text/javascript"> </script>

<Script src = "@ Url. Content ("~ /Scripts/jquery. validate. js ")" type = "text/javascript"> </script>

<Script src = "@ Url. Content ("~ /Scripts/jquery. validate. unobtrusive. js ")" type = "text/javascript"> </script>

 

 

We are still in the previous project:

Using System; using System. collections. generic; using System. componentModel. dataAnnotations; using System. linq; using System. web; namespace Server_Side_Validation_IN_MVC.Models {public class StudentServer {[Required (ErrorMessage = "Name is Required")] public string Name {get; set ;} [Required (ErrorMessage = "Email Required")] [EmailAddress (ErrorMessage = "Incorrect Email format")] public string Email {get; set ;}}}

  public ActionResult SeverSideIndex()        {            return View();        }        [HttpPost]        public ActionResult SeverSideIndex(StudentServer model)        {            if (ModelState.IsValid)            {                ViewBag.Name = model.Name;                ViewBag.Email = model.Email;            }            return View();        }

The difference is that here I add a view, which is different:

Note that you must check the reference script library, that is, introduce Jquery and Jquery plug-ins to verify the client:

Modify the default route:

 public static void RegisterRoutes(RouteCollection routes)        {            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");            routes.MapRoute(                name: "Default",                url: "{controller}/{action}/{id}",                defaults: new { controller = "Student", action = "SeverSideIndex", id = UrlParameter.Optional }            );        }

 

Run the project:

We add a breakpoint in the post method of the controller.

 

Click the button directly: the post method is not called, and the Data Validity is verified directly on the client.

Enter valid data:

The breakpoint is triggered. That is, after the client passes the verification, it is submitted to the server for further processing.

 

Okay, this is the client verification, which is relatively simple. But be sure to introduce the Jquery plug-in.