How to create Custom Control

ASalamo alikom,

I recently have developed a simple ASP.NET custom control to use it in web pages.This control is small form which you can drag and drop it in Visual Studio .NET and customise it by changing its properties.

I would like to share this code with you and wants any ideas on how to extend it to a full form.

What is it for:

This is a custom control to use it in your page without coding at all.It is a form with text boxes.You can set its properties at design time.

What we need ?

-Our control must extends the calss System.Web.UI.WebControls.WebControl to allow it to render its appearance in browsers.

-It has 5 properties :

boxes is a string that represents the name of the text boxes.

headers is the names of the headers for each text box .

tableBorder is the border of our table becuase we need to put our form inside a table.

tableBackground is our table background.

table width is our table width.

We need to have a set and get mothods for each property so we can change or retrieve them.

Finally we need the method Render to render our html code which will be sent to the browser.This method is also used by Visual Studio .NEt to draw the control at design time.

Lets create the control

From Visual Studio.NET choose new project then select Web Control Library

VS.NET will open a new class with simple properties.

Try to add the properties as follows:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace WebControlLibrary2
{

   	/// 
	/// Summary description for WebCustomControl1.
	/// 
	[DefaultProperty("Text"),
		ToolboxData("<{0}:WebCustomControl1 runat=server>{0}:WebCustomControl1>")]
	public class WebCustomControl1 : System.Web.UI.WebControls.WebControl
	{  
		private string boxes;  // names of textboxes
		private string headers; // cell headers
        private string tableBorder = "0";  //default table border
		private string tableBackground ="";  // default table background
		private string tablewidth = "300"; // default table width
		 // vs.net attributes
		[Bindable(true),
			Category("Appearance"),
			DefaultValue("")]

As you can see,all our properties are strings to simplify development .We gave tablewidth the default property the default value '300'.When you start using the control ,you will be able to change it from the property window in VS.NET

We also gave tableborder and tablebackground default values.

Now lets add get and set properties

//set and get 
		public string Boxes
		{
			get
			{
				return boxes;
			}

			set
			{
				boxes = value;
			}
		}

		public string Headers
		{
			get
			{
				return headers;
			}

			set
			{
				headers = value;
			}
		}
		public string TableBorder
		{
			get
			{
				return tableBorder;
			}

			set
			{
				tableBorder = value;
			}
		}
		public string TableBackground
		{
			get
			{
				return tableBackground;
			}

			set
			{
				tableBackground = value;
			}
		}

		public string Tablewidth
		{
			get
			{
				return tablewidth;
			}

			set
			{
				tablewidth = value;
			}
		}

This are simple methods to retrieve and edit our properties.

Now the important part,the Render method.This method is responsible for drawing our control at design and run time.So we need to write some html code and store it in a string.

protected override void Render(HtmlTextWriter output)
		{
			if(boxes == null)  // default value for the first text box
			{
				boxes = "value1";
			}
			if(headers == null) // default header for the first cell
			{
				headers = "Header 1";
			}

			string[] headers_ = headers.Split(new Char[] {','}); // get the header values set by Visual Studio .NET property editor ,or by developer
			string[] boxes_ = boxes.Split(new Char[] {','}); // get the textbox values set by Visual Studio .NET property editor ,or by developer
			string str_ = "

" + headers_ + "

"; // close table

output.Write(str_); //send the html to the browser
}

we first test and see if the boxes proerty is empty.If it is empty we add a default value so that VS.NET can draw our control at design time.

We do the same for the headers property.

We then insert html code for the table.

Now we get the boxes property and split it using comma delimiter to get the names of our text boxes.The same need to be done for the headers property.

The result is two array of strings.We go throught the boxes array and insert html code for each box.The TextBox name and id is the value at index i,and the header label is the value from headers at index i as well.

At the end we close the table tag and call the write method to write our html code to the browser.

Now compile your code.You will get a new DLL created under /bin/Debug

You will need this dll when you use the control in your web application.

Now create an ASP.NET application .Create an aspx page or use the default one.

From the toolbox right click on webform and choose 'customise toolbox' as described in the picture below:

you will get the 'customise toolbox' window.swtich to the .NET component tab.Click browse and locate your DLL.,select it and click OK.

Yuo will see that VS.NET has added your control to the toolbox on the left side.

Drag the control and drop it into your web page.

You will see that a form with one header 'Header1' and one textbox is inserted.

You will also find that VS.NET has added a reference to your control class on the right side.

How does it happen ?

As we said before ,we have given a default value to both the boxes and headers prperties and these are 'value1' and 'Header1'.These are the textbox name and Header name which are used by VS.NET to draw the control.If we left them empty we will not be able to see our control at design time.

Now try to change the control properties using Vs.NET property window.

change the headers property from 'Header1' to 'First Name, Last Name, Address'.This are the headers for each textbox.

Now change the boxes property from 'value1' to 'fn,ln,add'

.You will see that once you change the boxes property VS.NET draws the other rows of the table and textboxes together with their headers.

You can also change the table border and table background as they are both properties of our control.

Your control should look like this:

Save the changes and run your web page.

I hope you understood the importance of creating such controls becuase they are the most important part of ASP.NET application design.

I will be quite happy to receive any questions or ideas to improve this control and extend it.

Next time inshallh we will try to use dropdown lists ,checkboxes,radio buttons,and password boxes

We will also try to extend the control by binding it to the database so we can display data easily without the need to code data access code each time.

The full code source is available here :

http://www.geocities.com/amarelmam/WebCont...rolLibrary2.zip

Tahiyati

Madani