Using ModelMetaData in ASP.Net MVC 2 to wire up sweet jQuery awesomeness

I recently came up with an approach to wiring up some jquery plugins that modify the behavior of standard input text boxes.  The approach is not original by any means.I got the idea from the built in client side validation for MVC2, which was inspired by Steve Sanderson’s xVal framework.

The goal.  I wanted a way to add both Watermark and Masked Input functionality to text boxes on my MVC views.  I wanted to do this in an unobtrusive jQuery-ish way.  I also did not want to reinvent the Editor templates or TextBox html helpers in the MVC framework. So I settled on this approach.

I added a html extension method that takes the ModelMetaData for the current views Model class and write a JSON variable to the view.  Its just a small data object at this point, with a well known name.  I then wired in a generalized javascript file that would read the JSON data and then wire up the appropriate jQuery plugins. Sounds simple enough right?  Well it really was.

Lets look at some code.

The ViewModel marked up with some custom attributes to give a declarative way of defining the values used to bind to the plugins. I have added a Watermark and EditFormat attributes that are picked up by a modified ModelMetaDataProvider. This is what I use to specify the MaskedInput format (EditFormat) and the Watermark for the jQuery plugins.

A simple extension method to drop some JSON onto your page. This is nice and simple and could be moved into the object Editor Template if you wanted to just get this functionality by default.

The MetaDataForModel extension method is a bit of a mess (this is prototype code) The end result is that it. Finds all of the metadata properties that contain EditFormat data or Watermark data and serializes that to JSON. It is than put into a javascript variable so that the data can be picked up by client side javascript.

The resulting Html markup, shows the javascript and the JSON formatted data.

The common javascript to autowire all plugins to the input controls.  This function uses jQuery to run on page load.  It first looks to make sure that the JSON variable is defined and if it is, it loops through the JSON data and properties.  If a particular MetaData value is present (not null) than the plugins are wired up(see lines 8 and 11).  This javascript was written so that it can be loaded onto any page and will autowire the plugins if this metadata is present, if it is not it will just do nothing. 

The resulting page showing a Watermark plugin auto wired up.

The resulting page showing the Masked Input auto wired up for the Bar property. One the cursor is placed into the Bar text box the plugin hides the Watermark and applies the MaskedInput plugin.

What do you think of the approach?  I did not supply a sample code as I have this working for a project at work and I did not want to let getting a sample together get in the way of getting this blog post up.  If there is interest I can put together a sample, or better yet, maybe we can fit this into mvccontrib in some way..