Unobtrusive Validation with ASP.NET 4.5

ASP.NET 4.5 has been improved and is the latest version of 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 control and use Client side validation, some JavaScript is generated and rendered as HTML. Also some supportive JavaScript files 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 validations.

So now, let's 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 let's run the application and see the generated the HTML. Now, if you look at the View Source of the page:

To handle this validation, it generates 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 let's see the generated HTML:

Now if you see the above generated HTML, there are few data-* attributes that 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 that 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 the application. These are:

• First, it can be set at application level in config file. We need to add it in the <appSettings> element.
  XML

  <add name="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />

  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:

  XML

  <add name="ValidationSettings:UnobtrusiveValidationMode" value="None" />

• We can also set it at Application_Start method in Global.asax file as:
  C#

  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:
  C#

  Page.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;

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

Cheers,
Brij