ASP.NET Extender Control: Decorating & Componentizing Web Controls With Client Behavior

| Comments 

<div class="mceTemp">
  Problem
</div>

ASP.NET server controls componentize (or encapsulate) the UI behaviors in a manageable way so that enhancements or modification is much simpler.  These are like swiss-army-knife, somebody use server side and client side features in balanced way, others may heavily stick with either server side or client side.  The major reason for people stick with server side code is to avoid client side script managebility.  Unlike ASP.NET controls those can be componentized in assemblies, JavaScript needs to be deployed separately in an uncontrollable way.  The problem with this are:

  • Resolving script path
  • Client side code control

Another problem is to decorate or extend a web control on demand basis is not standardized.

Forces

  • To apply new or common behaviors to one or more web controls without affecting the controls.
  • To send/generate extended feature set  on demand basis.
  • To encapsulate client side behavior (none other than JavaScript files) within ASP.NET server control assembly.
  • To separate group of concerns between client script and server side code.
  • To control control’s client script path.  
  • To manage and control’s client behavior.

Solution

Encapsulating client script with .NET assembly is one of the feature introduced in ASP.NET AJAX.   By this feature, ASP.NET 3.5 introduces “System.Web.UI.ExtenderControl” which enables you to extend or decorate one or more web controls without interrupting the actual controls.

ExtenderControl

ExtenderControl is the decorator here which in turn implements IExtenderControl interface. (See figure 1)

Figure 1

Figure 1

It contains two methods,

  • GetScriptDescriptors - Implementer can return collection of ScriptDescriptor, each can include client side script behavior such as client types to create, properties to assign and event handlers to register.  One nice derived class of ScriptDescriptor is ScriptBehaviorDescriptor.
  • GetScriptReferences – Implementer can return collection of ScriptReference, each can include actual JavaScript file detail.

From a decorator perspective, ExtenderControl facilitate you with some additional properties.  See figure 2.  It does not allow you for custom rendering. (See figure 2).

Figure 2

Figure 2

The TargetControlID is used to assign the extended behavior to a control in the page.

Example

In this example, you can understand how extender and its associated classes works, and how ASP.NET AJAX helps you to decorate a web controls and how to componentize client side behavior in to .NET assembly.  Figure 3 depicts how it is working.

Figure 3

Figure 3

Part 2 of this post will explain this in detail with sample.