A
Web User control enables you to build a new control from existing controls. By taking advantage of User controls, you can easily extend
the ASP.NET Framework with your own custom controls. Imagine, for
example, that you need to display the same address form in multiple
pages in a web application. The address form consists of several TextBox
and Validation controls for entering address information. If you want
to avoid declaring all the TextBox and Validation controls in multiple
pages, you can wrap these controls inside a Web User control.
Creating User Controls
Let’s start by building a simple User control that randomly displays one image from a folder of images (see Figure). The code for the User control is contained
The
file in Listing 7.1 closely resembles a standard ASP.NET page. Like a
standard ASP.NET page, the User control contains a Page_Load() event
handler. Also, the User control contains standard controls such as the
ASP.NET Image and Label controls.
User
controls are closely related to ASP.NET pages. Both the UserControl
class and the Page class derive from the base TemplateControl class.
Because they derive from the same base class, they share many of the
same methods, properties, and events. The important difference between
an ASP.NET page and a User control is that a User control is something
you can declare in an ASP.NET page. When you build a User control, you
are building a custom control.
Notice
that the file in Listing 7.1 ends with the .ascx extension. You cannot
request this file directly from a web browser. To use the RandomImage
User control, you must declare the control in an ASP.NET page. The page
in Listing 7.2 contains the RandomImage User control. When you open the
page, a random image is displayed.
Before
you can use a web User control in a page, you must register it. The
page in Listing 7.2 includes a <%@ Register %> directive that
contains the following three attributes:
. TagPrefix—Indicates the namespace that you want to associate with the User control for the current
page. You can use any string that you want.
. TagName—Indicates the name that you want to associate with the User contro
for the current page. You can use any string that you want.
. Src—Indicates the virtual path to the User control (the path to the .ascx file).
The RandomImage User control is declared in the body of the page. It looks like this:
<user:RandomImage ID=”RandomImage1” Runat=”Server” />
Notice that
the declaration of the User control uses the TagPrefix and TagName
specified in the <%@ Register %> directive. Furthermore, notice
that you provide a User control with both an ID and a Runat attribute,
just as you would for any standard ASP.NET control.
Registering User Controls in the Web Configuration File
As
an alternative to registering a User control in each page in which you
need to use it by using the <%@ Register %> directive, you can
register a User control once for an entire application. You can register
a User control in an application’s web configuration file.
For example, the web configuration file in Listing 7.3 registers the RandomImage control for the application.
After
you register a User control in the web configuration file, you can
simply declare the User control in any page. For example, the page in
Listing 7.4 contains an instance of the RandomImage User control, but it
does not include the <%@ Register %> directive.
Exposing Properties from a User Control
The
RandomImage User control always displays an image from the Images
folder. It would be nice if you could specify the name of the folder
that contains the images so that you could use different folder paths
in different applications. You can do this by exposing a property from
the RandomImage User control.
Exposing Events from a User Control
You
can expose custom events from a User control. After you expose the
event, you can handle the event in the page that contains the User
control. Exposing events is useful when you need to pass information up
to the containing page. Imagine, for example, that you want to create a
custom tab strip with a User control. When a user clicks a tab, you
want to change the content displayed in the page
AJAX and User Controls
Ajax
(Asynchronous JavaScript and XML) enables you to update content in a
page without posting the page back to the server. Behind the scenes,
AJAX uses the XMLHttp ActiveX component (in the case of Microsoft
Internet Explorer 6.0) or the XMLHttpRequest intrinsic browser object
(in the case of other browsers such as FireFox and Internet Explorer
7.0).
Dynamically Loading User Controls
You
can dynamically load a User control at runtime and display it in a
page. Imagine, for example, that you want to display different featured
products randomly on the home page of your website. However, you want to
display each featured product with a completely different layout. In
that case, you can create a separate User control for each product and
load one of the User controls randomly at runtime.
You
load a User control with the Page.LoadControl() method. This method
returns an instance of the Control class that you can add to a page.
Typically, you add the User control to a PlaceHolder control that you
have declared on the page.
Using the Reference Directive
When
you load a User control with the Page.LoadControl() method, the User
control is returned as an instance of the System.Web.UI.Control class.
This means that if the User control includes any custom properties, the
properties aren’t available when you dynamically load the User control.
If
you dynamically load a User control, then you need to cast the control
to the correct type before you can access any of the control’s custom
properties. To get a reference to a User control’s type, you must use
the <%@ Reference %> directive.
