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.

image 

 

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.

image

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.

 

image

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

image

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. 

image

 

The resulting page showing a Watermark plugin auto wired up.

image

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.

image

 

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..

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in Asp.Net MVC, jQuery, mvc. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://blog.coreycoreycoogan.com corey coogan

    Looks pretty slick to me. I admire the way you guys are always pushing the envelope, looking for ways to leverage the framework to make life easier.

    Have you had any troubles with the masked input plugin? I had to scrap it on a client site because when a form was being edited, the field would go blank when you tabbed through it. I read others reporting this as a bug as well.

  • Sam

    You dont seem to have mentioned what plugins are implementing the watermark or mask functionality.

  • IanG

    I wouldn’t want to put this metadata straight onto my model, because it’s mixing presentation and business tier concerns, not separating them. However, if you use a ViewModel to fully separate your presentation tier then this looks like a great approach.

  • http://blogs.msdn.com/b/rickandy/archive/2009/10/15/mvc-faq.aspx Rick (From Microsoft)

    I’ve added this to the MVC FAQ (http://blogs.msdn.com/b/rickandy/archive/2009/10/15/mvc-faq.aspx ) A complete sample would be great!

  • http://blogs.msdn.com/b/rickandy/archive/2009/10/15/mvc-faq.aspx Rick (From Microsoft)