Introduction

HTML 5 will bring major improvements to the user's experience on the web. While not due to be official for quite some time, browsers are beginning to support HTML 5 in all of its glory. The ASP.NET MVC 3 framework introduces changes to the internal features that store client-side specific attributes through a new convention. The HTML 5 specification defines a net set of "data-" attributes that is considered to be private data storage. This means that these attributes can be storage for any type of additional data tacked on to an HTML tag.

HTML 5 Data Attributes

The following sample page illustrates the use of using the new data attributes in HTML. The following example has a span element with two data fields attached: name and city. These pieces of data are directly attached to the span and provide additional storage, similar in concept to the JQuery data method. Using a dataset property on the element provides an extract mechanism of the data out from the tag and to the caller. Let's take a look at this in Figure 1.

Listing 1: Using the data attributes

This has often been a common problem for developers – how do developers tie pieces of data to HTML elements? For instance, imagine a grid control in web forms or MVC; oftentimes, additional data with each row needs to be appended to it for relational storage. This could be one easy way to accomplish the task.

JavaScript can easily read his data through a new dataset property, which reads like an array using the name of the property as an indexer of sorts. This code-sample works in any browser supporting HTML 5. Note that this approach still works in browsers that don't support HTML 5, but through the use of the getAttribute Javascript method.

This is one key piece of the unobtrusive JavaScript implementation in the MVC 3 framework; changes have also been made to the server-side helper components, as we'll see soon. To incorporate these features into an application, include the two new scripts related to the unobtrusive feature set: one for AJAX, and one for validation.

MVC 3 AJAX

The MVC 3 framework changed the AJAX form helpers to render using these new sets of attributes, which appends additional metadata onto the form element it renders. This unobtrusive approach implies that the attributes defined can be utilized by both the client-side and server-side framework components appropriately.

Listing 2: Setting Up a Form

This form updates an external element with the results provided from the Availability action. The MVC framework translates these settings into the following set of data attributes:

This is a much cleaner output than what was produced in MVC 2, and will be supported by the next generation of browsers. As another example of a form, suppose we had the setup in Listing 3.

Callbacks also use the new data attribute, rather than defining any inline JavaScript, which produces a cleaner output, like so:

You can see essentially how the framework translates every server-side attribute to a client-side one, in order to provide the same capabilities in both areas.

MVC 3 Validation

In addition to AJAX, the MVC 3 framework added the ability to render unobtrusively the validation components, using data attributes to store the validation messages, the validation inputs (for instance, for a range validator, the min and max values), and other settings. Let's begin to look at this examining a sample MVC 3 form that uses validation.

Listing 3: Sample Form With Validators

These validators also use client-side data attributes to house validation-specific information attached to a given element. Since the field represents a property within the model (for instance, FirstName textbox maps to the FirstName property for the model), the textbox stores some additional attributes as shown in the next listing.

Listing 4: Sample Validation Attributes

Notice the mix of validation attributes spread between the span that represents the error message, and the actual form control that inputs the data from the user. All of the attributes related to the validation are embedded within the markup; notice how the Age attribute handles three types of validations, all by using different attributes to represent each validation type.

As you can see, the model does not contain any specific attributes to denote this; all that is enabled is the unobtrusive JavaScript feature set by a call to Html.EnableUnobtrusiveJavaScript, or by adding the UnobtrusiveJavaScriptEnabled setting to the <appSettings> collection in the configuration file. Additionally, the client-side validation features must also be enabled in the same manner, through the ClientValidationEnabled setting.

Results

Each of these unobtrusive approaches uses the framework components to perform all the work; you do not need to know anything about these attributes to work with AJAX forms or validation components. Everything is seamless to the developer and the user.

Conclusion

HTML 5 brings a lot of nice features, and the MVC 3 framework begins to incorporate them by using the new data attribute feature, a new feature in the HTML 5 specification. This feature stores the AJAX and validation-specific attributes that the MVC framework uses to perform these operations. These operations are still seamless to the user, and the developer does not need to change any code from when upgrading to MVC 3.

References

Jon Resig's Blog Post on Data Attributes: http://ejohn.org/blog/html-5-data-attributes/

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
jQuery's data() Method	Elijah Manor	7/6/2011 11:56 AM
Nice article. Just wanted to mention that jQuery's data method also supports handling the HTML5 attributes The API is very similar to what you've shown with the native dataset. For example you could do something like $( "#item" ).data( "name" ) to access the data-name HTML5 data attribute. I rewrote the 1st code example you have, but used the jQuery data() method instead. The benefit of using jQuery is that they handle cross browsers issues for you if you are using a non-HTML5 compliant browser.  http://jsbin.com/akuloz/edit Reply | Permanent link
Reference to Model	Felix Rabinovich	7/7/2011 2:12 PM
Nice article. If I may suggest some clarifications... Under Listing 4 you write As you can see, the model does not contain any specific attributes to denote this. First, I am not sure how how the reader can see whether the model does or does not contain any attributes (since you don't have the model). But more important, this statement puts the benefit of unobtrusive validation upside down. If the model doesn't have validation attributes, the reader would have to assume that Listing 4 should be written by hand. Whereas the whole point is that thanks to validation attributes in the model and unobtrusive Javascript Listing 4 gets generated and client-side validation happens "automagically" Reply | Permanent link
RE: Reference to Model	Brian Mains	7/7/2011 9:45 PM
This is a rough statement, what I believe I meant was is that there aren't any specific attribute specified in the model to denote to use unobtrusive JavaScript, not specific to the validation attributes. Thanks for the clarifications; you have some good points, I should have included the model. Brian Reply | Permanent link

---

Please login to rate or to leave a comment.