MVC5 + EF6 + Bootstrap3 (16) Client verification, mvc5ef6

MVC5 + EF6 + Bootstrap3 (16) Client verification, mvc5ef6

Slark. NET-blog Park http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-client-side-validation.html

Series of tutorials: MVC5 + EF6 + Bootstrap3

Previous section: MVC5 + EF6 + Bootstrap3 (15) apply ModelState and Data Annotation for server-side Data verification

Download source code: Click here to download

 

This section describes client Verification Based on server-side verification.

The advantage of client verification is that the error message is displayed without submitting code to the server. Faster response and smoother interaction with users.

However, its fatal weakness is that the verification script can be modified at Will on the client. Therefore, it is unreliable.

So here we will introduce how to add client verification to server-side authentication.

Then we add client Verification Based on the Data Annotation verification described in the previous section. Click here to view details.

First, check that the client verification is activated in the web. config file under the root directory of the solution:

1 <configuration>2   <appSettings>3     <add key="ClientValidationEnabled" value="true" />4     <add key="UnobtrusiveJavaScriptEnabled" value="true" />5   </appSettings>6 </configuration>

Row 3rd indicates that the client authentication is activated. Row 4th indicates that Unobstrusive JavaScript is activated. It represents an idea of separating Html code from script. In general, the idea of code separation is used for client verification.

Then, use the Model and Controller created in the previous section. For ease of viewing, the code is posted here. For details about the code, click here.

Models/DataAnnotationModel. cs

 1 using System.ComponentModel.DataAnnotations; 2 namespace SlarkInc.Models 3 { 4     public class DataAnnotationModel 5     { 6         [Required(ErrorMessage = "Name is required")] 7         public string Name { get; set; } 8  9         [Required(ErrorMessage = "Email is required")]10         [RegularExpression(@"^\s*([A-Za-z0-9_-]+(\.\w+)*@([\w-]+\.)+\w{2,3})\s*$", ErrorMessage = "Email is invalid")]11         public string Email { get; set; }12     }13 }

Controllers/DataValidationController. cs

 1 using System.Web.Mvc; 2 using SlarkInc.Models; 3 using System.Text.RegularExpressions; 4  5 namespace SlarkInc.Controllers 6 { 7     public class DataValidationController : Controller 8     { 9         public ActionResult DataAnnotationAction()10         {11             return View();12         }13 14         [HttpPost]15         public ActionResult DataAnnotationAction(DataAnnotationModel model)16         {17             if (ModelState.IsValid)18             {19                 ViewBag.Name = model.Name;20                 ViewBag.Email = model.Email;21             }22             return View(model);23         }24     }25 }

View code continues to be used, but you need to add the js files required for client verification.

Views/DataValidation/DataAnnotationAction. cshtml

 1 @model SlarkInc.Models.DataAnnotationModel 2 @{ 3     ViewBag.Title = "DataAnnotationAction"; 4 } 5 
Lines 36-39 are used to add the js files required for client verification.
This code will call the BundleConfig. cs file in the App_Start folder. The file content is as follows:
 1 namespace SlarkInc 2 { 3     public class BundleConfig 4     { 5         public static void RegisterBundles(BundleCollection bundles) 6         { 7             bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 8                         "~/Scripts/jquery-{version}.js")); 9 10             bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(11                         "~/Scripts/jquery.validate*"));12 13             bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(14                         "~/Scripts/modernizr-*"));15 16             bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(17                       "~/Scripts/bootstrap.js",18                       "~/Scripts/respond.js"));19 20             bundles.Add(new StyleBundle("~/Content/css").Include(21                       "~/Content/bootstrap.css",22                       "~/Content/site.css"));23         }24     }25 }
Lines 10th and 11 of code will be called. The code will introduce all "~ /Scripts/jquery. validate * "condition js file.
That is, the files in the red box below:

Press F5 and enter the following error message. The following verification prompt is displayed:

When you click the submit button, the page is not refreshed, which proves to be client-side verification.
Right-click the page and choose view source code. You can see Scripts. Render ("~ /Bundles/jqueryval) function adds the following two js files to the page.
1 <script src="/Scripts/jquery.validate.js"></script>2 <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
Why didn't I see five of them? I guess this is related to the web. config setting and the debug or release compiling mode.
The code of the two input boxes generated on the page is as follows:
Name:
1 <div class="editor-field">2             <input class="text-box single-line" data-val="true" data-val-required="Name is required" id="Name" name="Name" type="text" value="" /　　　　　　　　>3             <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>4         </div>
Email:
1 <div class="editor-field">2             <input class="text-box single-line" data-val="true" data-val-regex="Email is invalid" data-val-regex-pattern="^\s*([A-Za-z0-9_-]+(\.\　　　　　　　　w+)*@([\w-]+\.)+\w{2,3})\s*$" data-val-required="Email is required" id="Email" name="Email" type="text" value="" />3             <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>4         </div>
We can see that all the information required for verification is in the html code, and the verification function logic is in the js file of the introduced validate. The two parts are completely separated, but they work well together.
At this point, our client verification is complete.
It will be updated continuously later, so stay tuned.
 
Previous section: MVC5 + EF6 + Bootstrap3 (15) apply ModelState and Data Annotation for server-side Data verification
Author:Slark. NET
Source: http://www.cnblogs.com/slark/
The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable. If you have any questions or suggestions, please give me some further information. Thank you very much.