Customizing and Managing Your Site's Appearance / Part 3 - Page 3
Customizing and Managing Your Site's Appearance - Part 3 [con't]
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
Walkthroughs 6.3 and 6.4 demonstrate how to create and then use a simple user control.
Walkthrough 6.3 Creating a User Control
Use the Website ν Add New Item menu option in Visual Studio, or right-click the project in Solution Explorer and choose Add New Item.
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
Controldirective. 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.
Change the user control so that it has the following content.
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:
- Indicate that you want to use a user control via the
Registerdirective, as shown in the following.
After registering the user control, place the user control tag in the markup just as you would with any Web server control (including the
Idproperties). For instance, if you had the user control specified in step 1, the following markup adds this control.
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
Core Note: As an alternative to manually entering these two steps, you can also simply drag-and-drop the user control onto your page while it is in Design view in Visual Studio.
Walkthrough 6.4 Using a User Control
Create a new Web Form or edit an existing Web Form. For instance, you could use the
Default.aspxpage from Listing 6.10.
Add the following
Registerdirective to the page.
In a sensible spot, add the following markup to the page. If you are using the
Default.aspxpage from Listing 6.10, replace the markup in the first
Contentcontrol with the following.
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
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
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.
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
The solutions to the following exercises can be found at my Web site, http://www.randyconnolly.com/core. Additional exercises only available for teachers and instructors are also available from this site.
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
Styleclass as a data member, whereas event handlers simply modify this instance and apply it to the controls.
Create a new theme to be used by the
ThemeTester.aspxexample from Listing 6.3.
Create a master page named
ThreeColumns.masterthat contains a header, three content columns, and a footer. The three columns should each contain a
Contentcontrol. Create a demonstration page that uses this master.
Create a user control named
ThemeSelector.ascxthat 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.
- Master pages
- Named collection
- Named skins
- Session state
- User controls
- Allen, Scott. "Master Pages in ASP.NET." http://odetocode.com.
- Allen, Scott. "Themes in ASP.NET." http://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..