Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition

Web User Controls

As you build real-world projects, you’ll frequently encounter pieces of the user

interface that appear in multiple places—headers or footers, navigation links, and

login boxes are just a few examples. Packaging their forms and behaviors into

your own controls will allow you to reuse these components just as you can reuse

ASP.NET’s built-in controls.

Building your own web server controls involves writing advanced VB or C# code,

and is not within the scope of this book, but it’s good to know that it’s possible.

Creating customized web server controls makes sense when you need to build

more complex controls that provide a high level of control and performance, or

you want to create controls that can be integrated easily into many projects.

Those of us without advanced coding skills can develop our own controls by

creating web user controls. These are also powerful and reusable within a given

project; they can expose properties, events, and methods, just like other controls;

and they’re easy to implement.

A web user control is represented by a class that inherits from

System.Web.UI.UserControl, and contains the basic functionality that you need

to extend to create your own controls. The main drawback to using web user

controls is that they’re tightly integrated into the projects in which they’re imple-

mented. As such, it’s more difficult to distribute them, or include them in other

projects, than it is to distribute or reuse web server controls.

Web user controls are implemented very much like normal web forms—they’re

comprised of other controls, HTML markup, and server-side code. The file exten-

sion of a web user control is .ascx.

Creating a Web User Control

Let’s get a feel for web user controls by stepping through a simple example. Let’s

say that in your web site, you have many forms consisting of pairs of Label and

TextBox controls, like the one shown in Figure 4.10.

All the labels must have a fixed width of 100 pixels, and the text boxes must accept

a maximum of 20 characters.

Rather than adding many labels and text boxes to the form, and then having to

set all their properties, let’s make life easier by building a web user control that

126

Chapter 4: Constructing ASP.NET Web Pages

Figure 4.10. A simple form

includes a Label of the specified width, and a TextBox that accepts 20 characters;

you’ll then be able to reuse the web user control wherever it’s needed in your

project.

In your Learning folder, create a new file named SmartBox.ascx. Then, add the

control’s constituent controls—a Label control and a TextBox control—as shown

below:

File: SmartBox.ascx (excerpt)

<p>

<asp:Label ID="myLabel" runat="server" Text="" Width="100" />

<asp:TextBox ID="myTextBox" runat="server" Text="" Width="200"

MaxLength="20" />

</p>

Label Widths in Firefox

Unfortunately, setting the Width property of the Label control doesn’t

guarantee that the label will appear at that width in all browsers. The current

version of Firefox, for example, will not display the above label in the way

it appears in Internet Explorer.

To get around this, you should use a CSS style sheet and the CssClass

property, which we’ll take a look at later in this chapter.

In Chapter 3 we discussed properties briefly, but we didn’t explain how you could

create your own properties within your own classes. So far, you’ve worked with

127

Creating a Web User Control

many properties of the built-in controls. For example, you’ve seen a lot of code

that sets the Text property of the Label control.

As a web user control is a class, it can also have methods, properties, and so on.

Our SmartBox control extends the base System.Web.UI.UserControl class by

adding two properties:

❑

LabelText is a write-only property that allows the forms using the control to

set the control’s label text.

❑

Text is a read-only property that returns the text typed by the user in the text

box.

Let’s add a server-side script element that will give our control two properties

— one called Text, for the text in the TextBox, and one called LabelText, for

the text in the Label:

Visual Basic File: SmartBox.ascx (excerpt)

<script runat="server" language="VB">

Public WriteOnly Property LabelText() As String

Set(ByVal value As String)

myLabel.Text = value

End Set

End Property

Public ReadOnly Property Text() As String

Get

Text = myTextBox.Text

End Get

End Property

</script>

C# File: SmartBox.ascx (excerpt)

<script runat="server" language="C#">

public string LabelText

{

set

{

myLabel.Text = value;

}

}

public string Text

{

get

{

128

Chapter 4: Constructing ASP.NET Web Pages