User Controls | Beginning Visual C#supAND#174;/sup 2005

If multiple Web controls that collaborate are used in several Web pages, you can create user controls. A user control has the file extension .ascx and contains parts of a form that can be included in several Web pages. Instead of creating the user interface and writing the code several times for every page where the same content is needed, the user control is just implemented once and used several times.

A user control can be added statically or dynamically to a Web page. Using the user control in a dynamic way, the controls shown can be changed during runtime.

A user control is represented by the Control directive in the first line of the source file. the CodeFile and Inherits attributes have the same usage as with the Page directive:

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

Normal HTML code that is part of a form follows the Control directive,. the <HTML> and <FORM> tags are not used within the user control, because the HTML code of the user control is embedded within a HTML form.

The user control can be added statically to the page as shown in the ASPX code sample. It is referenced with the Register directive. the Src attribute references the ASCX file of the user control, named DemoUserControl.ascx in this example. TagPrefix and TagName define the names of the control used within the page. TagPrefix is set to uc1 and TagName is set to DemoUserControl. That's why the control itself is referenced within the page using <uc1:DemoUserControl>. You can compare the uc1 prefix to the asp prefix that is used with ASP.NET Web server controls.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoPage.aspx.cs"      Inherits="DemoPage" %> <%@ Register TagPrefix="uc1" TagName="DemoUserControl"  src="/books/3/459/1/html/2/DemoUserControl.ascx" %>     <html xmlns="http://www.w3.org/1999/xhtml" > ... <uc1:DemoUserControl  runat="server" /> ...

Instead of declaring a user control statically, you can load it dynamically. To implement a dynamic user control, put a PlaceHolder control on the page. User controls can be added within the controls collection of the placeholder. the Page_Load event handler shown demonstrates loading the user control DemoUserControl.ascx with the LoadControl method of the Page class. The returned control is added to the Controls collection of the PlaceHolder control named PlaceHolder1. Using such a technique, different user controls can be loaded according to user settings based on post data or URL strings.

 void Page_Load(object sender, EventArgs e) { Control c1 = LoadControl("DemoUserControl.ascx"); PlaceHolder1.Controls.Add(c1); }

User controls can be created and used very easily. You can immediately create one by following the instructions in the next Try It Out. Here, a new custom user control is created that is used to show a calendar and countries for events in a drop-down list.

Try It Out – Create a User Control

Open the previously created Website.
Add a new user control by selecting the menu Website Add New Item, select the Web User Control template and name it ListEvents.ascx.
Add a table with two rows to the user control.
Use the designer to add a calendar control and a drop-down list to the user control, as shown in Figure 19-9. Name the calendar control EventCalendar and the drop-down list DropDownListCountries.

Figure 19-9
Set the AutoPostback property of the drop-down list to true. Fill the Items collection of the drop-down list with some countries.

Open the source file of the user control, ListEvents.ascx.cs. Add public method Configure(), as shown to initialize the elements of the user control. Public methods and properties can be invoked from the Web pages, using the control.

 public void Configure(DateTime date, params string[] countries) { DropDownListCountries.Items.Clear(); EventCalendar.SelectedDate = date; ListItem[] items = new ListItem[countries.Length]; for (int i = 0; i < countries.Length; i++) { items[i] = new ListItem(countries[i]); } DropDownListCountries.Items.AddRange(items); }

The user control can now be used from within Web pages.

In the next Try It Out, you create a Web page that displays the user control as its content.

Try It Out – Using a User Control

Create a new Web page UseMyControl.aspx.
Open the Web page in design view. Drag and drop the user control from the Solution Explorer to the design surface. The content of the user control immediately shows up in the designer. When you check the ASPX code, you will see the Register directive and the user control code that have been added.

Open the source code to add initialization code for the user control by invoking the public method created earlier.

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostback) { ListEvents1.Configure(DateTime.Today, "Italy",  "France", "Germany", "Spain"); } }

Now you can start the Web page. The calendar shows today's date selected, and the drop-down list has the list of countries available.