Creating Custom Web Controls

There are many controls in Microsoft Visual Studio 2005 that certainly save you lots of development time, but there are always opportunities for you to build your own controls to save even more development time. Many business problems require custom controls to simplify the development solution. Custom controls are typically required to obtain different functionality, new functionality, or the combined functionality of several controls. This chapter covers the types of custom controls that you can create in ASP.NET 2.0.

Custom Web Control Types

There are three primary custom control types that will be covered in this chapter: user controls, custom Web controls, and composite controls. The following is a description of these controls: 1.user control A user control is a template control that provides extra behavior to allow constituent (individual) controls to be added to the user control in the Graphical User Interface (GUI) designer. These controls are added to the user control’s template file, the .ascx file. The .ascx file is similar to the Web page’s .aspx file and can have a code-behind page. To enable reuse, the .ascx and code-behind files must be included in each project that requires the user control.

2.custom Web control A custom Web control is a control that inherits from a Web control, where you either write all of the code to render the control, or inherit it from an existing Web control and provide extra behavior as necessary. The class file can be compiled to a .dll that can be shared among applications and can optionally be installed in the global assembly cache (GAC). 3.composite control A composite control is a custom Web control that can contain constituent controls; the constituent controls are added to the composite control via code to the class file that defines the control. The class file can be compiled to a .dll that can be shared among applications and can optionally be installed in the GAC.

Working with User Controls

Creating a User Control
User controls have a standard naming convention, which uses an .ascx extension to ensure that the control is not executed in a stand-alone fashion. You can create a user control in Visual Studio 2005 by choosing Website, Add New Item, Web User Control. On the surface, it appears that a new Web page was added. However, a quick glance at the HTML reveals a Control directive instead of a Page directive, as follows:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MyControl.ascx.vb" Inherits="MyControl" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="MyControl" %>

All text and controls that are added to this user control are rendered on the page that the control is added to. For example, a Label called lblName and a TextBox called txt-Name are placed on the user control, as shown below, and the user control can be added to any Web page where required.

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MyControl.ascx.vb" Inherits="MyControl" %>

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="MyControl" %>

Creating a User Control from a Web Page
In addition to explicitly creating a user control, you can also convert a Web page to a user control. The primary benefit is that you can do your prototyping and testing without having to deal with placing the control on a Web page.
The procedure for converting a Web page to a user control is as follows:
Remove the HEAD ,BODY ,FORM and begin and end tags.
Change the @Page directive at the top of the file to an @Control directive.
Change the file extension of your Web page from .aspx to.ascx.
In the @Control directive, change Inherits="System.Web.UI.Page" to Inherits="System.Web.UI.UserControl".

Adding a User Control to a Page
You can add a user control to a Web page by simply dragging it from the Solution Explorer and dropping it on a Web page. When you add the user control to the page, a look at the HTML reveals the following additions to the page:

Notice the @Register directive at the top of the page. This is a requirement to place the controls on the page. The TagPrefix attribute is a namespace identifier for the control. The default TagPrefix is uc1 (as in User Control 1) and is changeable. The TagName attribute is the name of the control to use. The Src attribute is the location of the user control. The instance of MyControl is in the form tag. Notice that the ID is automatically created as MyControl1, the next instance will be called MyControl2, and so on.
Accessing Data from the User Control
If this user control is placed on a Web page, the TextBox and Label are visible to the user, but how can the name be retrieved? The TextBox and Label controls are declared as protected members on the Web page, which means that they are accessible only to the MyControl class and to classes that inherit from the control. To access the data for the Label and TextBox, you could expose the properties that are required, such as the Text property of the txtName TextBox and the Text property of the lblName Label. The user control is a class and can contain properties and methods. You can add properties to the user controls called UserName and UserCaption, as follows:

//C#
using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;
public partial class MyControl : System.Web.UI.UserControl
{

public string UserCaption

{
get { return lblName.Text; } set { lblName.Text = value; }

}
public string UserName
{ get { return txtName.Text; } set { txtName.Text = value; }
}

}

Code-Behind
//C#
using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;
public partial class MyControlPropertyTest : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)

{
MyControl1.UserCaption = "Enter User Name:";
}

protected void Button1_Click(object sender, EventArgs e)

{
Label1.Text = MyControl1.UserName;

}

}