Wizard control widget: my first Jquery Widget

 

We are familiar with ASP.NET Wizard control and that is powerful to create form which need to perform many steps clicking on next and next button.But in Javascript, the problem in writing such widget control is we usually become dependent to HTML controls. Jquery Widget is giving us such power full and object oriented way to create control or plugin which we can easily make it independent on HTML control and more re-usable. It provides object oriented features such as encapsulation, inheritance.Widget also provides constructor and destructor to manage lifetime of plugin.

In MSDN there have a nice article on JQuery Widget http://msdn.microsoft.com/en-us/library/hh404085.aspx. Silk Project is real good example of Jquery Widget.

I found some nice wizard control using Jquery those are dependent on HTML controls. Some good articles on Jquery Widget :

http://blog.degree.no/2012/03/creating-a-simple-form-wizard-in-asp-net-mvc-4/

http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx

both are almost same and I am not here reinventing wheel. I am using the second article code to create wizard plugin so that I can make it more reusable but I can not say that is perfect for any type of requirement.

If you read the second article ( mentioned above) Code  are pretty simple to understand. I am here just trying here to covert it into Jquery widget.

Jquery widget has constructor like _create method which is invoked first time. Here underscore is used to define private scope. So other object can not call _create method.

So in the _create method I have defined how control can be bind to methods and how control would be displayed initially.

To make it independent of particular Form, I have some properties inside Widget options so that we can set ui element or action there. Wizard widget can be called in form as like other widget.

   1: var wizard= $("#WizardForm").Wizard(

   2:       {

   3:           backButtonId: '#back-step',

   4:           nextButtonId: '#next-step',

   5:           finalButtonId: '#next-step',

   6:           confirmAction: ConfirmAction,

   7:           finalAction: FinalAction

   8:       });

  Here back-step, next-step are HTML button ids. and ConfirmAction and FinalAction are methods which is using as callback method.

To set those properties jquery widget provides us to create options object with these properties.

   1: $.widget("system.Wizard", {

   2:         options: {

   3:             backButtonId: '',

   4:             nextButtonId: '',

   5:             finalButtonId: '',

   6:             finalAction: null,

   7:             confirmAction: null

   8:         },

   9:  

  10:         _create: function () {

  11:             var that = this, name = this.element.name;

  12:             this.FirstStep = this.element.find(".wizard-step:first");

  13:             this.FirstStep.fadeIn();

  14:             this.CurrentStep = this.FirstStep;

  15:             $(this.options.backButtonId).click(function () { that.moveBack(); })

  16:             $(this.options.nextButtonId).click(function () { that.moveNext(); })

  17:         },

In this code we have exposed some properties so that user can set those properties as defined above and in _create method provided control ids are bind with widget method to make it reusable.

We exposed two method for logic to go next step or in previous step. This code need more improvement to make it more reusable. In the moveNext() method I have called callback method so that we can perform some actions which are dependent on particular UI control

   1: moveNext: function () {

   2:  

   3:            var $step = this.CurrentStep; // get current step

   4:  

   5:           //part of code

   6:  

   7:           if ($step.next().hasClass("confirm")) { // is it confirmation?

   8:               //invoking callack method

   9:                this.options.confirmAction($step);

  10:  

  11:            }

  12:  

  13:            //part of code 

  14:  

  15:            else { // this is last step, submit form

  16:                this.options.finalAction();

  17:            }

  18:        }     

Here is complete code of Wizard plugin. https://dl.dropbox.com/u/20275838/Wizard.js

Custom Conditional Validation Depends on Another Property Value using JQuery Unobtrusive feature and ASP.NET MVC

 

Data Annotation Validation Attribute ( example [Required]) makes easy to provide validation in ASP.NET MVC. Also if Enable unobtrusive validation, we do not need to write any code in JavaScript for client validation. Jquery unobtrusive  validation parse the data attribute in HTML and we do not need to any custom code to validate form.

To enable client side  validation and unobtrusive validation we need to provide settings in web.config or in server side HtmlHelper.

 

   1: <appSettings>

   2:     <add key="ClientValidationEnabled" value="true" />

   3:     <add key="UnobtrusiveJavaScriptEnabled" value="true" />

   4: </appSettings>

or

   1: HtmlHelper.ClientValidationEnabled = true;

   2: HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

If  jquery unobtrusive library is referenced in cshtml then there do not need to write any custom code to validate form with the help of data annotation validation attribute.

   1: public class CustomerFormModel : ICustomerCommand

   2:   {

   3:       public int Id { get; set; }

   4:       

   5:       [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]

   6:       [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]

   7:       public string Name { get; set; }

   8: }

When this code will be executed the form can be validated automatically by jquery unobtrusive validation.

When you enable unobtrusive validation ASP.NET MVC add data attribute in HTML  for each data annotation.

In HTML attributes are generated for data annotation in server side and jquery unobtrusive library parsed those attribute for client validation.

But what will happen if validation on any field depends on the value of another field value. You may also want this validation not only client side but also in server side. Usually in such case we write custom validation before submitting form and also do same validation in server side.  We can also do same custom validation using Data annotation and jquery unobtrusive validation without directly referencing client control.

Suppose the requirement is to validate Email field as required only if Name field is not empty. So if Name field is not empty then we do not have to provide Email.

It this case the server side validation would be not difficult. We can create an data annotation attribute which will make decision based on value of Name property.

This is not final code.

   1: namespace SimpleTier.Domain.Validators

   2: {

   3:     using System;

   4:     using System.Collections.Generic;

   5:     using System.Linq;

   6:     using System.Text;

   7:     using System.ComponentModel.DataAnnotations;

   8:     using System.Web.Mvc;

   9:     using SimpleTier.Domain.Properties;

  10:  

  11:     public class EmailValueValidator : ValidationAttribute

  12:     {

  13:         private string _dependentPropery;

  14:         private bool _isRequired;

  15:         public EmailValueValidator(string dependentpropery, bool isrequired)

  16:             : base()

  17:         {

  18:             _dependentPropery = dependentpropery;

  19:             _isRequired = isrequired;

  20:         }

  21:  

  22:         protected override ValidationResult IsValid(object value, ValidationContext validationContext)

  23:         {

  24:             if (_isRequired == false) return null;

  25:             System.Reflection.PropertyInfo property = validationContext.ObjectType.GetProperty(_dependentPropery);

  26:             if (property != null)

  27:             {

  28:                 var value1 = property.GetValue(validationContext.ObjectInstance, null) as string;

  29:                 if (string.IsNullOrEmpty(value1) == false && string.IsNullOrEmpty(value as string))

  30:                     return new ValidationResult("Value can not be empty");

  31:  

  32:                 return null;

  33:  

  34:             }

  35:             else

  36:                 new ValidationResult(string.Format("Unknown Properties {0}", _dependentPropery));

  37:  

  38:             return null;

  39:  

  40:         }

  41:  

  42:     }

  43: }

In this code a custom validation attribute is created. IsValid() function gets the value of Name field and make decision based on Name value. Attribute on Email property can be defined as:

   1: public class CustomerFormModel : ICustomerCommand

   2:    {

   3:        public int Id { get; set; }

   4:        

   5:        [Required(AllowEmptyStrings = false, ErrorMessageResourceName = "CustomerNameRequired", ErrorMessageResourceType = typeof(StringTable))]

   6:        [StringLength(200, ErrorMessageResourceName = "CustomerNameLenthValidationError", ErrorMessageResourceType = typeof(StringTable))]

   7:        [TextLineInputValidator]

   8:        public string Name { get; set; }

   9:  

  10:        //[Required(AllowEmptyStrings = false, ErrorMessageResourceName = "EmailRequired", ErrorMessageResourceType = typeof(StringTable))]

  11:        [EmailValueValidator("Name",true)]

  12:        [StringLength(200, ErrorMessageResourceName = "EmailStringLengthValidationError", ErrorMessageResourceType = typeof(StringTable))]

  13:        public string Email { get; set; }

  14: }

Here Name is the property on which validation depends and also sets another value to determine validation logic is required or not.  But this validation works only on server side and in the HTML code no such validation attribute is created.

To make this validation work also on client side some Html attribute need to be created and make jquery unobtrusive library understand those attribute. To create those html attribute our custom attribute class need to be implemented  by IClientValidatable interface. If class is implemented by IClientValidatable interface,  method name GetClientValidationRules() can be implemented to define the rules that will be generate as html attribute.

 

 

We need to define such rule in unobtrusive adapter so that client side validation understand these html attribute. unobtrusive adapter gives option to define method which will work with such rules and defined data attribute.

   1: <script type="text/javascript">

   2:     $.validator.unobtrusive.adapters.add(

   3:         'emailcustomvalidation',['dependentpropery','isrequired'],function(options)

   4:         {

   5:             options.rules["emailcustomvalidation"] =

   6:                 {

   7:                     dependentpropery: options.params.dependentpropery,

   8:                     isrequired: options.params.isrequired

   9:                 };

  10:             options.messages["emailcustomvalidation"] = options.message;

  11:         });

  12:     $.validator.addMethod("emailcustomvalidation", function(value, element, params)

  13:     {

  14:         var parts = element.name.split(".");

  15:         var prefix = "";

  16:         if (parts.length > 1)

  17:             prefix = parts[0] + ".";

  18:         var emailvalue = $('input[name="' + prefix + params.dependentpropery + '"]').val();

  19:         if (!value && !emailvalue)

  20:             return true;

  21:         if (emailvalue && !value)

  22:             return false;

  23:         return true;

  24:     })

  25:            

  26:     

  27: </script>

Here same validation is defined as server side code. When the save button will be clicked the form will be be validate and it will call this method. Client side validation provides same validation with error message defined in server side. Such validation can be used for multiple controls as that does not depend on any HTML control.