Customizing and Managing Your Site's Appearance / Part 3 - Page 3

[previous]

Customizing and Managing Your Site's Appearance - Part 3 [con't]

User Controls

The previous section examined the powerful master page mechanism in ASP.NET. A master page allows the developer to define the structural layout for multiple Web Forms in a separate file and then apply this layout across multiple Web Forms. You can thus move common layout elements out of all the individual pages and into a single master page. As a consequence, the master page feature is a powerful mechanism for reducing code-behind and markup duplication across a Web application.

Yet, it still is possible, even when using a master page, for presentation-level (i.e., user interface) duplication to exist in a site. For instance, consider the page shown back in Figure 6.16. In this example, the feature book box is displayed only on the home page. But imagine that you want this box to appear on several other pages, but not on every page (if it was to appear on every page, you would place it in the master page). Your inner programmer should shirk at the idea of simply copying and pasting the markup and code for implementing this featured book box to multiple pages. Although such a solution is easy in the short term, maintaining this type of approach in the long run is a real headache; every time you have to make a change to this box, you have to change it in multiple places.

User controls are the preferred ASP.NET solution to this type of presentation- level duplication. They provide a cleaner approach to user interface reuse then copying and pasting or using the server-side includes of classic ASP. In addition, user controls in ASP.NET are very simple to create and then use. As well, they follow the same familiar development model as regular Web Forms.

Creating and Using User Controls

User controls are created in a manner similar to Web Forms. As with Web Forms, a user control can contain markup as well as programming logic. Also like Web Forms, the programming for a user control can be contained within the same file as the markup, or contained within a separate code-behind file. After a user control is defined, it can then be used in Web Forms, master pages, or even other user controls.

The markup for a user control is contained in a text file with the .ascx extension. This file can contain any necessary programming logic within embedded code declaration block (i.e., within tags) embedded within this .ascx user control file. Alternately, the programming code can be contained in a code-behind class for the user control. However, the code-behind class for a user control inherits from the UserControl class, rather than the Page class.

Walkthroughs 6.3 and 6.4 demonstrate how to create and then use a simple user control.

Walkthrough 6.3 Creating a User Control

1. Use the Website ν Add New Item menu option in Visual Studio, or right-click the project in Solution Explorer and choose Add New Item.

2. From the Add New Item dialog box, choose the Web User Control template and name the control FeatureBookControl.ascx. Click Add.

   Notice that a blank user control contains no content other than a Control directive. Unlike with a Web Form, there is no HTML skeleton with a user control. It is completely up to the developer to decide what markup should appear in the user control.

3. Change the user control so that it has the following content.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeatureBookControl.ascx.cs" Inherits="FeatureBookControl" %> <h2>Featured Book</h2> <h3>Core C# and .NET</h3> <asp:Image ID="imgBook" runat="server" CssClass="sideImage" ImageUrl="~/images/0131472275.gif" AlternateText="Cover image of Core C# book"/> <p> Core C# and .NET is the no-nonsense, example-rich guide to achieving exceptional results with C# 2.0 and .NET 2.0. Writing for experienced programmers, Stephen Perry presents today's best practices for leveraging both C# 2.0 language features and Microsoft's .NET 2.0 infrastructure. </p>

4. Save the control.

Now that you have created a user control, you can use it in a Web Form, master page, or other user control. To make use of a user control, you must follow two steps:

1. Indicate that you want to use a user control via the Register directive, as shown in the following.
<%@ Register TagPrefix="SomePrefix" TagName="SomeName" Src="someControl.ascx" %>

TagPrefix determines a unique namespace for the user control, which is necessary to differentiate multiple user controls with the same name. TagName is the unique name for the user control, whereas Src specifies the virtual path to the user control, such as MyControl.ascx or ~/Controls/MyControl.ascx.

2. After registering the user control, place the user control tag in the markup just as you would with any Web server control (including the runat="server" and Id properties). For instance, if you had the user control specified in step 1, the following markup adds this control.

   <SomePrefix:SomeName id="myUC1" runat="server" />

Walkthrough 6.4 Using a User Control

1. Create a new Web Form or edit an existing Web Form. For instance, you could use the Default.aspx page from Listing 6.10.

2. Add the following Register directive to the page.

<%@ Register Src="FeatureBookControl.ascx" TagName="FeatureBookControl" TagPrefix="uc" %>

3. In a sensible spot, add the following markup to the page. If you are using the Default.aspx page from Listing 6.10, replace the markup in the first Content control with the following.

<uc:FeatureBookControl ID="myFeaturedBook" runat="server" />

4. Save and test the page. The user control should be displayed in the page.

Adding Data and Behaviors to the User Control

In the user control created in Walkthrough 6.3, the information on the featured book was hardcoded. A more realistic version of this user control would interact with some type of business object or database. Thus, like most Web Forms, most user controls also include some type of programming logic.

You also may want to customize some aspect of the user control, so that it appears or behaves differently when used in different pages or controls. For instance, in the example Featured Book user control, it might be useful to specify the category of book you want to see in the control. You can easily add this type of customization to a control, by adding public properties to the user control. These public properties can then be manipulated declaratively or programmatically by the containing page.

For instance, Listing 6.14 demonstrates the definition of a FeatureCategory property in the code-behind class for the FeatureBookControl user control. The Page_Load in this simplified example modifies the output of the control based on the value of this property.

Listing 6.14 FeatureBookControl.ascx.cs

public partial class FeatureBookControl : System.Web.UI.UserControl { // Data member for feature category property public string _category; protected void Page_Load(object sender, EventArgs e) { // Real-world example would use category values and content // from a database or business object. Here you // simply hardcode the values imgBook.ImageUrl = "~/images/"; if (FeatureCategory == "Programming") { labTitle.Text = "Framework Design Guidelines"; imgBook.ImageUrl += "0321246756.gif"; labDescription.Text = "This book can improve _"; } else { labTitle.Text = "Core C# and .NET"; imgBook.ImageUrl += "0131472275.gif"; labDescription.Text = "Core C# and .NET is the _"; } imgBook.AlternateText = "Cover image of " + labTitle.Text; } public string FeatureCategory { get { return _category; } set { _category = value; } } }

This code-behind class assumes that the markup for the FeatureBookControl user control has been modified, as shown in Listing 6.15.

Listing 6.15 FeatureBookControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeatureBookControl.ascx.cs" Inherits="FeatureBookControl" %> <h2>Featured Book</h2> <h3><asp:Label ID="labTitle" runat="server" /></h3> <asp:Image ID="imgBook" runat="server" CssClass="sideImage" /> <p> <asp:Label ID="labDescription" runat="server" /> </p>

This public property in the user control can now be used wherever you use this user control. For instance, the following example illustrates one way that this property could be used.

<uc:FeatureBookControl ID="myFeaturedBook" runat="server" FeatureCategory="Programming" />

Summary

This chapter examined the different ways to customize the visual appearance of your Web application in ASP.NET 2.0. It began with the simplest, namely the common appearance properties that are available for most server controls. These properties allow you to control colors, borders, and text formatting. Although these properties are very useful for customizing the appearance of your Web output, they do not contain the full formatting power of Cascading Style Sheets. Luckily, ASP.NET server controls fully support styles via the CssClass and the Style properties. I recommended that you minimize the amount of appearance formatting in your server controls as much as possible, and instead externalize appearance settings in your CSS files. The benefit to this approach is that your Web Form's markup becomes simpler, easier to modify, and scales better to different devices.

The chapter also covered two important features of ASP.NET 2.0: themes and master pages. Themes provide a way to customize the appearance of Web server controls on a site-wide basis. Themes can still be integrated with CSS; doing so allows the developer to completely separate style from content. The master pages mechanism provides a much sought-after templating technique to ASP.NET. With master pages, elements that are common throughout a site, such as headers, footers, navigation elements, and the basic site layout itself, can be removed from Web Forms and placed instead within a master page. This significantly simplifies the Web Forms within a site, making the site as a whole easier to create and maintain.

The brief final section in the chapter covered user controls. These are an essential part of most real-world Web sites. User controls provide a consistent, object-oriented approach to user interface reuse in ASP.NET.

The next chapter covers another vital part of your Web site's appearance, its navigation system. It examines how you can programmatically move from page to page as well as the new controls in ASP.NET 2.0 devoted to navigation: the Menu, Tree, and SiteMap controls.

Exercises

The solutions to the following exercises can be found at my Web site, https://www.randyconnolly.com/core. Additional exercises only available for teachers and instructors are also available from this site.

1. Create a page named PropertyTester.aspx. This page should allow the user to dynamically change various appearance properties of some sample controls on the page, as shown in Figure 6.18. Ideally, the code-behind class uses an instance of the Style class as a data member, whereas event handlers simply modify this instance and apply it to the controls.

2. Create a new theme to be used by the ThemeTester.aspx example from Listing 6.3.

3. Create a master page named ThreeColumns.master that contains a header, three content columns, and a footer. The three columns should each contain a Content control. Create a demonstration page that uses this master.

4. Create a user control named ThemeSelector.ascx that allows the user to change the theme used on the page. This control should only display themes that exist. Create a demonstration page that uses this user control.

Key Concepts

• Master pages
• Named collection
• Named skins
• Session state
• Skins
• Themes
• User controls

References

• Allen, Scott. "Master Pages in ASP.NET." https://odetocode.com.
• Allen, Scott. "Themes in ASP.NET." https://odetocode.com.
• Murkoth, Jeevan C. "Master Pages in ASP.NET 2.0." dotnetdevelopersjournal.com (December 2004).
• Onion, Fritz. "Master Your Site Design with Visual Inheritance and Page Templates." MSDN Magazine (June 2004).
• Winstanley, Phil. "Skin Treatment: Exploiting ASP.NET 2.0 Themes." asp.netPro Magazine (October 2005).

Printed with permission from from the book Core Internet Application Development with ASP.NET 2.0 written by Randy Connolly. ISBN 0321419502 • Copyright © 2007 Prentice Hall..

Digg This Add to del.icio.us

[previous]

URL: