Creating a Web User Control in C#

February 3, 2010 muthu ASP .Net Advanced 0

Web User control or the .ascx file in asp .net is a replacement for the include file feature in ASP. It actually is a positive evolution from the asp model. Classic asp had used .inc file and included it wherever we needed it. Though this model is also similar, Web User Controls have a lot of other features added along with them.

Web user controls are derived from System.Web.UI.UserControl namespace. These controls once created, can be added to the aspx page either at design time or programmatically during run time. But they lack the design time support of setting the properties created along with the control. They cannot run on their own and they need to stand on another platform like an aspx page. Even if we try to load it on a web browser, IIS will not serve the files of the type .ascx.

Creating a Web User Control:

  1. Create a new ASP .Net web application using Visual Studio .Net.
  2. Add a Web User Control to the project. Name it as SampleUserControl.ascx.
  3. Add a Panel Control on the user control form and name it as pnlSample.
  4. This Panel control is going to be used to hold our other controls.
  5. Add a TextBox as txtSearch and a Command button as cmdSearch. These will be used for entering a site search term and doing a search.
  6. Add a property to the User Control as follows. 
    protected Color backColor;
public Color BackColor
{
	get
	{
		return backColor;
	}

	set
	{
		backColor = value;
	}
}
  7. The above can be used set the Background color of the control. Add the following code to the Page_Load event of the control.
  8. private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
pnlSample.BackColor = backColor;
}
  9. Now Add another web form as TestPage.aspx.
  10. Drag and drop the SampleUserControl.ascx into the Web form. This will put the following entries in the aspx page.
  11. <%@ Register TagPrefix=”uc1″ TagName=”SampleUserControl” Src=”SampleUserControl.ascx” %>. This code registers the control with the current aspx page.
  12. <uc1:SampleUserControl id=”SampleUserControl1″ runat=”server”></uc1:SampleUserControl>. This entry will be found inside the <form> .. </form> tag.
  13. Build the application.
  14. Select and view the TestPage.aspx in the browser. This will show the aspx page with the control loaded with it.

Now if we need we can change the background color to Gray, by adding the property in the control as follows.

 
<uc1:SampleUserControl BackColor="Gray" id="SampleUserControl1" runat="server"></uc1:SampleUserControl>

Now if the application is built, the testpage.aspx will show our user control with a gray background.

Advantages of a Web User Control:

The biggest advantage of the Web User controls is that they can be created as a site template and used through out the site. For example they can be made to contain the Menu/Link structure of a site and can be used at all the other aspx pages.

This means the following :

  1. If the website introduces a new site-wide link within the current layout/structure, it is enough if we put it on the user control once. All pages will be updated once if the web user control is used in them.
  2. If there is any link to be corrected, it can be done once at the server side.
  3. The .ascx files can either be used as a simple alternative to the plain HTML or they can also be used to respond to events: This means even custom code can be created against them and put in the code behind files.

Drawbacks / Disadvantages:

Though the User controls offer a flexibility of having a site wide modifications, if the whole structure of the site changes, the HTML/aspx code of all the pages should be modified. But as long as the site maintains a same layout, then Web User controls are the number one choice for maintaining the generic layout of the site.

Another disadvantage is It can not be just be simply referenced for using in a different project. If we want to use this User Control in a different project, we have to copy the file and modify the namespace to the host namespace name.

Attachments:

Project Files : UserControlSample.zip