We have couple of enhancements in terms of JavaScript and Ajax in ASP.NET MVC3.
- By default, Ajax & Validation helpers in ASP.NET MVC 3 use an unobtrusive JavaScript approach
- Validation helpers uses jQuery validation plugin for client side validations
- By default, Client Side validation is enabled
What is Unobtrusive JavaScript?
Unobtrusive JavaScript avoids injecting inline JavaScript into HTML. This makes your HTML smaller and less cluttered, and makes it easier to swap out or customize JavaScript libraries.
Unobtrusive JavaScript According to Wikipedia:
-
Separation of functionality (the “behaviour layer”) from a Web page’s structure/content and presentation
-
Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
-
Progressive enhancement to support user agents that may not support advanced JavaScript functionality
More info about Unobtrusive JavaScript at Wikipedia : http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Ajax helpers uses JavaScript to invoke an action method on the server rather than using a full postback.
These are Ajax helper methods available in ASP.NET MVC:
- Ajax.ActionLink()
- Ajax.BeginForm()
- Ajax.BeginRouteForm()
- Ajax.RouteLink()
Above helper methods in ASP.NET MVC 2 & earlier versions uses Microsoft Ajax Libraries (MicrosoftAjax.js, MicrosoftMvcAjax.js) for generating script & performing operations.
Validation helpers uses JavaScript to to perform validations at client side rather than posting wrong data to server.
These are Validation helper methods available in ASP.NET MVC:
- Html.ValidationSummary()
- Html.ValidationMessage()
Validation helpers in ASP.NET MVC 2 & earlier versions uses Microsoft Validation Library (MicrosoftMvcValidation.js) for generating required validation script for client.
For example if we observe this code snippet in view:
Corresponding generated html mark up :
So Microsoft Ajax Libraries attaches event listener to an element in DOM using inline java script.
In ASP.NET MVC 2 & earlier versions client side validation is disabled by default, we can enable validation in any view using <%Html.EnableClientValidation();%> . For example if we observe this code snippet in view corresponding to validation helpers, this code is from LogOn.aspx provided in default ASP.NET MVC 2 project template.
Below the Html.BeginForm() tag we are using <%: Html.ValidationSummary() %> ( Html.ValidationSummary() – Returns an unordered list of validation messages that are in the ModelStateDictionary object) , for at every element we are using <%: Html.ValidationMessageFor() %> for displaying corresponding validation error message.
If we enable client validation in any view in ASP.NET MVC 2 & earlier versions it will inject required JavaScript into webpage. If we look at mark up for LogOn.aspx :
In ASP.NET MVC 3 Ajax & Validation helpers in ASP.NET MVC 3 use an unobtrusive JavaScript approach using jQuery. jQuery is JavaScript library which already follows unobtrusive approach for writing JavaScript.
Ajax helper methods separate the behaviour from the mark up by emitting HTML5 attributes using the data-ajax prefix. We should make sure that the following JavaScript files are referenced from view to uses ajax helpers in unobtrusive manner:
- jquery-1.5.1.js
- jquery.unobtrusive-ajax.js
Validation helpers in ASP.NET MVC 3 use jQuery Validate plugin, Validation helper methods separate the behaviour from the mark up by emitting HTML5 attributes data-val , data-val-required at input element & data-valmsg-for, data-valmsg-replace at error message span element in html. We should make sure that the following JavaScript files are referenced from view to uses validation helpers in unobtrusive manner:
- jquery-1.5.1.js
- jquery.validate.js
- jquery.validate.unobtrusive.js
As I mentioned in starting of article by default Unobtrusive JavaScript & client side validations are enabled in ASP.NET MVC project, We can enable or disable these options in web.config. We can set ClientValidationEnabled / UnobtrusiveJavaScriptEnabled key values to false to disable them(To ASP.NET MVC 2 kind of approach).
We can override this settings in global.asax also using HtmlHelper class:
- HtmlHelper.ClientValidationEnabled = false;
- HtmlHelper.UnobtrusiveJavaScriptEnabled = false;
To support these new options HtmlHelper class provides following new overloaded methods:
- public void EnableClientValidation(); // available in ASP.NET MVC2
- public void EnableClientValidation(bool enabled)
- public void EnableUnobtrusiveJavaScript()
- public void EnableUnobtrusiveJavaScript(bool enabled)