MVC- Custom Data Annotations validation server and client side

How to validate model in MVC?

Validation is most important part in any website which allows entering information.

Now, question is what is the easiest way to implement validation on MVC application?

Fortunately MVC provide a great facility for implement data validation using DataAnnotation.

I hope now day all are aware about of data annotation and attribute pattern for code, If you not aware then please do quick google for that.

In C# using data annotation we can validate our model using validation attributes

Need to add Data Annotation DLL: System.ComponentModel.DataAnnotations

It is inbuilt providing some validation attributes like required, string length etc..

In MVC we are prefer to working by model and we can validate model using data annotation class.

Example:

           public class TestModel2
            {
                public int Id { get; set; }
                [Required(ErrorMessage = "Name is Required")]
                public string Name { get; set; }
                [Required(ErrorMessage = "Email is Required")]
                [RegularExpression(@"^[\w\.=-]+@[\w\.-]+\.[\w]{2,3}$",
                     ErrorMessage = "Please enter valid email")]
                public string Email { get; set; }
                [StringLength(300)]
                public string Description { get; set; }
                [Compare("Email", ErrorMessage = 
                    "User name should be email id")]
                public string Username { get; set; }
                public DateTime PlanStratDate { get; set; }
                public DateTime PlanEndDate { get; set; }
                public string ExternalId { get; set; }
            }

           

We can validate model in both way at server side and also at client site.

For validation at client side we need to do some setting in web.config file.

In MVC 3 and onward that setting comes by default if u create project from internet website template.

MVC providing jquery.validate.js and [jquery.validate.unobtrusive.js for client side validation.

For more details about unobtrusive.js please refer blog : http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

In web.config file we need to add


Using built in validation attributes we covered almost every scenario. But in some case we need out of box validation.

For out of box validation we can create custom validation attributes and set on model.

Example:

       
        public class TestModel2
            {
                public int Id { get; set; }
                [Required(ErrorMessage = "Name is Required")]
                public string Name { get; set; }
                [Required(ErrorMessage = "Email is Required")]
                [RegularExpression(@"^[\w\.=-]+@[\w\.-]+\.[\w]{2,3}$", 
                ErrorMessage = "Please enter valid email")]
                public string Email { get; set; }
                [StringLength(300)]
                public string Description { get; set; }
                [Compare("Email", ErrorMessage =
                "User name should be email id")]
                public string Username { get; set; }
                public DateTime PlanStratDate { get; set; }
                [GratherThen("PlanStratDate")]
                public DateTime PlanEndDate { get; set; }
                [ExternalIdPattern]
                public string ExternalId { get; set; }
            }

        

First we need to create custom validation class and inherit from Validation Attribute class

After that need to implement one IsValidate override method and add your custom validation code in this method.

That's all almost done Now server side validation working for model.

Validation Class:

       public class ExternalIdPatternAttribute : ValidationAttribute , IClientValidatable
        {
            public ExternalIdPatternAttribute() : 
            base("External id should be match with system pattern") { }

            public override bool IsValid(object value)
            {
                const string matchingPattern = "code4help";
                return Convert.ToString(value).Contains(matchingPattern);
            }

            public IEnumerable[ModelClientValidationRule] GetClientValidationRules
            (ModelMetadata metadata, ControllerContext context)
                {
                   var errorMessage = ErrorMessageString;
                    var extidrule = new ModelClientValidationRule();
                    extidrule.ErrorMessage = errorMessage;
                    extidrule.ValidationType = "externalidpattern";
                    //extidrule.ValidationParameters.Add("otherpropertyname",
                         otherPropertyName);

                    yield return extidrule;
                }
         }


                
                


        public class GratherThenAttribute : ValidationAttribute , IClientValidatable
            {
                public string OtherProperty { get; set; }

                public GratherThenAttribute(string oprop)
                    : base("{0} should be grather then {1}")
                {
                    this.OtherProperty = oprop;
                }

                protected override ValidationResult IsValid(object value,
                 ValidationContext validationContext)
                {
                    var validationResult = ValidationResult.Success;
                    var otherPropertyval = 
                    validationContext.ObjectType.GetProperty(this.OtherProperty);
                    if (otherPropertyval.PropertyType == new DateTime().GetType())
                    {
                        var edate = (DateTime)value;
                        var sdate = 
                        (DateTime)otherPropertyval.GetValue(validationContext.ObjectInstance,
                         null);

                        if (edate.CompareTo(sdate) < 1)
                            validationResult = new ValidationResult(ErrorMessageString);
                    }
                    else
                        validationResult =
                            new ValidationResult(
                                "An error occurred while validating the property.
                                 OtherProperty is not of type DateTime");
                    return validationResult;
                }

                public IEnumerable[ModelClientValidationRule] 
                    GetClientValidationRules(ModelMetadata metadata, 
                    ControllerContext context)
                        {
                            var errorMessage = ErrorMessageString;

                            var extidrule = new ModelClientValidationRule();
                            extidrule.ErrorMessage = errorMessage;
                            extidrule.ValidationType = "gratherthen";
                            extidrule.ValidationParameters.Add("otherproperty", OtherProperty);

                            yield return extidrule;
                        }
                    }

            

For client side validation we need to implement IClientValidatable interface on custom validation class and get validation rule.

In validation rule validation type and all parameter should be in small case.

Now for start validation on client side we need to add custom javascript in unobtrusive script.

Code for custom validation client side:

            $.validator.addMethod("externalidpattern", function (value, element, params) {
            return Date.parse(value) > Date.parse($(params).val());
            });
            $.validator.unobtrusive.adapters.add("externalidpattern", [], function (options) {
                options.rules["externalidpattern"] = "#" + options.params.otherpropertyname;
                options.messages["externalidpattern"] = options.message;
            });

            $.validator.addMethod("gratherthen", function (value, element, params) {
                return Date.parse(value) > Date.parse($(params).val());
            });
            $.validator.unobtrusive.adapters.add("gratherthen", ["otherproperty"], function (options) {
                options.rules["gratherthen"] = "#" + options.params.otherpropertyname;
                options.messages["gratherthen"] = options.message;
            });

            

Okay now all done. Just need to add above js on page and all done for client and server side validation with custom attribute.

I Hope it will help!
Feel free to add comment. Enjoy coding.

Razor with MVC 3

Razor is new view engine for mvc

This post is for getting started with razor view engine. Hear some razor syntaxes for quick reference.

1. Code Block

               
               @{ var total = 7; }
               @{ var myMessage = "Hello World"; }
               
The value of your account is: @total 
               
The value of myMessage is: @myMessage
               @{var greeting = "Welcome to our site!";
                var weekDay = DateTime.Now.DayOfWeek;
                var greetingMessage = greeting + " Today is: " + weekDay;
                }
                
The greeting is: @greetingMessage

           

2. Expression HTML Encoded

            @Html.Raw(model.Message)
            @:Model.Message (Not render html as a part of output

         

3. Loop

            
               @foreach (var item in Model)
                {
                    
                        
                            @item.Message
                        
                    
                }

                @for (int i = 0; i < Model.ToList().Count(); i++)
                {
                    @Model.ToList()[i].Age
                }

            

4. Conditions

            
             @if (false)
              {
                @Model.Message;
              }
             else if (true)
              {
                @DateTime.Now;
              }
              else
              {
                @DateTime.Now;
              }

          

5. EmailID

             
             Razor automatically detect email id
            
ranmal.work@gmail.com
 
         

6. Print @

              @@my name will print @my name

          

7. Comment

              
              @*code here *@
              
          

8. Print string and model

              
             Hello word @ViewBag.Message, How r u?
              
          

9. Method in razor

              
             @(method)
              
          

10. Razor in html elements

              
            Click Me
            Click Me
            


            Product
            Product
              
          

11. Javascript and Resources

              
            
                
                    @Html.GetResource("label_first", ResourceScreenConstant.YourPage)
                
            
          
          

I Hope it will help!
Feel free to add comment. Enjoy coding and life.

KnockOut Js

In this article I will use knockoutjs for achieve MVVM patterns. Knockoutjs is a well known javascript library for create responsive, clean and rich interactive UI.

Knockout JS Features:

Bind model to UI: It is provide simple way to bind Model to direct UI
Dependency Trcking: It will automatically update UI base on changes in model data
Extensible: It is easy to write our custom method and behavior as per requirement of our application

MVVM (Model View View Model) design pattern for develop software. MVVM is specialize design pattern for presentation of Model in UI. It is targeted at modern UI development platforms which support Event-driven programming, such as HTML5, Windows Presentation Foundation (WPF), and Silverlight.
MVVM design pattern provide facility to develop software in a way the development of UI is totally separate of development of logic or model. MVVM is responsible to represent model on UI.

For set up visit http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js and download lasted knockoutjs and add in your solution.

Knockout is also now available on NuGet package
We can download it using Visual Studio Package manager Consol using command : Install-Package knockoutjs

For more details checkout http://knockoutjs.com

Examples:
Hello Word !

    
    


    

    

        

            First name:
            
        

            Last name:
            
        

            Hello, !
    
    

List items

    
    


    

    New item:
    
    
    

        Your items:
    
    
    

Please check http://knockoutjs.com for more details. It is amazing and very useful for UI changes using mvvm patterns.

I hope it will help you !.