ASP.NET Custom Server Controls: Get in Control of ASP.NET

The sample downloadable solution (zip) is entirely developed using Visual Studio.NET 2003 Enterprise Architect on Windows Server 2003 Standard Edition. But, I am confident that it would work with other versions of Windows (which support .NET 1.1) versions as well.

Introduction

ASP.NET contains a control framework that is used by developers to create different user interfaces for their web applications. This framework is often referred to as web forms. As ASP.NET is a core element of the .NET framework, the control framework (web forms) is also a part of the .NET framework. The controls related to web forms are generally termed server controls. They are the essence of the web forms programming model.

The server control architecture is extensible, and opened the door to a large community of component developers who can design and implement new custom controls. A custom control is generally an extension to an existing server control or to the “Control” base class. Every sever control (or even custom control) gets converted to HTML tags at run time. This hides all the complexities and inconsistencies of any browser used for browsing the web application.

ASP.NET sever controls provide a rich server side programming model. We can design our own custom controls through properties and methods. We can also embed an event base programming model, which allows page developers to implement application logic in response to user interaction with the web application.

The ASP.NET framework supports a concept called “View State” to manage the state of server controls across individual web requests. Managing the state can be understood as “remembering the values or choices of the user across multiple requests of several pages.” This removes the burden on the page developers to maintain data and state using memory expensive sever objects like “session” and “application” objects.

The server controls support post backs in a very simple manner, together with posting back the data and managing state. The server controls even support the concept of data binding by removing the complexity of “looping with HTML tags” in traditional server side programming languages like ASP, PHP, and so forth. This simplifies the creation of dynamic pages in a very efficient manner, and also improves productivity.

The server control hierarchy

All ASP.NET sever control classes are implemented in the following namespaces:

• System.Web.UI
• System.Web.UI.HTMLControls
• System.Web.UI.WebControls

All of the above namespaces exist in System.Web.Assembly, which gets automatically added to every ASP.NET web application project in Visual Studio.NET 2003. All server controls get derived directly or indirectly from the System.Web.UI.Control class. Even the “aspx” page (that we design and develop) gets derived from a server control called “Page.”

All of the controls available in System.Web.UI.HTMLControls are mapped directly to HTML tags or elements. All of those controls are appended with the “runat=server” attribute automatically. When we work with System.Web.UI.HTMLControls, we will feel like directly working with HTML. Even though it sounds like a good idea, HTML doesn’t have any object based control of properties (or strong types) to make a developer's life happy when developing the page. The System.Web.UI.WebControls solves this problem by providing an object based interface to HTML elements.

All of the controls in System.Web.UI.WebControls provide a .NET based object model and render themselves as HTML controls. Programming with System.Web.UI.WebControls gives us the flexibility to work with enhanced object based properties, methods and events which are not available in traditional HTML elements. At run-time all these elements get mapped (and exposed) to the proper HTML elements, together with CSS, without our knowledge. Our life becomes very easy when we work with System.Web.UI.WebControls.

Developing a simple custom control

To develop any custom control we generally design a class which gets derived from either of the following two classes:

• System.Web.UI.Control
• System.Web.UI.WebControls.WebControl

The System.Web.UI.Control provides only the basic functionality to make our custom control participate in the page frame work. The System.Web.UI.WebControls.WebControl is already derived from the System.Web.UI.Control class and provides support for additional properties such as font, height, width, and so on. In this article we will focus on working with the System.Web.UI.WebControls.WebControl class.

Now, we will develop a small “label” type of control from scratch. I call that  “LabelErrMsg”, because it may be used simply to display some red colored message in a red bordered box. The following steps help you to create the custom control using Visual Studio.NET 2003:

1. Click start -> Programs -> Microsoft Visual Studio .NET 2003 ->Microsoft Visual Studio .NET 2003 to open the IDE(Integrated Development Environment)

2. Click File -> New -> Project

3. Within the “new project” dialog box, select “visual basic projects” as project type, “Web Control Library” as template, and provide the name as “SimpleCustomControl” along with the location you desire (Figure 2) and finally click “ok”.
   
   
   
   Figure 2
   
   
4. Within the solution explorer, right-click on “WebCustomControl1.Vb” and select “delete” to delete it.
   
5. Go to the project menu and select “Add New Item”.
   
6. Within the “Add New Item” dialog box, select “WebCustomControl” and name it “LabelErrMsg.vb” as shown in Figure 3.
   
   
   
   Figure 3
   
   
7. Modify code in the editor as follows:

ImportsSystem.ComponentModel

ImportsSystem.Web.UI

<DefaultProperty("Text"), ToolboxData("<{0}:LabelErrMsg runat=server></{0}:LabelErrMsg>")>PublicClassLabelErrMsg

InheritsSystem.Web.UI.WebControls.WebControl

Dim_textAsString

<Bindable(True), Category("Appearance"), DefaultValue("")> _
 Property[Text]()AsString

Get

Return_text

EndGet

Set(ByValValueAsString)

_text = Value

EndSet

EndProperty

ProtectedOverridesSubRender(ByValoutputAsSystem.Web.UI.HtmlTextWriter)

output.Write("<table border=1>")

output.Write("<tr><td bordercolor=red style='COLOR: red; BACKGROUND-COLOR: lightgoldenrodyellow'>")

output.Write([Text])

output.Write("</td></tr></table>")

EndSub

EndClass

• Press Shift+CtrI+B to build the solution.

Testing the control with a web application

The previous section created only the custom control. We need to test the custom control by using a web application. Now, we shall create a web application (within the same solution as above), refer to the previous web control, drag it onto the web page and finally test it. The following steps will guide you through the process.

• Within the same solution, Go to File -> Add Project -> New Project
  
• Select the project type “ASP.NET Web Application”, replace the location as shown in Figure 4, and click “ok”. Within the solution explorer, right-click on the solution and go to the properties. Select the “Single Startup Project” radio button and select “SimpleCustomControlTest” in the dropdown list, which is right below that radio button, and finally click “ok”.
  
  
  Figure 4
  
• Within the solution explorer open the “SimpleCustomControlTest” project and select “References”. Right-click on that “references” and select “Add Reference”.
  
• Within the “Add Reference” dialog box, select the “Projects” tab, click on the “select” button and click “ok” as shown in Figure 5.
  
  
  Figure 5
  
• Open the tool box, right-click on “Web Forms” and select “Add/Remove Items”.
  
• In the “Custom Toolbox” dialog box, click “browse” and go to the bin folder of “SimpleCustomControl” project. Select “SimpleCustomControl.dll” file, click “Open” and click “Ok”.
  
• You should be able to see a new control with in the “web forms” section of tool box named as “LabelErrMsg” (it generally gets added at the bottom).
  
• Drag the same control onto the “WebForm1.aspx” in design mode.
  
• Drag a button from the tool box and modify button-click-event as follows:

PrivateSubButton1_Click
(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)
HandlesButton1.Click

Me.LabelErrMsg1.Text = "Error Occured"

EndSub

• Execute the solution and click the button on the web page. You should be able to see the output as shown in Figure 6.
  
  
  Figure 6

Understanding the custom control

In this section, we shall go into the detail about the custom control. First of all let us consider the following lines:

PublicClassLabelErrMsg

InheritsSystem.Web.UI.WebControls.WebControl

In the above sections, I explained that any custom control (or class of custom controls) needs to be derived either from System.Web.UI.Control or System.Web.UI.WebControls.WebControl. The above statement does exactly this. Since I would like to implement some features of UI automatically (like width, height, font and so on), I extended through the “WebControl” class instead of simply the “Control” class. Let us consider the following code fragment:

Dim_textAsString

<Bindable(True), Category("Appearance"), DefaultValue("")>Property[Text]()AsString

Get

Return_text

EndGet

Set(ByValValueAsString)

_text = Value

EndSet

EndProperty

I hope you can understand the above. It just defines a property named “Text” which gets displayed in the properties window under the category “Appearance”. When the user wants to change information in the label, he does it through this property. Now, we shall proceed further.

ProtectedOverridesSubRender(ByValoutputAsSystem.Web.UI.HtmlTextWriter)

output.Write("<table border=1>")

output.Write("<tr><td bordercolor=red style='COLOR: red; BACKGROUND-COLOR: lightgoldenrodyellow'>")

output.Write([Text])

output.Write("</td></tr></table>")

EndSub

The above code fragment is the heart of our custom control. Every control (including “page”) has the “Render” method, which sends HTML, CSS, JavaScript, and so forth to the response stream (browser). This method gets executed by ASP.NET runtime (after every postback) separately for every control, including the “page” control.

Any comments, suggestions, bugs, errors, feedback etc. are highly appreciated at jag_chat@yahoo.com.