Using MVC Data Annotations for validation with the Infragistics jQuery Editors

One way to enable data validation when using jQuery and MVC is to use data annotations in the data model and then configure the jQuery editors to use them. This article will walk you through this process in the new 2012.1 release.

The first step is to creating the basic ASP.net MVC app with jQuery. Once you create an empty MVC3 project you should add the Infragistics.Web.Mvc.dll assembly to your references. In my case its located in C:\Users\Public\Documents\Infragistics\NetAdvantage 2012.1\jQuery\Samples\MVC\bin\ but it could be somewhere else depending on where you installed the product. Once you add the reference, you should add the css files and the js files that come with the product to your project. I put them in a folder called Infra at the top of the project. The css folder contains the css files hierarchy with styles for all controls and the js folder contains all the required js scripts. We are going to use those folders with the Infragistics loader in a minute when we are creating the View.

Lets create the model. I’m going to name it Person.cs as this article will show how to write a form with validation that creates a user as seen on the screenshot above. It will have three properties: Name, Age and Email.

Once we have the model we can create a controller. Mine will be called PersonController. In there we are going to put two Actions called Create that handle the model in GET and POST modes.

Make sure you add the reference to the namespace in which the model is created.

Once we have the model and the controller we can create a view as well. Lets go ahead and call it Create. The view should be strongly typed, the model class obviously Person. Note: If you don’t see the class Person you just created in the list make sure you build your solution first.

In the view (I assume you use ASPX and no MasterPage) we can start adding the interesting elements. The first one is the inclusion the the Infragistics MVC assembly.

You can put that right after the Page line.

Then you should add the jQuery scripts. Personally I like using the CDN.

Note: Make sure you use a current version. If you use an old one some inexplicable exceptions might occur!

Once we are done with that we need to add and initialize the Infragistics loader.

Like I said in the beginning of the article I put all the scripts and styles from the product in the Infra folder. In your project they could be somewhere else.

The next step is to add the content with the form. here is the code.

The result of this will be a working form that does not have validation.

To add the validation first we need to use the data annotations to describe what the requirements for each property are. Lets go to the Person.cs model file.

Make sure you add the namespace

Then you can add required fields, string length, regular expression, etc.

This is just an example. Experiment with those.

This is actually enough to enable the validation.

Now if you want the validation error message to be on the right as on the first screenshot you need to add this line after each editor:

And specify which property should the message be displayed for.

You can also provide some styling for the message. The class you need is field-validation-error. You could also style the button to a fancier igButton. Here is the complete code:

I hope this article was useful and interesting to you! Have a great day!