Unobtrusive Validation with ASP.NET 4.5

ASP.NET 4.5 has been improved and latest version ASP.NET. It includes an array of new and modified features. Today we’ll discuss one new feature Unobtrusive Validation that is introduced with ASP.NET 4.5 .

So what is Unobtrusive Validation?

In a normal validation scenario,when we use a validator to validate any any control and use Client side validation, some JavaScript is generated and rendered as HTML. Also some supportive JavaScript files is also get loaded by the browser for the validation.

Now with feature Unobtrusive Validation, inline JavaScript is not generated and rendered to handle the Client Side validation. Instead of this it uses HTML5 data-* attributes for all these validation.

S0 now lets see a normal scenario. I have taken textbox and applied two ASP.NET validators on it. One is RequiredFieldValidator and RangeValidator that allows to enter the value between 100 and 1000. Let’s see the aspx code

Now Lets run the application and see the generated the HTML. Now if you look at the View Source of the page

To handle these validation, it generates the lots of JavaScript code on the page. It is Now I have made the same application with Visual Studio 2011 Developer Preview. By default Unobtrusive Validation is enabled here. So lets see the generated HTML

Now if you see the above generated HTML, there are few data-* attributes are rendered. And these hold all the required information of the validator. And there is no inline JavaScript code generated. This reduces the significant amount of page size because here inline JavaScript code is not generated and this also makes the rendered HTML neat and clean.

So let’s see how asp.net 4.5 allows to configure the Unobtrusive Validation. There is one new property UnobtrusiveValidationMode got added, which can be assigned two values

  • None : means UnobtrusiveValidation is set to off
  • WebForms : means UnobtrusiveValidation is enabled

This property can be configured at three places in application. These are

  • First it can be set at application level in config file. We need to add it in the <appSettings> element.
    <code><add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/></code>
       

    As I discussed it is by default enabled in asp.net. The above key by default added in web.config. So if you want to disable it then change the above as

               <add name="ValidationSettings:UnobtrusiveValidationMode" value="None" />
     
  • We can also set it at Application_Start method in Global.asaxfile as
    void Application_Start(object sender, EventArgs e)
    {
       //Enabling UnobtrusiveValidation application wide
        ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
    }
    
  • We can also set it at page level by setting the property of Page Class as
    Page.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;
    

I hope this post will going to help a lot to learn ASP.NET 4.5.

Cheers,
Brij

About these ads

8 thoughts on “Unobtrusive Validation with ASP.NET 4.5

  1. Hello
    This is concerned with a different topic. pl excuse.
    can you pl show how to sent data from httphandler to jquery in client using json and then use jquery templates to display it in tabular column? -basically a crud operation.
    thx
    bcs

  2. Pingback: Explore and Learn ASP.NET 4.5 « Brij's arena of .NET

    • (HTML didn’t show up on first post)

      Should be <add key=”ValidationSettings:UnobtrusiveValidationMode” value=”WebForms” /> and not <add name=”ValidationSettings:UnobtrusiveValidationMode” value=”WebForms” /> correct?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s