Building User Controls

User controls are essentially miniature versions of a standard ASP.NET Web Form. They have markup source that is converted into a partial class as well as underlying code that combines with the markup code to produce an executable unit of user interface very similar to a Web Form.

If you want to create a control that you can reuse multiple times throughout your application and you want to do it quickly, creating a user control is probably your best option. The only real downside to user controls is that they don't lend themselves to being reused among multiple projects. If you are creating a library of reusable controls that will be used by multiple applications or even by your own customers, you would be better served by using server controls (discussed in the next section).

To start with, create the most basic control: a control that displays "Hello World". Create a new ASP.NET application called ControlsDemo. Right-click the project and select Add New Item. Select Web User Control and call that control HelloWorld.ascx.

Set the source view of the page to the following code:

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

It's a pretty simple control. The Control tag looks very similar to the Page tag that you find on standard pages. You can configure various options such as content caching using this tag.

To use this control on a page, go to the design view of any page in your web application and simply drag HelloWorld.ascx from the Solution Explorer onto the design surface. Unlike previous versions of ASP.NET, version 2.0 does not require you to manually register the control, as dragging the file into the designer autogenerates the following control registration at the top of the file:

<%@ Register src="/books/1/237/1/html/2/HelloWorld.ascx" TagName="HelloWorld" TagPrefix="uc1" %> 


This only works when dragging onto the design surface. If you drag a control from the Solution Explorer into an HTML view, you will end up with a URL pointing to that file, and not the registered control reference.

You can change the tag's prefix if you like, but the control will appear on the .aspx page using the uc# prefix by default, as shown in the following line:

<uc1:HelloWorld  runat="server" /> 

When ASP.NET encounters a user control tag like the preceding one when rendering a page, it stops what it's doing and renders the user control in place. This operation is a nested operation, so if that user control contains further user controls, those will be rendered in their appropriate relative positions. When you run the page with your "Hello World" control on it, you get a fairly predictable output that is shown in Figure 30.1.

Figure 30.1. A simple user control.

Obviously you're going to want to create more than just a control that displays simple text. In this next sample, you'll create a user control that combines several child controls to create a reusable piece of UI functionality.

Start by adding a new web user control to the project called LabelledTextBox.ascx. Drag a Label and a TextBox into this control. The .ascx source should look something like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LabelledTextBox.ascx.cs" Inherits="LabelledTextBox" %> <asp:Label  runat="server" />&nbsp; <asp:TextBox  runat="server" /> 

Because the user control is just another class, you can expose properties on that class to control its behavior. For example, you can create properties on the user control that can be used to set properties on the Label and TextBox, as shown in the source for LabelledTextBox.ascx.cs:

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class LabelledTextBox : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { } public string LabelText {     get { return lblText.Text; }     set { lblText.Text = value; } } public string Text {     get { return txtText.Text; }     set { txtText.Text = value; } } } 

Properties on a custom ASP.NET control can be set programmatically or they can be set declaratively in the markup. The ASP.NET engine will take all declarative property assignments and try to match them to properties on the underlying class. Take a look at the following code that sets the Text and LabelText properties of the user control:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register src="/books/1/237/1/html/2/LabelledTextBox.ascx" TagName="LabelledTextBox" TagPrefix="uc2" %> <%@ Register src="/books/1/237/1/html/2/HelloWorld.ascx" TagName="HelloWorld" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form  runat="server"> <div>     <uc1:HelloWorld  runat="server" />     <uc2:LabelledTextBox        LabelText="Favorite Color" Text="Blue" runat="server" /> </div> </form> </body> </html> 

You can also programmatically change property values on a web user control from within the code-behind (.cs file) for a page or parent control:

LabelledTextBox1.LabelText = "Enter your Favorite Color"; 

As mentioned earlier, an ASP.NET web user control functions exactly like a "mini" ASP.NET page, so you can leverage all of the skills you have developed for building ASP.NET pages and apply them to building ASP.NET web user controls.

Microsoft Visual C# 2005 Unleashed
Microsoft Visual C# 2005 Unleashed
ISBN: 0672327767
EAN: 2147483647
Year: 2004
Pages: 298 © 2008-2017.
If you may any questions please contact us: