Microsoft Virtual Labs

ASP.NET 2.0 User Interface

Enhancements: Master Pages,
Themes, and Controls
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls

Table of Contents
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls ............. 1
Exercise 1 Create a Master Page ...................................................................................................................................2
Exercise 2 Theme the Web Site’s Pages........................................................................................................................5
Exercise 3 Add Multiple Views.....................................................................................................................................7
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls

ASP.NET 2.0 User Interface Enhancements:

Master Pages, Themes, and Controls
After completing this lab, you will be better able to:
Objectives ƒ Build a master page
ƒ Convert existing pages into content pages
ƒ Apply themes to a site
ƒ Use MultiView controls to implement multiple views
ƒ Interactively switch between views in MultiView controls
ƒ Use custom HTTP handlers to render images retrieved from a database

ASP.NET 2.0 provides a wide range of new features to simplify the development
Scenario of user interfaces, from master pages, themes, and skins to more than 50 new
controls designed to make short work of implementing common user interface
elements.

In this lab, you’ll get first-hand experience using these new features by giving the
MyComics application you started in Lab 2 a face-lift. First, you’ll add a master
page to the site. Next, you’ll theme the site using a custom theme. Finally, you’ll
use a MultiView control to offers users a choice of ways to view comic book
data, and you’ll combine DataList controls and custom HTTP handlers to
implement a new view of the comic database

Estimated Time to 60 Minutes

Complete This Lab

Page 1 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Exercise 1
Create a Master Page
Scenario
In this exercise, you’ll create a master page to serve Default.aspx, Details.aspx, Admin.aspx, and other pages that
will be added later. Then you’ll modify the existing pages by turning them into content pages.
Tasks
1. Enable database
caching.
2. Open the Web site.
3. Add a master page to
the site.
4. Define the layout of
the master page.
Detailed Steps
a. Click Start | All Programs | Microsoft Visual Studio 2005 | Visual Studio Tools
| Visual Studio 2005 Command Prompt.
b. Navigate to the C:\MSLabs\ASP.NET\LabFiles\Database directory.
c. Type CacheSetup.
d. Close the Visual Studio 2005 Command Prompt.
a. Click Start | All Programs | Microsoft Visual Studio 2005 | Microsoft Visual
Studio 2005.
b. Click File | Open Web Site and navigate to
C:\MSLabs\ASP.NET\Starter\<Language>\Lab3 and click Open.
Note: This lab supports either C# or VB languages.
c. In the Solution Explorer right-click C:\..\Lab3, select New Folder and name it
Images.
d. Right-click the Images folder and select Add Existing Item.
e. Navigate to C:\MSLabs\ASP.NET\LabFiles\Images select MyComics.gif and
click Add.
a. In the Solution Explorer right-click C:\..\Lab3 and select Add New Item.
b. In the Add New Item dialog select Master Page as the template type and name
the master page Site.master.
c. Ensure that C# or Visual Basic is selected in the Language box and that Place
code in separate file is checked and click Add.
d. In the Target Schema for Validation drop-down list on the toolbar select
Internet Explorer 6.0.
e. Click the Design button to switch to Design view.
a. Click Layout | Insert Table.
b. In the Insert Table dialog click the Template button, select Header, footer, and
side from the drop-down list and click OK.
c. Drag the ContentPlaceHolder control to the right-hand cell of the table’s second
row.
d. Place the cursor in that cell (not in the ContentPlaceHolder) and in the Properties
window set the VAlign property to top.
The ContentPlaceHolder control should snap to the top of the cell
e. Right-click the top row of the table and select Insert | Row Below from the
context menu.
f. Select the new row and in the Properties window set the Height property to 1 and
the BgColor property to Gray.
g. Right-click the bottom row of the table and select Insert | Row Above from the
Page 2 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
context menu.
h. Select the new row and in the Properties window set the Height property to 1 and
the BgColor property to Gray.
i. Right-click the cell to the left of the one that contains the ContentPlaceHolder
control and select Insert | Column to the Right.
j. Select the new cell and in the Properties window set the Width property to 1 and
the BgColor property to Gray.
k. Select the top row of the table and in the Properties window set the BgColor
property to #105070.
l. Put the cursor in the leftmost cell in the table’s middle row and in the Properties
window set the BgColor property to #ececec.
m. Select the bottom row of the table and in the Properties window set the BgColor
property to #ececec.
n. Click the Source button and manually modify the <body> tag to look like this:
<body topmargin=0 bottommargin=0 leftmargin=0
rightmargin=0>
o. Click the Design button to view the master page in Design view.
5. Add content to the a. From the Toolbox, under Standard, drag a HyperLink control and drop it into the
master page. top row of the table.
b. In the Properties window set the ImageUrl property to ~/Images/MyComics.gif
and the NavigateUrl property to ~/Default.aspx.
c. Select the top row of the table and in the Properties window set the Height
property to 1 so the height will adjust to fit the image.
d. Put the cursor in the leftmost cell in the middle row of the table and in the
Properties window set the Width property to 128.
e. Select the bottom row of the table and in the Properties window set the Height
property to 16.
f. Click the cursor in the bottom row, select 8pt from the Font Size drop-down and
Verdana from the Font Name drop-down.
g. Type If this page works, I built it. If it doesn’t work, I don’t know who built it.
6. Convert existing a. In Solution Explorer double-click Default.aspx and click the Source button.
pages into content b. In the Source view add a MasterPageFile=”~/Site.master” attribute to the @
pages. Page directive at the top of the page.
c. Remove the <!DOCTYPE>, <html>, <head>, <body>, <form>, and <div>
elements from the page.
d. Add an <asp:Content> element that encapsulates all of the page’s remaining
content:
<asp:Content ID=Content1
ContentPlaceHolderID=ContentPlaceHolder1 runat=server>
</asp:Content>
e. Add a Title=MyComics attribute to @ Page directive.
f. Repeat steps a through d for Details.aspx so that it, too, becomes a content page.
g. Repeat steps a through d for Admin.aspx so that it, too, becomes a content page.
h. In the Solution Explorer select Default.aspx and press Ctrl+F5 to launch it.
i. Verify that Default.aspx was successfully converted into a content page:
j. Click one of the Select buttons to display Details.aspx. Verify that it, too, was
successfully converted into a content page.

Page 3 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
k. Change the URL in browser’s address bar to point to Admin.aspx and verify that
it, too, is now a content page.
l. Close the browser and return to Visual Studio.
7. Refine Default.aspx. a. Open Default.aspx in the designer and switch to Design view.
b. Position the cursor underneath the GridView control and click Layout | Insert
Table.
c. In the Insert Table dialog, select the Header template and click OK.
d. Drag the existing SqlDataSource and DropDownList controls into the table’s top
row.
e. Drag the existing ObjectDataSource and GridView controls into the table’s
bottom row.
f. Delete any whitespace between the table’s top row and the top of the page so the
top of the table lines up with the top of the page.
g. Right-click the top row of the table and select Insert | Row Below.
h. Select the new row and in the Properties window set the Height property to 1 and
the BgColor property to Gray.
i. Select the top row and in the Properties window set the Height property to 32 and
the BgColor property to #ececec.
j. Insert a space or two to the left of the DropDownList to move it away from the
left border of the table cell.
k. Select the DropDownList and in the Properties window and expand Font, set the
Size property to 10 and the Name property to Verdana.
l. Select the GridView and in the Properties window and expand Font, set the Size
property to 10 and the Name property to Verdana.
m. Press Ctrl+F5 to launch Default.aspx in your browser and verify its appearance.
n. Close the browser and return to Visual Studio.
8. Refine Details.aspx. a. Open Details.aspx in Design view.
b. Select the DetailsView and in the Properties window and expand Font, set the
Size property to 10 and the Name property to Verdana.
9. Refine Admin.aspx. a. Open Admin.aspx in Design view.
b. Select the DetailsView and in the Properties window and expand Font, set the
Size property to 10 and the Name property to Verdana.

Page 4 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls

Exercise 2
Theme the Web Site’s Pages

Scenario
Theming is an easy-to-use mechanism for applying visual attributes en masse to controls. You can apply themes to
individual pages or to an entire site. In this exercise, you’ll apply a supplied theme to see the effect it has on the
site’s pages. Then you’ll customize the theme and use it to standardize MyComics’ look and feel.

Tasks Detailed Steps

1. Remove formatting
from the GridView.
2. Theme the page
BasicBlue.
3. Develop a theme of
your own.
a. Open Default.aspx in Design view.
b. Select the GridView control and click the small arrow in its upper right corner to
display the GridView Tasks menu.
c. Click Auto Format, select Remove Formatting and click OK.
d. Press Ctrl+F5 to run Default.aspx in your browser.
What does the GridView look like now?
e. Close the browser and return to Visual Studio.
a. In the Solution Explorer right-click C:\..\Lab3 and select Add ASP.NET Folder
| Theme.
b. Name the folder BasicBlue.
c. In the Solution Explorer right-click the BasicBlue folder and select Add Existing
Item.
d. Navigate to C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\BasicBlue.skin
and click Add.
e. In the Solution Explorer right-click BasicBlue and click New Folder.
f. Name the folder Images.
g. In Solution Explorer, under BasicBlue, right-click the Images folder and select
Add Existing Item.
h. Navigate to the C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\Images
folder, select all the files and click Add.
i. Open Default.aspx in Source view and add a Theme=”BasicBlue” attribute to the
@ Page directive.
j. In the Solution Explorer select Default.aspx and press Ctrl+F5. The page should
appear with alternating rows in the grid a different color.
k. Close the browser and return to Visual Studio.
a. In the Solution Explorer right-click the App_Themes folder and select Add
ASP.NET Folder | Theme.
b. Name the folder MyComics.
c. In the Solution Explorer right-click the MyComics folder and select Add
Existing Item.
d. Navigate to C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\BasicBlue.skin
and click Add.
e. Rename the file MyComics.skin.
f. In the Solution Explorer double-click MyComics.skin.
g. Click Edit | Find and Replace | Quick Replace and replace all occurrences of
#000066 with #105070.

Page 5 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
h. Now replace all occurrences of #eeeeee with lightyellow.
i. Close the Quick Replace and click File | Save All.
j. In the Solution Explorer right-click My Comics and select New Folder.
k. Name the folder Images.
l. In Solution Explorer right-click the Images folder and select Add Existing Item.
m. Navigate to the C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\Images
folder, select all the files and click Add.
n. Open Default.aspx in Source view.
o. Change the Theme attribute in the @ Page directive to Theme=”MyComics”.
p. In the Solution Explorer select Default.aspx and press Ctrl+F5 and note the
changes in the controls.
q. Close the browser and return to Visual Studio.
4. Theme all the site’s a. Open Default.aspx in Source view and remove the Theme attribute from the @
pages. Page directive.
b. Open Details.aspx in Design view.
c. Select the DetailsView control and click Auto Format in the DetailsView Tasks
menu.
d. Select Remove Formatting and click OK.
e. Open Admin.aspx in Design view.
f. Select the GridView control and click Auto Format in the DetailsView Tasks
menu.
g. Select Remove Formatting and click OK.
h. Repeat the previous steps to remove formatting from the DetailsView control.
i. In the Solution Explorer double-click Web.config.
j. Add the following statement to the <system.web> section of Web.config:
<pages theme=”MyComics” />
If working in VB, modify the existing <pages> tag.
k. Click File | Save All and close Web.config.
l. In the Solution Explorer select Default.aspx and press Ctrl+F5 and verify that it
is still themed MyComics.
m. Click one of the Select buttons to display Details.aspx. Verify that Details.aspx is
themed to match Default.aspx.
n. Change the URL in browser’s address bar to point to Admin.aspx and verify that
Admin.aspx is themed as well.
o. Close the browser and return to Visual Studio.

Page 6 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls

Exercise 3
Add Multiple Views

Scenario
In this exercise, you’ll add a MultiView control to Default.aspx and populate the MultiView with two views: one
that presents page content the way it’s presented now, and another that uses DataList controls to present page
content in a completely different way. The DataList will use a custom HTTP handler named ImageGrabber.ashx to
retrieve cover images from the database and render them to the page. You’ll also add buttons for switching between
the views.

Tasks Detailed Steps

1. Add a custom HTTP a. In the Solution Explorer right-click C:\..\Lab3 folder and select Add Existing
handler. Item
b. Navigate to C:\MSLabs\ASP.NET\LabFiles\Components\ImageGrabber.ashx
and click Add.
c. In the Solution Explorer double-click ImageGrabber.ashx and inspect the code
contained therein.
It contains a dynamically compiled HTTP handler that reads a comic book ID from a
query string and uses it to query the MyComics database for a comic book cover
image. To improve performance, it caches cover images in the ASP.NET application
cache, and it uses SqlCacheDependency objects to refresh cached cover images if the
images in the database change. In a moment, you’ll use ImageGrabber.ashx as the
target of ASP.NET Image controls to retrieve comic book cover images from the
database and display them.
2. Add a MultiView a. Open Default.aspx in Design view.
control to b. From the Toolbox, under Standard, drag a MultiView control and drop it onto the
Default.aspx. page immediately below the GridView1.
c. From the Toolbox, under Standard, drag a View control and drop it into the
MultiView. That view becomes View1.
d. Drag the GridView1 control on the page into View1.
Do not drag a new GridView onto the page. You are just moving the GridView to
View1.
e. Drag another View control from the Toolbox and drop it into the MultiView. That
view becomes View2.
f. Select MultiView and in the Properties window set the ActiveViewIndex
property to 0.
3. Add a DataList a. From the Toolbox, under Data, drag a DataList control and drop it into View2.
control to the b. Use the DataList Tasks menu to select ObjectDataSource1 from the Choose
MultiView. Data Source drop-down menu.
c. Switch to Source view and add the following <ItemTemplate> to the DataList.
Note the use of Image controls whose ImageUrl attributes point to
ImageGrabber.ashx to render images from the database, and the simplified data-
binding expressions that make HTML templates more readable:
C#
<ItemTemplate>
<table cellpadding=”4”>
<tr>

Page 7 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
<td width=”100”>
<asp:Image ID=”CoverImage”
ImageUrl='<%# “~/ImageGrabber.ashx?ComicID=” + Eval
(“ComicID”) %>'
Runat=”server” />
</td>
<td valign=”top” style=”font-family: Verdana; font-size:
10pt”>
<asp:Label ID=”ComicID” Text='<%# Eval (“ComicID”) %>'
Visible=”false” Runat=”server” />
<asp:LinkButton Text='<%# Eval (“Title”) + “&nbsp;”
+ Eval (“Number”) %>' Runat=”server” /><br />
<%# (bool) Eval (“CGC”) ? “CGC “ : “” %>
<%# Eval (“Grade”, “{0:f1}”) %>
</td>
</tr>
</table>
</ItemTemplate>
Visual Basic
<ItemTemplate>
<table cellpadding=”4”>
<tr>
<td width=”100”>
<asp:Image ID=”CoverImage”
ImageUrl='<%# “~/ImageGrabber.ashx?ComicID=” &
Eval(“ComicID”) %>'
Runat=”server” />
</td>
<td valign=”top” style=”font-family: Verdana; font-size:
10pt”>
<asp:Label ID=”ComicID” Text='<%# Eval(“ComicID”) %>'
Visible=”false” Runat=”server” />
<asp:LinkButton Text='<%# Eval(“Title”) & “&nbsp;” &
Eval(“Number”) %>'
Runat=”server” /><br />
<%#IIf(Eval(“CGC”), “CGC “, “”)%>
<%#Eval(“Grade”, “{0:f1}”) %>
</td>
</tr>
</table>
</ItemTemplate>
d. Switch back to Design view.
e. Select DataList and set the RepeatColumns property to 3 to divide the output into
3 columns.
f. Set the RepeatDirection property to Horizontal to organize items in row-first
(rather than column-first) order.
g. Set the CellPadding property to 8.
h. Set the EnableTheming property to False.
i. With the DataList selected in Design view, click the lightning bolt icon in the
Properties window to display DataList events.
j. Double-click ItemCommand to add an ItemCommand event handler to
Default.aspx.cs or Default.aspx.vb.

Page 8 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
k. Add the following statements to the body of the handler:
C#
Label label = (Label) e.Item.FindControl (“ComicID”);
Response.Redirect (“Details.aspx?ComicID=” + label.Text);
Visual Basic
Dim lbl As Label = _
CType(e.Item.FindControl(“ComicID”), Label)
Response.Redirect(“Details.aspx?ComicID=” & lbl.Text)
l. In the Solution Explorer select Default.aspx and press Ctrl+F5.
The page looks the same as it did before. In other words, the GridView is displayed,
not the DataList. Why?
m. Close the browser and return to Visual Studio.
n. Switch to the Design view of Default.aspx.
o. Select the MultiView control and in the Properties window click the Properties
button.
p. Set the ActiveViewIndex property to 1.
q. In the Solution Explorer select Default.aspx and press Ctrl+F5.
r. Click one of the comic book titles and verify that Details.aspx appears showing
details for that comic.
s. Close the browser and return to Visual Studio.
4. Add buttons for a. Select the MultiView control and in the Properties window set the
switching views. ActiveViewIndex property to 0.
b. From the Toolbox, under Standard, drag a Button control onto Default.aspx,
positioning it just right of the DropDownList control.
c. Add a few spaces to separate the DropDownList and the Button.
d. Select the Button1 control and in the Properties window set the following
property values:
Text = GridView
EnableTheming = False
Width = 100
e. From the Toolbox, under Standard, drag a Button control onto Default.aspx,
positioning it just right of the Button1 control.
f. Add a few spaces to separate Button1 and Button2.
g. Select the Button2 control and in the Properties window set the following
property values:
Text = DataList
EnableTheming = False
Width = 100
h. Double-click the GridView button to add a click handler. Add the following
statement to the body of the handler:
C#
MultiView1.ActiveViewIndex = 0;
Visual Basic
MultiView1.ActiveViewIndex = 0
i. Switch to Default.aspx in Design view.
j. Double-click the DataList button to add a click handler. Add the following
statement to the body of the handler:

Page 9 of 10
ASP.NET 2.0 User Interface Enhancements: Master Pages, Themes, and Controls
Tasks Detailed Steps
C#
MultiView1.ActiveViewIndex = 1;
Visual Basic
MultiView1.ActiveViewIndex = 1
If the buttons were defined inside the MultiView, you could implement view switching
declaratively by setting the buttons’ CommandName properties to SwitchViewByIndex
or SwitchViewByID and setting each button’s CommandArgument property to the
corresponding view ID or view index. However, since the layout of this page calls for
the buttons to be defined outside the MultiView, you have to write two lines of code—
one per button—to perform view switching.
k. In the Solution Explorer select Default.aspx and press Ctrl+F5.
l. Verify that you can switch views by clicking the GridView and DataList buttons.
You might have to select a title from the drop-down list after clicking the DataList
button for the first time to get the comics to appear. Also, you may find that the title
selected in the drop-down list gets out of sync with the titles shown on the page as you
switch back and forth between views.

Page 10 of 10