ASP. NET MVC Light Tutorial Step by Step 12--client validation

Source: Internet
Author: User

Both of the data validation methods used in the previous two sections are performed on the server side, that is, the form is submitted and the data is passed back to the server for verification. This will bring two problems, one is the user experience is not good, the user submitted the form before they know that there is a problem, the second is to bring additional pressure on the server. We can use client-side validation to address both of these issues.

Client-side validation typically uses JavaScript scripts, and Jquery.validate is a good JQuery validation component that many projects will use to implement client-side validation.

Step 1. Add a script

ASP. NET MVC has good support for jquery, which is actually integrated in the former, and a new MVC project template has built-in jquery, Jquery.validate. But Messsageboard is a project created by an empty template, so we need to add these script files manually in the project. Add the Scripts folder to your project and place the downloaded JQuery, Jquery.validate, and JQuery.validate.unobtrusive.

These scripts are added to the write view in turn, paying attention to the order of precedence.

<HTML><Head>    <Metaname= "Viewport"content= "Width=device-width" />    <Scriptsrc= "~/scripts/jquery-2.1.4.min.js"></Script>    <Scriptsrc= "~/scripts/jquery.validate.min.js"></Script>    <Scriptsrc= "~/scripts/jquery.validate.unobtrusive.min.js"></Script>    <title>Write</title></Head><Body>    <H1>MVC Message Board</H1>@using (Html.BeginForm ("Write", "Home") {@Html. Labelfor (M=>m.nickname, "nickname") @Html. Textboxfo R (m = m.nickname) @Html. Validationmessagefor (m=>m.nickname)<BR/><BR/>@Html. Labelfor (M + m.content, Contents) @Html. textareafor (M = m.content,5,50,null) @Html. Vali Dationmessagefor (m=>m.content)<BR/><BR/>        <inputtype= "Submit"value= "Submit" />    }</Body></HTML>
Step 2. Turn on client authentication

By default, the ASP. NET MVC project has already turned on client-side validation. Opening the Web. config file, you can see that both the clientvalidationenabled and unobtrusivejavascriptenabled key values are true, indicating that client authentication is supported. As shown in.

You can also enable or disable client-side validation for a single view, such as in the Write view, we can set htmlhelper.clientvalidationenabled = True to enable client-side validation.

@model messageboard.models.message@{    Layout = null;    htmlhelper.clientvalidationenabled = true;} <! DOCTYPE HTML > ...

Give it a try and you'll see the effect of client-side validation. However, client-side validation has its limitations, and if the user's browser does not support or turn off JavaScript usage, client-side validation is completely invalidated. Therefore, to use the client and server side together, you cannot rely solely on client authentication.

ASP. NET MVC Light Tutorial Step by Step 12--client validation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.