Exercise 4: Using Unobtrusive jQuery at Client Side

Article
12/22/2011

Exercise 4: Using Unobtrusive jQuery at Client Side

In this exercise, you will learn how to enable MVC 3 Unobtrusive jQuery validation at client side. For that reason you will include jQuery libraries into the Master Page and enable unobtrusive jQuery globally.

Note:

The Unobtrusive jQuery uses data-ajax prefix JavaScript to invoke action methods on the server rather than intrusively emitting inline client scripts.

Task 1 – Running the Application before Enabling Unobtrusive jQuery

In this task, you will run the application before including jQuery in order to compare both validation models.
Open the begin solution MvcMusicStore.sln at Source\Ex04-Unobtrusive JavaScript Validation\Begin and press F5 to run the application.
The project starts in the Home page. Browse /StoreManager/Create and click Save without filling the form to verify that you get validation messages:

Figure 4
Client validation disabled
In the browser, open the Create view source code:
HTML – Create.html
```
…
```
FakePre-2bd715a219d04c2888ed55f9e4486a97-9fcea4ec9f77466cb2ccdc9c99b5a1bd<div class="validation-summary-errors"><ul><li style="display:none"></li> <span class="field-validation-error">An Album Title is required</span>FakePre-de109c1e9080484a82024a8cd6a85ad1-aeee1a8294024fba8a47dd2da3df3be7FakePre-641327b18ce04f4f81275e0d68048671-9c46655c2b524cb0af59aa1df2e3c37aFakePre-6061dea5748f4bdfb4873ed3fd833013-69e89f1808f844b6a86d3d45056b2a07FakePre-ead02a843bd544908473a3f78bce39b5-240ef9a34f5b494fa9bfdd24f1079742FakePre-74b326d1672a4478b3e28e99ce64e299-0aa9837d55924ab2812ea0c536328365FakePre-1fecead6c3d74d13bfd4637dc6ef3ddf-49bed6edb52e4528b093a9e0846f5d9a<div class="validation-summary-errors"><ul><li style="display:none"></li> <span class="field-validation-error">An Album Title is required</span>FakePre-b6b036a83d8d4ce19ef5942a5f0bfad3-ae88bca1a3bc4cbabde39e6fcbddc7aaFakePre-4a52f5276b7b49a18be8573263fb0349-3d86cfc660d54a35b99494589943540bFakePre-92366bd1c73140a1b98932caff2373eb-cbe4209611a64b2389e1455d9d601bf1FakePre-06f133924e05422699af6d1f2674daf9-c6d6d26a3ee249b0860e60dff5e9998eFakePre-7fa1f1e5b59a4d1e93f6b8cdf2eb69ad-8ad1b96b3b714bb797485643dae4d750FakePre-9f94b2da93034c4cbc00f758b56a1843-623e1f557e48465f922672c9a090f824

Task 2 – Enabling Client Validation from Web.config

In this task, you will enable unobtrusive jQuery client validation from Web.config file, which is by default set to false in all new ASP.NET MVC 3 projects.

Open Web.Config file at project root, and make sure that the ClientValidationEnabled key value is set to true.
XML - Web.Config
```
…
```
FakePre-df930caea0ed431ba3574cc76c9f89c0-97388e2a3e4e477b8d45b61ebb3a05beFakePre-38d527147fed423eb27181a02d91d227-46acac7206794b63b42841b3d516abcaFakePre-00dad250e3f3450b8cd344ef33c40d3c-22d5901fdde34a78adba03eadaa3c532FakePre-8fab40c71d5e49cb903957bc2c121ccc-a8c35a9c168d41a7b7ac7f57f70b307cFakePre-97d3eba427734a2f8104cfb0e8a2822d-62aed8f09f9442a2aed06bdbe311aa5bFakePre-77d5fd3ee2a14f1db5e95b862c68157d-62fe70f705b04c6d96359b9bafe2dddd
Note:

You can also enable client validation by code at Global.asax.[cs|vb] to get the same results:
HtmlHelper.ClientValidationEnabled = true;
Additionally, you can assign ClientValidationEnabled attribute into any controller to have a custom behavior.

Task 3 – Adding Unobtrusive jQuery to Master Page

In this task, you will add the unobtrusive jQuery references into the Master Page.

Open Site.Master at Views\Shared.
Add MVC 3 script references to jQuery:
XML
```
…
```
FakePre-e259e6bbe208448d9709f17d0766dff5-2466a04093434fc2be508384998770a9FakePre-e48e1a54b05d4ceea9678a09c37385f4-84465c2e7af14ccdbdf636f130789630FakePre-78b08a034f96415085812e732788eaa9-00dce526bb724cbaa45b5477221be115 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>FakePre-09332db6cf2c42f3a30d28de1046f293-3855e421cfe049b3810ca1a57ec09dc1
Note:

All these jQuery libraries are included in all MVC 3 new projects. You can find more libraries in the project’s folder /Scripts.

Task 4 – Running the Application Using Unobtrusive jQuery Validation

In this task, you will test that the StoreManager create view template performs client side validation using jQuery libraries when the user creates a new album.

Press F5 to run the application.
The project starts in the Home page. Browse /StoreManager/Create and click Save without filling the form to verify that you get validation messages:

Figure 5
Client validation with jQuery enabled
In the browser, open the source code for Create view:
HTML
```
…
```
FakePre-f70e2486344d4bb68b2e53455a47a3c5-867b2dcbff88459da74f7f167bc49dc9 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script> <input data-val="true" data-val-length="The field Title must be a string with a maximum length of 160." data-val-length-max="160" data-val-required="An Album Title is required" id="Album_Title" name="Album.Title" type="text" value="" /> <input data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Album_Price" name="Album.Price" type="text" value="0" />FakePre-a1a24ac6b4504739b6ecc07fa98a770c-de2ddb1e5c9a4df493a3434fe510fddcFakePre-c6db0ecbba344a188ad17cd9c7a1ea9d-390e45d1c87b4de4bddae04b2b0c4e10FakePre-a632d8d8d0134ddfaff9229efbf731da-81cba6d879de4d12b4c136cb872ece49FakePre-17130ff4c41a4658b787bed0a3c1eeef-e5f9c5a076914b9199bf45c08de9e436 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script> <input data-val="true" data-val-length="The field Title must be a string with a maximum length of 160." data-val-length-max="160" data-val-required="An Album Title is required" id="Album_Title" name="Album.Title" type="text" value="" /> <input data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Album_Price" name="Album.Price" type="text" value="0" />FakePre-a7d61c47ae29483883a5a711ed7ee9b9-28f9738f88b64a91ac9a0fbaee297456FakePre-90fca1627e9640a4ad63298ce050365b-2a83c16d8666436ca4e46a1c6094bbd4FakePre-e4c2bcf006f64bdeb2c57a3187efd79d-51f1fd78d2f0469cb6138fe7cd9003b6FakePre-32a7b48472814030a422ef8788da17dc-b6709d57140c4f8588c303f6b872bd97 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script> <input data-val="true" data-val-length="The field Title must be a string with a maximum length of 160." data-val-length-max="160" data-val-required="An Album Title is required" id="Album_Title" name="Album.Title" type="text" value="" /> <input data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Album_Price" name="Album.Price" type="text" value="0" />FakePre-c352d2c4a5b74d5e8c378f96b2096726-c1e661c5e3fa4ed8b73efbceee852b83FakePre-657ca66fa75b49d6bd170f2c7b53c619-b3703f8e060d445bafa0fc45560ac298FakePre-6a3f305f6bc5459b82de679efeb4f0e0-47dc428db1344d3a99ab9645bc6dcd6bFakePre-21f9be4f5d0b4d0eb20fcb185cf14406-220fe6403a4b4b73afc0b41c0581df01FakePre-c660e2d5b61e41f9862ba5578206d7b9-fd30a37d65f44893978aa81661934137FakePre-93fb2ce1071e4eaba595846ca4ec859f-d36b9a9380b24ac2b07361fdccc9be0eFakePre-abf899932a6e40678642e82ee08377a6-f44eb61271224c6dabb925b9b7320e41
Note:

For each client validation rule, Unobtrusive jQuery adds an attribute with data-val-rulename="message". Below is a list of tags that Unobtrusive jQuery inserts into the html input field to perform client validation:
Data-val
Data-val-number
Data-val-range
Data-val-range-min / Data-val-range-max
Data-val-required
Data-val-length
Data-val-length-max / Data-val-length-min

All the data values are filled with model Data Annotation. Then, all the logic that works at server side can be run at client side.

For example, Price attribute has the following data annotation in the model:
-C#-
[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }
-Visual Basic-
<Required(ErrorMessage = "Price is required")>
<Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")>
public Price As object

After using Unobtrusive jQuery, the generated code is:
<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />