Sai Stuff to Developers

December 4, 2012

Unobtrusive Validation in Framework 4.5 Data Validations

Filed under: DotNet — tosaik @ 7:41 am
Tags: , , , , ,

Today I was working on ASP.NET web application on framework 4.5; I came across a strange error which I never experienced in my past working on earlier environments of dot net framework and that is error titled

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for ‘jquery’. Please add a ScriptResourceMapping named jquery(case-sensitive).

When I dig in to this issue and found the root cause of this issue and here my case study about this issue…

Unobtrusive Validation is a new concept in Framework 4.5, and this is by default enables when we create a new ASP.NET web application by adding one of the key in a Web.Config->appsettings section as below

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

What exactly this validation does for us

Forms with complex data including validators tend to generate too much JavaScript code in the page, which can represent about 60% of the code. With unobtrusive validation enabled, your HTML code will look cleaner and tidier.

For example we will compare the HTML code generated by both configurations.

Case-1:

Steps to create the sample application without unobtrusive validation enabled (default for all earlier versions)

1)      Open Visual studio 2012 IDE and create a new Web Application as shown below

UV1

 

 

 

 

 

 

 

 

2)      Now Press F5 to start the web application.

3)      Right-click on the browser page, and select View Source option to open the HTML code generated by the application.

4)      Scroll through the page source code and notice that ASP.NET has injected JavaScript code in the page to perform the validations and show the error list.

UV2

5)      Select the Script tab and expand the “{your current page}.aspx” combo to see all the referenced scripts. Notice that there are no references to the jQuery library. The validations are performed using the Microsoft Ajax Libraries together with JavaScript code injected within the page.

Case-2:

Steps to create the sample application with unobtrusive validation enabled (default for all new version(s))

1)      Now you will enable unobtrusive validation. Open Web.Config and locate ValidationSettings:UnobtrusiveValidationMode key in the AppSettings section. Set the key value to WebForms.

<appSettings>
    <add key="aspnet:uselegacysynchronizationcontext" value="false" />
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>
</appSettings>

2) Open the Global.asax.cs file and add the following using statement

using System.Web.SessionState;
using WebFormsLab.Model;
using System.Web.ModelBinding;

3)      Within the Application_Start method of the Global.asax.cs file, add the following code

ScriptResourceDefinition myScriptResDef = new ScriptResourceDefinition();
myScriptResDef.Path = "~/Assets/Scripts/jquery-1.7.1.min.js";
myScriptResDef.DebugPath = "~/Assets/Scripts/jquery-1.7.1.js";
myScriptResDef.CdnPath = "http://code.jquery.com/jquery-1.7.1.min.js";
myScriptResDef.CdnDebugPath = "http://code.jquery.com/jquery-1.7.1.js";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", null, myScriptResDef);

4)      Open Site.Master. Add the code below to include a ScriptManager on the page to include a script reference to the jQuery client library.

<form runat="server">
<asp:ScriptManager ID="uxScriptManagerMasterPage" runat="server" EnableCdn="False">
<Scripts>
    <asp:ScriptReference Name="jquery" />
</Scripts>
</asp:ScriptManager>


5)      Now Press F5 to start the web application.

6)      Right-click on the browser page, and select View Source option to open the HTML code generated by the application. Notice that by enabling the unobtrusive validation ASP.NET has replaced the injected JavaScript code with data- *attributes.

UV3

Don’t want this feature enabled?

Simply add the following setting in your AppSettings section in your web.config if it doesn’t exist. If already exist make value as “none” as shown below

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

Conclusion:

With Unobtrusive validation we reduce the unnecessary JavaScript code generation for all validation controls by asp.net runtime. As if we enable this validation the asp.net runtime by default get and use the jquery environment to perform these validations through this we can have least overhead of unwanted JavaScript code in our HTML page and it also effect the improvement in the performance and take less time in rendering and loading your pages.

I Hope you got advantage of this article…

Please drop a comment if you like it…

Thanks Happy Coding  🙂

Create a free website or blog at WordPress.com.

%d bloggers like this: