90 |
Saturday Morning |
Creating a User Control
Since User Controls will be included in other ASP.NET pages, you should not include <html> and <body> elements around the content. Additionally, User Controls that post events should not contain an HTML Form control. These elements should be placed in the containing page.
Start with a simple example, creating a custom address User Control.
The first thing you need to do is create the UI elements for the control. In your address control you have two textboxes for street address, one textbox for city, a dropdown list for state, and a textbox for Zip Code. Figure 10-1 illustrates what the User Control should look like.
Figure 10-1 Address User Control UI
Listing 10-1 shows the HTML that we’ll use to construct the address User Control UI.
Listing 10-1 User Control UI in HTML
<asp:Panel ID=”Address” runat=”server”> <asp:Table ID=AddressTable runat=”server”>
<asp:TableRow ID=Address1Row runat=”server”> <asp:TableCell ID=Address1Cell runat=”server”>
<asp:Label ID=Address1Label text=”Address 1” runat=”server”
/></BR>
<asp:Textbox ID=txtAddress1 columns=25 maxlength=50 runat=”server”
/>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID=Address2Row runat=”server”> <asp:TableCell ID=Address2Cell runat=”server”>
<asp:Label ID=Address2Label text=”Address 2” runat=”server”
/></BR>
<asp:Textbox ID=txtAddress2 columns=25 maxlength=50 runat=”server”
/>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID=CityRow runat=”server”> <asp:TableCell ID=CityCell runat=”server”>
<asp:Label ID=CityLabel text=”City” runat=”server” /></BR> <asp:Textbox ID=txtCity columns=25 maxlength=50 runat=”server” />
Session 10—Introducing User Controls |
91 |
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID=StateRow runat=”server”> <asp:TableCell ID=StateCell runat=”server”>
<asp:Label ID=StateLabel text=”State” runat=”server” /></BR> <asp:DropDownList ID=cmbState runat=”server”>
<asp:ListItem selected=true></asp:ListItem> <asp:ListItem value=2>California</asp:ListItem> <asp:ListItem value=3>Virginia</asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID=ZipCodeRow runat=”server”> <asp:TableCell ID=ZipCodeCell runat=”server”>
<asp:Label ID=ZipCodeLabel text=”Zip Code” runat=”server” /></BR> <asp:Textbox ID=txtZipCode columns=10 maxlength=5 runat=”server”
/>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID=SubmitRow runat=”server”>
<asp:TableCell ID=SubmitCell horizontalalign=center runat=”server”> <asp:Button ID=Submit text=”Submit” runat=”server” />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
If you inspect Listing 10-1 closely, you’ll notice that it is simply a collection of ASP.NET Web controls. So, now that we have the UI HTML written, how do we turn it into a simple User Control? Get this . . . instead of giving the file an .aspx extension, simply give an
.ascx extension and that’s it. You have your first User Control, albeit a very simple one. Go ahead and name your User Control file address.ascx.
Now that you have a User Control, you need to include it in an ASP.NET page. In order to do this, you must register the control with the page using the Register directive, which takes the following form:
<% @Register TagPrefix=”myControl” TagName=”Address” src=”address.ascx” %>
That’s pretty self-explanatory with the exception of the TagPrefix and TagName attributes. If you’ll recall from Session 9, “Using Web Controls,” when adding a Table Web control, for example, to an ASP.NET page, you use the following syntax:
<asp:Table . . .runat=”server” />
You can generalize this declaration using the following syntax:
<[TagPrefix]:[TagName] . . .runat=”server” />
So, when you add your Address control to an ASP.NET page, you would use the following syntax:
<myControl:Address . . . runat=”server”>
92 |
Saturday Morning |
The following code shows the address.aspx script that will contain the Address User Control:
<% @Page Language=”VB” %>
<% @Register TagPrefix=”myControl” TagName=”Address” src=”address.ascx” %> <HTML>
<HEAD>
<TITLE>User Control Example</TITLE> <STYLE>
BODY, TABLE, INPUT, SELECT {font-family:trebuchet; font-size:10pt} </STYLE>
</HEAD>
<BODY>
<FORM ID=frmAddress runat=”server”> <myControl:Address ID=AddressControl runat=”server” /> </FORM>
</BODY>
</HTML>
Adding User Control Properties
One of the things that make Web and HTML controls so useful is that they support properties, methods, and events against which you can program. Guess what? You can customize your User Control by adding your own custom properties, methods, and events to a User Control. Let’s start with a few properties.
For this example, you’ll be creating your properties using VB. In VB, the syntax for creating a property is
[Public|Private] Property [Name] As [Data Type]
Get
‘ Get Implementation Code
End Get
Set
‘ Set Implementation Code
End Set
End Property
Listing 10-2 shows the code for a property for each of our form elements: Address1,
Address2, City, StateID, and ZipCode.
Listing 10-2 Form element properties
<script language=”VB” runat=”server”> Private m_FontColor As System.Drawing.Color Private m_Counter As Integer
Public Property Address1 As String Get
Address1 = txtAddress1.text End Get
Set
Session 10—Introducing User Controls |
93 |
txtAddress1.text = value End Set
End Property
Public Property Address2 As String Get
Address2 = txtAddress2.text End Get
Set
txtAddress2.text = value End Set
End Property
Public Property City As String Get
City = txtCity.text End Get
Set
txtCity.text = value End Set
End Property
Public Property StateID As String Get
StateID = cmbState.Items(cmbState.SelectedIndex).Value End Get
Set
For m_Counter = 0 To (cmbState.Items.Count - 1)
If cmbState.Items(m_Counter).Value = value Then cmbState.SelectedIndex = m_Counter
End If
Next End Set
End Property
Public Property ZipCode As String Get
ZipCode = txtZipCode.text End Get
Set
txtZipCode.text = value End Set
End Property
Public Property FontColor As System.Drawing.Color Get
FontColor = m_FontColor
End Get Set
m_FontColor = value Address1Label.ForeColor = value Address2Label.ForeColor = value CityLabel.ForeColor = value StateLabel.ForeColor = value ZipCodeLabel.ForeColor = value
End Set
Continued