Using Unobstructive Validation in ASP.NET 4.5 Web Forms

Introduction

ASP.NET Web Forms have provided validation controls as far back as version 1.1. In the earlier releases of ASP.NET these validation controls depended upon JavaScript, emitted by the ASP.NET web form framework. The unobstructive validation, however, makes use of the data-* attributes of HTML5 for validation purposes. This article shows you how the new unobstructive validation features work for Web Forms.

What is Unobstructive Validation?

Prior to ASP.NET 4.5 validation controls used to automatically emit JavaScript code for performing client side validations. Consider the following figure that shows the JavaScript code generated for a sample web form.

JavaScript code generated for a sample web form

As you can see there is lot of JavaScript code being emitted under this scheme. If you use unobstructive validation, Web Forms page framework emits data-* attributes of HTML5 that contain the validation information. The following figure shows how these data-* attributes look:

Data-* attributes

As you can see a <span> element holds data-* attributes that contain the validation message and other information. There is no JavaScript generated. This approach reduces page size to a great extent. Additionally, unobstructive validation relies on the jQuery library rather than some proprietary script. ASP.NET MVC already uses unobstructive validation and now Web Forms also support them. 

Enabling Unobstructive Validation in ASP.NET Web Forms

If you create a new Web Forms project, the unobstructive validation is enabled by default. If you open the web.config of a newly created Web Forms project you will find the following markup in the <appSettings> section:

<appSettings>

  <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />

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

</appSettings>

The ValidationSettings:UnobtrusiveValidationMode key determines the UnobstructiveValidationMode for the entire application. The possible values are None and WebForms. The value of None indicates that unobstructive validation is disabled whereas a value of WebForms means it is enabled.

You can also set the unobstructive validation mode in the Global.asax file or in the individual Web Form. To set the unobstructive validation mode in the Global.asax file you set the UnobstructiveValidationMode property of ValidationSettings object in the Application_Start event.

protected void Application_Start(object sender, EventArgs e)

{

   ...

   ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;

}

If you wish to set the unobstructive validation model at an individual Web Form level you set the UnobstructionValidationMode property of the Page object in the Page_Load event handler.

protected void Page_Load(object sender, EventArgs e)

{

   ...

   Page.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;

   ...

}

Adding Script Resource Mapping for jQuery Library

Enabling the unobstructive validation is one part of the story, you also need to register jQuery library with ScriptManager class. This step is required because unobstructive validation relies on jQuery library to function. To register the jQuery library with ScriptManager you need to add the following code in the Application_Start event handler:

protected void Application_Start(object sender, EventArgs e)

{

    ScriptResourceDefinition jQuery = new ScriptResourceDefinition();

    jQuery.Path = "~/scripts/jquery-1.7.2.min.js";

    jQuery.DebugPath = "~/scripts/jquery-1.7.2.js";

    jQuery.CdnPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js";

    jQuery.CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.js";

    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", jQuery); 

    ...

}

The above code creates an instance of ScriptResourceDefinition class. The ScriptResourceDefinition essentially provides path information for a script. Notice that the above code sets four paths, viz. Path, DebugPath, CdnPath and CdnDebugPath. The purpose of these properties is as follows:

• Path :  Specifies the release mode path of a script file.
• DebugPath : Specifies the path of a script file to be used when debug mode is enabled.
• CdnPath : Specifies the release mode path of a script file from a Content Delivery Network (CDN).
• CdnDebugPath : Specifies the path of a script file from a Content Delivery Network (CDN) when debug mode is enabled.

In the above example, the jQuery file resides in the Scripts folder and Microsoft AJAX CDN is used as a CDN. Make sure to change the paths as per your setup.

Once the ScriptResourceDefinition instance is ready, you add this definition to the ScriptResourceMapping using the AddDefinition() method. The first parameter of the AddDefinition() method is the name of the script resource and it must be jquery for jQuery library. The second parameter is a ScriptResourceDefinition object.

Testing Unobstructive Validation

Ok. That's all you need to do for enabling unobstructive validation. To test the unobstructive validation you can create a sample web form that uses validation controls. The following figure shows a simple data entry form for the Customers table of Northwind database. The web form consists of a FormView control. The InsertItemTemplate of the FormView is shown below:

InsertItemTemplate

The form uses RequiredFieldValidator controls for all the fields, viz. CustomerID, CompanyName, ContactName and Country. The error messages are displayed in a ValidationSummary control. The web form also enforces server side validations using data annotations. These server side validation errors are displayed after a post back in the validation summary control. Complete source code of this test application is available for download along with this article.

Summary

Unobstructive validation make use of jQuery library and data-* attributes of HTML5 to validate data entered in the Web Form controls. Unobstructive validations can be enabled in the web.config file, Global.asax or individual web form code-behind. Using unobstructive validations reduces the response size because no JavaScript is emitted by the page framework. The usage of validation controls remains the same irrespective of whether you use unobstructive validations or not.