Using Web User Controls to Create Rich Internet Application Subassembies

Web user controls provide an opportunity to combine multiple related controls into one neat package. If you combine standard form elements with components from the AJAX control toolkit then you can build a library of rich internet application elements.

Example: A Numeric Entry Control

To illustrate what I mean, let’s consider a basic web user control for numeric data entry. Of the basic HTML form elements, text box, check box, list box, radio button, etc., the only one that would work for entering numbers is the text box. But the text box will allow you to enter either text or numbers, so if you have a data entry field for a numeric values then you would need to supplement it by adding either server-side or client-side code to prevent the user from entering anything other than numbers.

Since this is a common programming task, it would be nice if we could make a generic control for numeric entry that we could then easily reuse anytime we need numeric data input.

The requirements for this control are:

• It will only accept numeric values
• You can set a minimum and maximum value
• You can set it accept either integers or decimal numbers
• You can set it add comma separators if desired

AJAX Control Subassemblies

We can make use of Microsoft’s AJAX Control Toolkit to perform the client-side tasks which will limit the user to entering only numbers within a specified range into a textbox.

The AJAX Control Toolkit uses the “extender” design pattern. What this means is that instead of creating specialized controls that that will do one particular task, they offer control extenders which all have a “target control” parameter. The extender adds some additional capability or feature to its target. Different extenders can operate on the same target control. This gives more flexibility for adding exactly the features and behaviors that you desire in a particular control.

Scott Guthrie has a great discussion of ASP.Net control extenders in his blog.

The disadvantage is that every time you want to add a particular type of control that makes use of multiple AJAX extenders then you have to combine all the parts together and wire them up for each and every field on every web page. We can give up a little flexibility but still have very useful generic components by creating web user control subassemblies that combine elements that are commonly used together.

The properties of the subassemblies are:

• Two or more extenders are pre-wired to a common target control
• The web user control assembly exposes public properties that control the key attributes of the extenders
• The extenders will have reasonable default values so that you can drop the web user control onto your web page and use it with a minimal amount of effort, setting only those properties that are unique to the specific field.

AJAX Extenders for our Sample Numeric Control

We can meet the above requirements be making use of the following AJAX extender controls:

Control	Description (from http://www.asp.net/ )
MaskedEdit	MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered. MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Date, Time, and DateTime.
RangeValidator	The RangeValidator server control tests whether an input value falls within a given range. RangeValidator uses three key properties to perform its validation. ControlToValidate contains the value to validate. MinimumValue and MaximumValue define the minimum and maximum values of the valid range.

The range validator is actually a standard ASP.Net control but it does use the same extender design pattern. You will often combine validation controls with text boxes and AJAX extenders. By preassembling these parts you can save yourself some work.

In my next post I will take you step-by-step through a real-world example by creating a web user control subassembly for numeric data input.

Summary

The AJAX Control Toolkit and other ASP.Net components such as validators use the Extender Design Pattern, which makes them very flexible for adding features and behaviors to existing controls and allowing you to pick and choose multiple extenders to work on the same control. The drawback is that you have to do a lot more work to custom define the features and behaviors of every individual control that you desire to have a rich user interface. You can reduce this effort by creating a subassembly that combines ASP.Net AJAX and other web interface components into a web user control.

One example of such a web user control is a numeric data input control which I describe here and will create in my next post.