Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Atlas Extender Crash Course – Part 1: Introduction

I don’t actually remember when I’ve met Atlas very first time, but it was some time ago. For almost everything I was working on, UpdatePanel and a few controls from Toolkit were absolutely fine and everything worked well, so there was no need to do anything more. Then my time came. I always had problems with validators, especially with displaying messages, exclamations and other visual stuff. Whatever I’ve done, I was not satisfied with the results. All these exclamations, stars and messages has stopped me from creating a slick interface. What I’ve always wanted was just simply change the way input field displays when there is an error by changing its class or so.

The very first idea to make myself happier was to create a bunch of classes that would extend the standard validators but instead of displaying messages, it would change properties of the validated input control. Sounds easy but doesn’t solve the postback problem at all. So I’ve decided to use an Atlas extender and just extend and change the validators’ functionality. In this series, I will show you how to extend the standard ASP.NET validator with some new exciting features. If everything will be fine and the sky will not fall onto my head we will finish in four or so parts with server side validation and couple other funny things.

Let us begin with a short introduction into the Atlas extender. Extender is a class that wraps the other components to extend their functionality, very similar to the decorator pattern. After adding Atlas Control Project to the site, we will see a number of files created.

 

The extender is composed of Java Script file with all client side behaviour and three server side classes. In this part, we are about extending some client side behaviour so we will focus on two parts only, Java Script and server side Properties.

Before we will begin coding, let us look what we want to achieve. The standard validator looks … well everyone knows already how it looks like. We want to hide an error message that displayed by default, then change CSS class of the validated control assigned to and finally add the message as a tooltip.

 

Basic steps of creating extenders are described in Atlas Control Toolbox, so I will just mention the most important things here. To make the extender easier to use, we should limit it only to controls inherited from BaseValidator, so we should change part of declarations in ValidatorExtender.cs, ValidatorDesigner.cs and ValidatorProperties.cs classes similar to this:

public class ValidatorProperties : TargetControlPropertiesBase<BaseValidator>

Next step is adding the property for CSS class name that will be assigned to the validated control:

[DefaultValue("")]

public string ErrorCssClass

{

  get

  {

    return GetPropertyStringValue("ErrorCssClass");

  }

  set

  {

    SetPropertyStringValue("ErrorCssClass", value);

  }

}

Most of the work left in ValidatorBehavior.js client side script file. In normal case, this file is included into the extender and added to the page as a web resource, which is great but makes it hard to debug and test. We can avoid that by using ScriptPath attribute, which will add selected script file from the application directory. After compiling and adding extender to the test page, we should copy ValidatorBehavior.js from the extender project directory to the application and set extender as follows:

<cc1:ValidatorExtender ID="ValidatorExtender1" runat="server" ScriptPath="ValidatorBehavior.js">

  <cc1:ValidatorProperties ErrorCssClass="error" TargetControlID="TestValidator" />

</cc1:ValidatorExtender>

Now we can easily debug and test all Java Script. First, we should add functions to read and write the property we created above and variable to store its value and modify getDescriptor function to add property to the descriptor.

  var _errorCssClass;  //error css class for fields

  this.get_ErrorCssClass = function() {

    return _errorCssClass;

  }

  this.set_ErrorCssClass = function(value) {

    _errorCssClass = value;

  }

 

  this.getDescriptor = function() {

    var td = Validator.ValidatorBehavior.callBaseMethod(this, 'getDescriptor');

    td.addProperty('ErrorCssClass', String);       

    return td;

  }

In order to change behaviour of the validator we have to catch original validation function. After a few experiments we can find, that the validator has a function named evaluationfunction, generated by ASP.NET and depended on type of the validator but it always has the same parameters and returns true or false as a validation result. To catch this function we can store the original function in a separate property and change old one function to mockup that will call the original and then do what we want. Because we want to change the CSS class for the input associated with the validator to value stored in ErrorCssClass property, we have to store the original class to be able to restore it later when validation will be successful. Almost the same way we will deal with the error message. Therefore, first we have to modify initialize function as follows:

    1   this.initialize = function() {

    2     Validator.ValidatorBehavior.callBaseMethod(this, 'initialize');

    3     //store original validation function and replace it by extender mockup

    4     control.element.defaultEvaluationfunction = control.element.evaluationfunction;

    5     control.element.evaluationfunction = Function.createDelegate(this, evaluationfunctionMockup);

    6     //store original error message from the validator and clean the validator content

    7     control.element.defaultErrorMessage = control.element.innerText;

    8     control.element.innerText = "";

    9     //store original css class from the field assigned to validator

   10     var controltovalidate = $(control.element.controltovalidate);

   11     controltovalidate.defultClassName = controltovalidate.className;   

   12   }

After original initialisation, we are storing the default validation function in the separate property for later use and changing it to delegate to the mockup function described below. To get control, which the extender has been assigned to, we can use extender’s control.element property. Later then we are storing the original error message and clearing it to prevent the validator from displaying the message on his own. Finally, the same way we are storing the original CSS class from the validated control. Because the extender has been limited only to use with the validator control we can assume that there always will be correct properties. Now, when the validator will be validated, the mockup function will be executed instead of the original. There it is:

    1   this.evaluationfunctionMockup = function(val) {

    2     var isValid = val.defaultEvaluationfunction(val); //call original validation function

    3     var controltovalidate = $(this.control.element.controltovalidate);

    4     //set visual style for assigned field according to validation result

    5     if (!isValid) {

    6       controltovalidate.className = _errorCssClass;  //set error css class

    7       controltovalidate.title = val.defaultErrorMessage;  //set message as a tooltip

    8     }

    9     else

   10     {

   11       controltovalidate.className = controltovalidate.defultClassName; //restore original css class

   12       controltovalidate.title = ""; //clear tooltip

   13     }

   14     return isValid;  //return validation result for further processing

   15   }

On the very beginning, the original validation function executes to perform validation. Depend on the validation result the CSS class for the validated control is changed and the message tooltip is set up.

This easy extender shows how to change behaviour of original validator. What is important, this will not work with CustomValidator with server side validation. We will deal with this later in the course.

Next:

The above extender can be assigned to the only one validator and has to be repeated for each validator on the form. In the next part, I will show how to create one extender for all validators.


Posted 10-04-2006 4:54 PM by Jimmy

[Advertisement]

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)