Creating and Using Web User Controls

You can think of a Web user control as a chunk of your application's user interface with the processing logic packaged in such a way that it can be used as a pluggable component for easy reuse.

A Web user control, similar to an ASP.NET Web form, can be encapsulated in text files (with the file extension .ascx ) and can optionally include the programming logic in the code-behind file. Visual Studio .NET creates a Web user control ( .ascx ) with a code-behind file ( .ascx.cs ) that is precompiled. Just like ASPX files, ASCX files are also compiled when they are first requested .

Web user controls inherit from the System.Web.UI.UserControl class, which inherits from the System.Web.UI.TemplateControl and System.Web.UI.Control base classes.

Creating a Web User Control

The process of creating a Web user control is very similar to the process of creating a Web form. Follow these steps to create a Web user control:

Open Visual Studio .NET and create a new blank solution named 315C08 at c:\inetpub\ wwwroot \ExamCram . (You might need to change the directory based on your configuration.)
Add a new Visual C# ASP.NET Web Application project at the following location: http://localhost/ExamCram/315C08/Example8_1 .
Select Project, Add Web User Control; then name the new Web user control SearchControl.ascx .
Add a Panel control ( pnlSearch ), a Label control, a Textbox control ( txtSearch ), a Button control ( btnSearch ), and two RadioButton controls ( rbSite and rbWWW ) to the Web user control. Set the Visible property of the radio button controls to false and the GroupName property to SearchOption . Arrange the controls as shown in Figure 8.1.

Figure 8.1. Similar to a Web form, you can design a Web user control by dragging and dropping controls from the Visual Studio .NET toolbox.

Switch to Code view for the SearchControl.ascx Web user control and add the following code to the class definition:

 // indicate whether the radio buttons should be displayed. private bool showSearchOption=false; // Web site name to be displayed in the rbSite radio button public string WebSite {     get{         return rbSite.Text;     }     set{         rbSite.Text = value;     } } // Back color of the search control public Color BackColor {     get{         return pnlSearch.BackColor;     }     set{         pnlSearch.BackColor = value;     } } // Whether the search option radio buttons should be displayed public bool ShowSearchOption {     get{         return showSearchOption;     }     set{         showSearchOption = value;         rbSite.Visible = showSearchOption;         rbWWW.Visible = showSearchOption;     } }

Add the following code to the Click event handler of the btnSearch control:

 private void btnGo_Click(object sender, System.EventArgs e) {     if(!showSearchOption  rbWWW.Checked)     {         // Use Google to search the Web         Response.Redirect("http://www.google.com/search?q="             + txtSearch.Text);     }     else     {         // Use Google to search a Web site         Response.Redirect("http://www.google.com/search?q="             + txtSearch.Text + " site:" + rbSite.Text);     } }

Drag SearchControl.ascx from Solution Explorer and drop it on the Web form.

Switch to the HTML view of the Web form. Alter the tag for SearchControl1 as follows :

 <uc1:SearchControl id="SearchControl1" BackColor="Beige"     ShowSearchOption="true" WebSite="www.TechContent.com"     runat="server"></uc1:SearchControl>

Run the project, enter a string to search, and click the Go button. The code in the button's Click event handler is executed and the browser is redirected to the Google Web site with the search mentioned.

When you switch to the HTML view of the Web form after dragging the Web user control, notice that a Register directive is added to the Web form:

 <%@ Register TagPrefix="uc1" TagName="SearchControl"     src="SearchControl.ascx" %>

The Register directive registers a Web user control within an ASP.NET Web form and adds the following three attributes:

TagPrefix This attribute provides an alias to a namespace to which the user control belongs.
TagName This attribute provides an alias to the user control.
Src This attribute specifies the path to the user control (the .ascx file).

The user control is then added to the Web form using the TagPrefix:TagName element.

The following are a few points you should be aware of when creating Web user controls:

Web user controls should be created with the file extension .ascx , and they inherit directly or indirectly from the System.Web.UI.UserControl class.
Web user controls can specify user control related attributes in the Control directive, which can then be used by the ASP.NET compiler when the user control (ASCX file) is compiled.
Web user controls cannot be independently requested from a Web server; they need to be hosted on a Web form.
The Web user control's Load and PreRender events are fired only after the Web form's Load and PreRender events are fired, respectively.
You should not use elements such as <html> , <body> , and <form> in a user control because these elements are already present in the Web form and can cause nesting problems.
Every application that wants to use a user control should have its own copy of that user control.
User controls can be dragged and dropped into a Web form of the same application from Solution Explorer, but they cannot be added in the Visual C# .NET toolbox.
Web user controls do not expose their properties through the Properties window.

Loading Web User Controls Programmatically

Web user controls can be loaded programmatically in a Web form using the Page.LoadControl() method. The following steps show you how to load a user control programmatically and set its properties:

Open the SearchControl.ascx Web user control in the HTML view and add a ClassName="SearchControl" attribute to the Control directive, as shown here:

 <%@ Control ClassName="SearchControl" Language="c#"      AutoEventWireup="false" Codebehind="SearchControl.ascx.cs"      Inherits="Example8_1.SearchControl"      TargetSchema= "http://schemas.microsoft.com/intellisense/ie5"%>

Add a Web form ( WebForm2 ) to the project. Switch to the HTML view of the Web form and add a Reference directive to indicate that ASP.NET should dynamically compile and link the user control with the current page, like so:
```
 <%@ Reference Control = "SearchControl.ascx" %> 
```
Add a PlaceHolder control ( phSearch ) to the Web form.

Add the following code in the Page_Load() event handler:

 private void Page_Load(object sender, System.EventArgs e) {     // Load the user control     Control c = Page.LoadControl("SearchControl.ascx");     // Typecast the user control and set its properties     ((SearchControl)c).BackColor = Color.Beige;     ((SearchControl)c).ShowSearchOption = false;     // Add the user control to the placeholder     phSearch.Controls.Add(c); }

Set the Web form as the start page for the project and run the project. The page displays the user control without search options and with a beige background color. Enter a string for which to search and click the Go button. The code in the button's Click event handler will run and redirect your browser to the Google Web site with the search mentioned.

A Web user control is available only to the project in which it is contained. To reuse a Web user control in another project, you must copy the ASCX and associated CS files to the new project.

Creating and Using Web User Controls