My First Community Contribution - MVC Tool Kit Framework

 

I like the fact that Microsoft started supporting open source java script frameworks like JQuery, JQuery Validations etc. And now Microsoft is also going to start supporting Knockout JS which is great framework for data bindings with MVVM pattern. Also now web is slowly moving towards HTML 5 leaving away all proprietary frameworks like flash and Silverlight. Considering all these, I always had a wish that reusable features/controls that leverages the power of HTML5, Knockout JS(client JS library based on MVVM pattern) and data annotations would be great value add to developer which abstracts all underlying technologies that I mentioned and gives the super powers. Out of this is what came out is “MVC Tool Kit Framework” Yes, I have started creating some reusable features and wanted to make available to public. 1st release is out and you can get it from http://mvctoolkit.codeplex.com/. Thanks to my organization Neudesic for supporting this activity.

 

So what does this framework have?

At high level these are the features that it provides:

1. Basic Input Control that supports HTML 5, Knockout JS and custom attributes in Data Annotations
2. Validation Framework and some common validation attributes
3. Checkbox list control that doesn’t exists in ASP.NET MVC

So what's so great about this framework?

Use this framework for normal ASP.NET MVC post back or with Knockout JS framework. Additionally get the benefits of  custom data annotation attributes and validation attributes that are present in this framework.

Input Controls

Each of input controls have these parameters:

1. Expression<Func<TModel, TProperty>> expression: This is the model property expression for which you want the control to bind.
2. InputType inputType: This is to specify what type of input control you want. The frame work supports all HTML 5 input types - Text, Color, Date, Datetime, DatetimeLocal, Email, Month, Number, Range, Search,Tel, Time, Url, Week
3. object htmlAttributes: This is for any html attributes that you would wanted to be generated.
4. object dataAttributes: This is for generating html 5 data attributes (data-*)
5. KOBinding<TModel>[] koBindAttributes: This is for generating Knockout data bind attributes. The specialty about this parameter is that you can bind Knockout bindings based on server model itself
6. object koCustomBindAttributes: Use this parameter for Knockout data bind attributes to bind some properties to custom defined JS model properties or methods which will not be in server side model.

All of the above parameters (except the 1st one) are optional parameters.

Specific to HTML 5 attributes, these controls will generate the following additional attributes also:

1. placeholder (based on data annotation meta attribute Html5PlaceholderAttribute)
2. required (based on data annotation RequiredAttribute which is system attribute)
3. patters (based on data annotation RegularExpressionAttribute which is system attribute)

Note: Html5PlaceholderAttribute is custom attribute defined in this framework, if you wish to use this attribute, please register the CustomModelMetadataProvider (defined as part of this framework) in your global.ascx file.

Usage

will generate

Validation Framework

The following attributes are defined which can be used for Model validation.

• Comparer. Use this to have some comparison rule between model properties. Example:

                          This attribute supports following comparison attributes: EqualTo, NotEqualTo, GreaterThan, GreaterThanEqualTo, LessThan, LessThanEqualTo

• RequiredIf: Required validation based on other property. Example:

Also validation framework has utilities that can validate the model at any time (at presentation layer, business layer etc.) to ensure its following all the rules defined to it has validation attributes.

 

The code hosted at http://mvctoolkit.codeplex.com/ also has web sample that has usage of these framework features. So go ahead and start using it.

I wish to see some more ideas to extend this framework and comments on this. Please reach out to me at suresh.balla@neudesic.com for any questions/ suggestions. Contributions are welcome for this framework.

I plan to add more complex controls in future and extend this framework. Follow the project at codeplex for the updates. I will also post the updates here in my blog.