Extending WebControls to make your own Server Controls

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/extending_webcontrols_to_make_your_own_server_controls.htm]

There are several different groups of controls in ASP.Net, ranging from the foundational HtmlControls to the advanced Custom Server Controls:

1. HtmlControls - standard HTML controls. (In the System.Web.UI.HtmlControls namespace).
2. WebControls - ASP.Net controls. These include controls with similar Html counterparts like Button and Dropdown, but also have advanced controls like Validators and DataGrid (In the System.Web.UI.WebControls namespace).
3. UserControls - Combines multiple controls into a single, reusable control (Inherits from System.Web.UI.UserControl class).
4. Custom Server Controls
   1. Composite Custom Controls - create new controls from existing server controls.
   2. Rendered Custom Controls - create entirely new controls from raw HTML.
   3. Extended Controls - creates a new server control by inheriting from a previous control.

While everything ultimate reduces to Html, grouping controls together for reusable packages lets us save a lot of time. One such technique is to create an Extended Control by inheriting from an already existing control. This is great for when you want to build off a single control and extend its functionality. For example you could inherit from the TextBox class and add a new method ToLower which makes all the text lowercase.

There are several benefits

1. Very easy - just create a new class that inherits from the control you need
2. Has all the properties of the base control
3. Has Design-time support (unlike User Controls)

This is easy to do, here's how:

1. Create a new WebControlLibrary (compiles to a DLL). This is used for Composite and Rendered controls as well.
2. Add a new class called TextBoxA, and make it inherit from System.Web.UI.WebControls.TextBox
3. Add the methods and properties you need.

using System;using System.Web.UI.WebControls;namespace WebControlLibrary1{ /// /// Summary description for TextBoxA. /// public class TextBoxA : System.Web.UI.WebControls.TextBox { public TextBoxA() { } public void ToLower() { this.Text = this.Text.ToLower(); } public string NewProp { get { if (ViewState["NewProp"] == null) return ""; else return ViewState["NewProp"].ToString(); } set { ViewState["NewProp"] = value; } } } //end of class}

 In the code snippet, we've added a method ToLower which references the textbox property "Text" and makes it lowercase. We've also created an arbitrary property NewProp and made it save data using ViewState.

We can load this easily into Aspx pages by first adding the DLL to the project like any other reference, and then adding the control itself to the toolbox. This lets us perform drag & drop operations like any other WebControl.

1. In the ToolsBox, right click for the context menu and select "Add/Remove Items"
2. A new window appears with two tabs: (1) .Net Framework Components (selected by default) and (2) COM Components. Within the tab there is a list of controls with checkboxes.
3. Click the browse button to find the WebControlLibrary  we just created, and add it.
4. Select the checkboxes for the controls you want to appear in the ToolBox.
5. The controls are now in the toolbox, and you can drag them onto a page just like any other.

If you don't want to add it to your toolbox, then you can also directly type the Html. You need to first Register the assembly by putting something like this at the top:

<%@ Register TagPrefix="cc1" Namespace="WebControlLibrary1" Assembly="WebControlLibrary1" %>

And then reference the control in the page by:

<cc1:TextBoxA id="TextBoxA1" runat="server">cc1:TextBoxA>

In summary, this is a quick technique with high return, and therefore a good skill to have.