There are essentially two types of controls in ASP.NET--custom controls and user controls. These two types of controls are quite different. Custom controls are compiled into a DLL and are essentially what the ASP.NET web server controls are; they provide a very high level of flexibility in your controls, but it's not exactly an easy experience (as contrasted to user controls). This article will take you through the basics of creating custom controls.

What are they?

Custom controls are controls that are written 100% in code and are then compiled into a DLL. Then they can be registered and inserted much like a user control. The difference comes into what you can put in them and what you can do with them. They can provide the same high level that server controls do and don't have to be a bunch of other server controls together.

Vs. User Controls

Custom Controls	User Controls
HTML rendering needs to be coded (no visual designer in VS.NET). Created totally in code and compiled as a complete class library. Easy to distribute and manage. Can have full use of the designer in VS.NET Can be referenced in the implementing page's code.	As simple as web forms to create (just drag and drop in VS.NET). Created as an ASP.NET page but stripped and with the .ASCX extension. (this is probably over-simplifying it). Sometimes has multiple text files and not as easy to distribute and incorporate. Little to no use of the designer in VS.NET Can't be referenced in the implementing page's code.

Functionality

I said earlier that they had a lot of functionality, and it's true. They can be built with the same functionality as server controls without the limitations of user controls. The downside is that it all has to be done through code, although you will find that it is actually quite simple to do.

For example, you can dynamically set the properties and handle events raised by the custom control, which you can't do in user controls.

In VS.NET you just create a Web Custom Control Library and you're set.

In Notepad, you will need to create a normal .vb file and add the following -

Imports System.Web.UI Namespace AGASP Public Class Ctrl1 Inherits System.Web.UI.WebControls.WebControl ..code goes here... End Class End Namespace

You can see that we are Inheriting the System.Web.UI.WebControls.WebControl class, we could Inherit the Control class, but this one already does inherit Control and provides some additional methods, properties etc.

Adding Code

Usually code will be added in the Render event -

Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter) ...code... End Sub

Note here that we Override the Render event. You can also add the code in any one of the other events.

I will be looking at this in more detail later on.

Compiling

Compiling the custom control is as simple as running the following at the command prompt (or building it in VS.NET) -

vbc /t:library /r:System.dll,System.Web.dll CustomControlFileName.vb

Displaying

As with a class library, you simply put the resulting DLL into the /bin directory of the target application and then register the tag on each page you want to use it on -

<%@ Register TagPrefix="MyPrefix" Namespace="AGASP" Assembly="AGASP" %>

To register the control on the page. Then use the normal server/user control style to include it.

<MyPrefix:ctrl1 id="TestControl" runat="server" />

Note that the syntax is - TagPrefix:ClassName. This allows you to have multiple controls in one namespace (again making a reference to the Web Server Controls).

All of the code that we will use to display information will be added to the Render.

You will notice that the Render method takes an HTMLTextWriter as a parameter, this output object can be used to write the appropriate information -

output.AddAttribute("border", "1") output.AddStyleAttribute("border-color", "#000000") output.RenderBeginTag("table") output.Write(Text) output.RenderEndTag()

That code will print out the following HTML -

<table border="1" style="border-color:#000000;"> Hello There </table>

Let's go over these methods.

AddAttribute

This method takes in the name of the attribute and the value of it. In the above example I passed in border for the name and 1 for the value.

AddStyleAttribute

This method takes in the name of the style property and the value of it. Using this method, it properly formats your style attribute without you having to mess around with it and probably get a syntax error along the way.

RenderBeginTag/RenderEndTag

These two methods start rendering and stop rendering the tag specified by RenderBeginTag. Using these methods take some adjustment, but in the end they present properly formatted code. They also allow you to make the code more dynamic (easier than having a lot of ' "something" & varname & "something" ') with ease.

Summary

This article has barely scratched the surface of custom controls, in future articles, I will show you more about advanced custom controls and other things that you can do with them.