More on ASP.NET MVC XForms

I did some review of the code for the ASP.NET MVC XForms that is available on Codeplex.  I’ve blogged about this project before and finally got the chance to try it out in more detail.

It’s really put together quite well!  My basic usage to start is a better way to create form in asp.net mvc using fluent ‘chaining’.

Here is a simple example:

image

One piece ‘missing’ for me was how to take an existing jQuery plugins (in this case, MaskInput by Digital Bush) and use them in the XForms framework.  In the above example, I need to extend the form.Input with my own ‘Mask’ functionality.

To understand how to apply this mask, it works like this:

$(function(){
      $(“#DOB”).mask(“99/99/9999”);
});  //this is fired when dom is done loading, prior to page being displayed

Jon Curtis, the maker of XForms got me going in the right direction:

I like the idea of a Mask extension, perhaps you would like to contribute and add it to the framework?
The MVC XForms core functionality is in the Mvc.XForms namespace. This has to match the w3c XForms spec. I created the Mvc.XForms.UI namespace for extensions to the framework that might be commonly used; currently there is only the grid control. This would be the place for the mask.
The best way to implement this would probably be to wrap a rebuild action (which fires when the xform is rebuilt). Something like (untested):
public static InputSettings Mask(this InputSettings settings, string mask) {
    var script = string.Format("function (ev) { $(ev.target).mask(‘{0}’); }", mask);
    settings.Action(XForms.Rebuild, script);
    return settings;
}
I’m open to suggestions how to make the framework and javascript API more extensible. This is one of the goals of the project and I think there is still a way to go to achieve this. Another key thing is I would like to keep the script as minimal as possible and not implement things that have been done before. Where we can use jQuery, use jQuery. So use the mask plugin.

 

So, I proceeded… (this does require a js reference to the plugin).  Within the XForm.UI assembly I created the following:

image

The XFormsEvent.Rebuild injected the script into the jQuery ‘ready’ function – which was perfect for what I needed.

The end result:

image

As you see, I was able to apply the mask to the DOB field.   (Also, you can see the ‘help’ feature)

The framework takes care of wrapping everything up (hence the slightly different format for calling mask from above).

Here is more on XForms and Extending the Framework by Jon Curtis

Next step for me… creating a formatter to make sure my incoming datetime is 99/99/9999  🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s