Build your Own Web Control

As part of our ASP.Net series, last month we looked at the different types of server controls that are available to use by default in ASP.Net. However, you are not bound to use only these controls; there are also a lot of highly functional controls on the Web for you to use. But the best part is that now you can yourself write a Web control very easily. 

In classic ASP, you could create components using a language like Visual Basic, Visual C++ or Delphi, compile it into a DLL file and put it on the Web server. This itself requires a higher level of knowledge than normal Web developers required. You are then required to register this DLL so that the Windows registry would have an entry for this and you could refer to it using this entry. In ASP, you would do it using a line of code such as

Set MyObjVar = Server.CreateObject(“MyObj.Component”)

In this line, MyObjVar is the object variable that would be created and MyObj.Component is the ProgID of the component you wish to instantiate. But what would happen if a new version of the component were installed on the server? First of all, to get it running, you’d require stopping and restarting the server itself. Version conflicts due to entries misrepresented, could lead to further problems.

In ASP.Net all these problems are solved. Creating a new component, or Web control as it is known now, is as easy as creating an ASP.Net page itself. You also get all the features of ASP.Net built in and can access any other control on the page as well. 

Installing the control on the server is as easy as copying the related files into an appropriate directory there. This is why ASP.Net has a feature called XCopy deployment. There’s no need to register or mess around with DLLs, etc. 

Create a Web control

This control is going be a generic control with a simple visual interface that can be viewed when it is plugged into any ASP.Net page. It will also have a simple server-side functionality that can be used to make it dynamic as well. 

The control that we will create is going to be a simple date field. You see date fields when you fill up any sort of online form, for date of birth, anniversary, etc. As a Web developer, creating a date field on an online form sure is a chore. You need to create separate drop-down lists for the day, month and year and then concatenate them back when the user submits the form.

Our component will allow you to do all this by just inserting one line of code in all your ASP.Net pages from now on. Of course, you need to create the control first, so read on. 

The first thing to do is to create an .ASCX file. This, unlike .ASPX files, informs the .Net framework to use this as a control, rather than a normal ASP.Net page. So, let us call our control as UserControl.ASCX. The following is the contents of the file.

<%@ Control inherits=”PCQCalendar” src=”Usercontrol.vb” Language=”vb” %>



1

2

3

<… Cut for Brevity …>

31



/



Jan

<… Cut for Brevity …>

Dec



/



2001

<… Cut for Brevity …>

2009

The file simply defines three drop-down list controls that store the day, month and year of a date and are called lstDay, lstMonth and lstYear, respectively. The first line of the file defines a class name that is used for the component as well as the scripting language (VB) and a code-behind file called Usercontrol.VB. This allows a Web designer to change the appearance of the page while the developer can modify the code separately and integrate it successfully.

The UserControl.VB file is where the server side functionality is coded. The file looks like this.



Imports System

Imports System.Web.UI

Imports System.Web.UI.WebControls

Public Class PCQCalendar 

Inherits UserControl

Public Shadows lstDay As DropDownList

Public Shadows lstMonth As DropDownList

Public Shadows lstYear As DropDownList

Public DisplayDate As String

Public SubmitDate as String

Public Sub Page_Load()

If Page.IsPostBack Then 

SubmitDate = lstMonth.SelectedItem.Value & _

“/” & lstDay.SelectedItem.Text & _

“/” & lstYear.SelectedItem.Text

If DisplayDate <> “” or SubmitDate <> “” Then

Dim dDisplayDate As String

if DisplayDate <> “” then dDisplayDate = CDate(DisplayDate)

if SubmitDate <> “” then dDisplayDate = CDate(SubmitDate)

lstDay.SelectedIndex = Microsoft.VisualBasic.Day(dDisplayDate) - 1

lstMonth.SelectedIndex = Microsoft.VisualBasic.Month(dDisplayDate) - 1

lstYear.SelectedIndex = Microsoft.VisualBasic.Year(dDisplayDate) - 2001

End If End Sub

End Class

The first three lines import the namespaces that are required for this control to work. Since this control does have a user interface (the drop-down lists), it needs to include those as well. The next line defines the class as
“PCQCalendar”.

Remember this is the class name as used by the front-end as well, and it inherits functionality from the base UserControl class.

Now comes the actual code of the class. All that is done here is to create a shadow variable of each item in the UI so that you can access the values in them directly. We then define two parameter variables that can be used to set the date displayed and retrieve the set date from the control. Finally, we create an event handler that runs every time a page containing this control loads up. In this subroutine, we concatenate the values of the variables and put it in the SubmitDate variable. And the last part of the routine checks whether there was a value in the DisplayDate or the SubmitDate parameter and if there was, sets the values of the drop-down boxes to the day, month and year that were passed as a parameter or set as through submission.

All this is fine, but how do you use this on a page? This is where the simplicity of ASP.Net and Web controls comes in. To use the control, simply copy the UserControl.ASCX and UserControl.VB files into a directory on the server. Now, in an ASP.Net file that you want to use the control, you simply need to “register” the control for that page using a line similar to the following.

<%@ Register TagPrefix=”PCQ” TagName=”Cal” Src=”UserControl.ascx” %>

Now you can start using the control as if it were part of the .Net framework itself. That is, to create an instance of the date control, all you need to do is use a single line like the following.

<%@ Register TagPrefix=”PCQ” TagName=”Cal” Src=”Usercontrol.ascx” %>

This page defines 2 date fields called Cal1 and Cal2. The initial dates for these are set as “1/10/2002” and “9/11/2001”, respectively. As you can see in the screenshot, the initial dates appear correctly by default. When you select a different date and submit the form by clicking the button, the dates submitted show up correctly, too. Not only that, but the values in the drop-down list also remain what was selected and neither the default nor the initial display date set is shown. As you can see in the code, the only thing required to retrieve a value from one of the controls is just calling the SubmitDate property as in Cal1.SubmitDate. 

You can use the control anywhere and extend is as you like it. If you enable databinding on this control (more about this in a later article) you can even put it into a data bound control and have it bind to a particular field in a database to pull in values automatically. Take a look at the second screenshot to see a view of editing news items with the date in the control being pulled in automatically.

As you’ve seen, creating and using your own set of Web controls is an easy and simple thing to do. You can do a lot of things with Web controls and having easy to plug in pieces of functionality makes you a better and faster developer. We will take a look at Databound controls with emphasis on the DataGrid control next time.

Vinod Unny