1,111

Implementing validation callout in Asp.net MVC (with data annotations)

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

Introduction

I always liked validation callout extender that is available in Ajax control toolkit. However in MVC, we largely rely on jQuery plugins to do all the fancy stuff (and of course important tasks too).

MVC 3 uses Unobtrusive Javascript and jQuery validation plugin to provide inbuilt ability to do client side validation based on data annotations used in model class. This works very smooth and saves developers from writing too much of code for doing validations.

However, what if I want to use validation call out like functionality with data annotation feature of MVC 3 taking care of validation logic. In this article I will demonstrate how that can be done.

Background

Of course there are plenty of jQuery validation plugins available which provides validation callout functionality. But that way, we lose advantage of doing validations based on data annotations. Means, I have to get my hands dirty again in managing validation conditions, validation message etc.

I can take advantage of both by somehow combining jQuery plugin in unobtrusive javascript.

I tried to achieve that and I believe I have partially done it. I am still to remove some flaws from the code. But I think this would give someone like me a stating point… (I searched endlessly to see if someone has already done it).

I have used Ajax ControToolkit’s validation callout extender sample to style the callout box. I borrowed html tags and style of call out extender from this old post of James Ashley

Article Body

little background about data annotation feature of MVC 3

You can take advantage of Data annotation model binder by adding Data Annotation Validation attribute on model properties. Following namespace are need to be included in you model class

1
2
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

We just need to decorate model property with the suitable annotation attribute. Like in the example below, the property UserName is required field.

1
2
[Required (ErrorMessage="hey.. enter this")]
public string UserName { get; set; }

By data annotation attribute, we add validation condition for server side validation at model level as well as validation on client side. To read more about Data annotation validation, read this tutorial on asp.net site

How client side validation happens by data annotation attributes

To demonstrate validation call out using data annotation, I have created this demo project which uses following model class to customize user registration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
using System.Web.Mvc;
using System.Data.Entity;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
  
namespace MvcApplication1.Models
{
    [Bind(Exclude="userid")]
    public class Users
    {
        [Key]
        [ScaffoldColumn(false)]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public string Userid { get; set; }
  
        [Required (ErrorMessage="hey.. enter this")]
        [Display(Name = "User name")]
        public string UserName { get; set; }
  
        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email address")]
        public string EmailAddress { get; set; }
  
        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }
  
        [DataType(DataType.Text)]
        [Display(Name = "Full Name")]
        public string FullName { get; set; }
  
        [DataType(DataType.Text)]
        [Display(Name = "Role")]
        public string Role { get; set; }
  
        [DataType(DataType.Text)]
        public string Active { get; set; }
    }
  
}

prajapat