I just finished a couple of presentations at the SouthWest Florida Code Camp: What's New in ASP.NET MVC 2.0 and Enterprise Library and Unity Tips and Techniques.
One of the new features I showed off in ASP.NET MVC 2.0 Preview 2 is the built-in support for Client-Side Validation with jQuery Validation. Client-Side Validation in ASP.NET MVC 2.0 Preview 2 allows you to decorate your classes with the System.ComponentModel.DataAnnotations Validation Metadata and the Client-Side Validation Support will automagically read that metadata and emit the equivalent validation rules via jQuery Validation on the view. This avoids the hassle of writing the validation rules twice, both on the server-side and client-side, and having to synchronize the rules everytime the validation rules change. If you are familiar with the Validation Application Block in Enterprise Library, this is somewhat similar to the PropertyProxyValidator Control.
Html.ClientValidationEnabled = true
The beauty behind the Client-Side Validation support fot jQuery Validation in ASP.NET MVC 2.0 is the simplicity of adding the support to your web application. Although it took me some time to find the answer as I couldn't find any documentation on it, the answer is a two-step process:
- Add two JavaScript files to your view in addition to jQuery:
- jquery.validate.js
- MicrosoftMvcJQueryValidation.js
- Add one little line of code to your view: Html.ClientValidationEnabled = true.
Doing so will cause the proper jQuery Validation code to be emitted to your view and validate your form client-side before submission.
If you check my ASP.NET MVC 2.0 Tutorials Index, there is a tutorial called: DefaultModelBinder Supports DataAnnotations and ValidationAttribute (s) in ASP.NET MVC 2.0. The example shows a Contact class with a number of validation attributes from System.ComponentModel.DataAnnotations:
public class Contact
{
[Required(ErrorMessage = "Name is required.")]
[StringLength(100, ErrorMessage = "Name must be 100 characters or less.")]
public string Name { get; set; }
[Required(ErrorMessage = "Email is required.")]
[StringLength(200, ErrorMessage = "Email must be 200 characters or less.")]
[RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Valid Email Address is required.")]
public string Email { get; set; }
}
The DefaultModelBinder will handle the validation on the server-side for you so that all you need to do is write code similar to the following to return the errors if they exist:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Contact contact)
{
if (!ModelState.IsValid)
return View(contact);
// ...
}
When you add the two javascript files as well as the single line of code mentioned above to the view you will then see Client-Side Validation as well.
Note that the Client-Side Validation does not support all validation attributes per the notes. In this case it works perfectly as the Client-Side Validation does have support for Required and Regex Validation. Check the readme files for details.
This is a great add to ASP.NET MVC 2.0 Preview 2!
Check out my other ASP.NET MVC 2.0 Tutorials.
David Hayden