Asp Net2 0userinterfaceenhancements-masterpagesthemesandcontrols

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 Objectives

Scenario

After completing this lab, you will be better able to: ƒ 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 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 Complete This Lab

60 Minutes

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

Detailed Steps

1. Enable database

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.

caching.

2. Open the Web site.

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\\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.

3. Add a master page to

a. In the Solution Explorer right-click C:\..\Lab3 and select Add New Item.

the site.

4. Define the layout of

the master page.

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 h. i. j. k. l. m. n.

context menu. Select the new row and in the Properties window set the Height property to 1 and the BgColor property to Gray. Right-click the cell to the left of the one that contains the ContentPlaceHolder control and select Insert | Column to the Right. Select the new cell and in the Properties window set the Width property to 1 and the BgColor property to Gray. Select the top row of the table and in the Properties window set the BgColor property to #105070. Put the cursor in the leftmost cell in the table’s middle row and in the Properties window set the BgColor property to #ececec. Select the bottom row of the table and in the Properties window set the BgColor property to #ececec. Click the Source button and manually modify the tag to look like this:

o. Click the Design button to view the master page in Design view. 5. Add content to the

master page.

6. Convert existing

pages into content pages.

a. From the Toolbox, under Standard, drag a HyperLink control and drop it into the 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. a. In Solution Explorer double-click Default.aspx and click the Source button. b. In the Source view add a MasterPageFile=”~/Site.master” attribute to the @ Page directive at the top of the page. c. Remove the , , , ,

, and

elements from the page. d. Add an element that encapsulates all of the page’s remaining content:

e. Add a Title=MyComics attribute to @ Page directive. f. g. h. i. j.

Repeat steps a through d for Details.aspx so that it, too, becomes a content page. Repeat steps a through d for Admin.aspx so that it, too, becomes a content page. In the Solution Explorer select Default.aspx and press Ctrl+F5 to launch it. Verify that Default.aspx was successfully converted into a content page: 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

a. Open Default.aspx in Design view.

from the GridView.

2. Theme the page

BasicBlue.

3. Develop a theme of

your own.

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. i. j. k. l. m. n. o. p. q.

4. Theme all the site’s

pages.

Now replace all occurrences of #eeeeee with lightyellow. Close the Quick Replace and click File | Save All. In the Solution Explorer right-click My Comics and select New Folder. Name the folder Images. In Solution Explorer right-click the Images folder and select Add Existing Item. Navigate to the C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\Images folder, select all the files and click Add. Open Default.aspx in Source view. Change the Theme attribute in the @ Page directive to Theme=”MyComics”. In the Solution Explorer select Default.aspx and press Ctrl+F5 and note the changes in the controls. Close the browser and return to Visual Studio.

a. Open Default.aspx in Source view and remove the Theme attribute from the @ 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 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.

handler.

2. Add a MultiView

control to Default.aspx.

3. Add a DataList

control to the MultiView.

a. Open Default.aspx in Design view. b. From the Toolbox, under Standard, drag a MultiView control and drop it onto the 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. a. From the Toolbox, under Data, drag a DataList control and drop it into View2. b. Use the DataList Tasks menu to select ObjectDataSource1 from the Choose Data Source drop-down menu. c. Switch to Source view and add the following 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 databinding expressions that make HTML templates more readable: C#

Page 7 of 10

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

Detailed Steps

<%# (bool) Eval (“CGC”) ? “CGC “ : “” %> <%# Eval (“Grade”, “{0:f1}”) %>

Visual Basic

<%#IIf(Eval(“CGC”), “CGC “, “”)%> <%#Eval(“Grade”, “{0:f1}”) %>

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

switching views.

a. Select the MultiView control and in the Properties window set the 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