Client-Side Validation with jQuery, DataAnnotations, MVC 2, and VS2010 Beta 2

Anytime a feature of a framework gives me something for free that I don't need to manually implement I'm a happy camper. One such feature of ASP.NET MVC 2 is jQuery client-side validation. The reason I like this is that unlike other jQuery frameworks, where you have to write the jQuery yourself - you don't need to do that with MVC 2.

Instead of having to maintain simple validation logic in two places (your business classes and your jQuery code), you can now use the Data Annotations attributes and metadata "buddy" classes to decorate your models. Those decorated models will automatically generate the appropriate jQuery code to enforce all of your validation rules on the client side before the form is ever submitted. Let's see how this works.

First, we need a model class. Let's do something simple like Customer:

public partial class Customer
{
    public string Name { get; set; }
    public int Age { get; set; }
}

This is great. I love the fact that it doesn't look ugly and view developers can look at it and immediately know what fields are available and they don't need to sift through a pile of persistence garbage or validation logic. You might have noticed that I've made this class partial. The reason I'm doing this is because I'm going to create another file called Customer.metadata.cs. There are other samples on the web that don't do this, but I like cleanly separating the definition of my model from the validation logic for that model. Here's a look at my Customer.metadata.cs file:

[MetadataType(typeof(CustomerMetaData))]
public partial class Customer
{
    class CustomerMetaData
    {
        [Required(ErrorMessage="You must supply a name for a customer.")]
        [StringLength(50, ErrorMessage = "A customer name cannot exceed 50 characters.")]
        public string Name { get; set; }
    }
}

What I've done here is used a metadata "buddy class" (that's what posts from Scott Guthrie and Scott Hanselman have been calling them, so I'm sticking with convention here). This buddy class is a placeholder for all my validation logic attributes and the runtime will then merge all this stuff onto the actual model. MVC 2 will then examine the model and , with a few lines of code in the view, generate the appropriate jQuery client-side validation logic.

In your view code, add the following 3 script declarations:

Finally, somewhere before the start of your form tag, add the following markup to the view code:

<% Html.EnableClientValidation(); %> 

This will invoke the code that reads through the strongly typed model for your view, figures out all of the validation logic that applies, and generates the appropriate jQuery code.

While you could write your own jQuery validation code if you felt like it, using data annotations and MVC 2, you no longer have to maintain your validation logic in two places. The attributes apply to a single view model and all you have to do is change one of those attributes and the generated jQuery code will change as well. This is a huge timesaver and promises to dramatically increase overall productivity of developers building large-scale MVC 2 applications, especially LOB apps with lots of data entry forms.

tags: vs2010  mvc2  jquery  dataannotations  validation  client  mvc  aspnet  

links: digg this    del.icio.us    technorati    reddit