ASP NET2 0UserInterfaceEnhancements-MasterPagesThemesandControls

8/14/2019 ASP NET2 0UserInterfaceEnhancements-MasterPagesThemesandControls

1/12

Microsoft Virtual LabsASP.NET 2.0 User InterfaceEnhancements: Master Pages,

Themes, and Controls


2/12

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 Sites Pages........................................................................................................................5

Exercise 3 Add Multiple Views.....................................................................................................................................7


3/12


Page 1 of 10

ASP.NET 2.0 User Interface Enhancements:

Master Pages, Themes, and Controls

ObjectivesAfter 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

ScenarioASP.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, youll get first-hand experience using these new features by giving the

MyComics application you started in Lab 2 a face-lift. First, youll add a master

page to the site. Next, youll theme the site using a custom theme. Finally, youll

use a MultiView control to offers users a choice of ways to view comic book

data, and youll combine DataList controls and custom HTTP handlers to

implement a new view of the comic database

Estimated Time toComplete This Lab 60 Minutes


4/12


Page 2 of 10

Exercise 1Create a Master Page

ScenarioIn this exercise, youll create a master page to serve Default.aspx, Details.aspx, Admin.aspx, and other pages thatwill be added later. Then youll modify the existing pages by turning them into content pages.

Tasks Detailed Steps

1. Enable databasecaching.

a. ClickStart |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.

2. Open the Web site. a. ClickStart | All Programs | Microsoft Visual Studio 2005 | Microsoft VisualStudio 2005.

b. ClickFile | Open Web Site and navigate toC:\MSLabs\ASP.NET\Starter\\Lab3 and clickOpen.

Note: This lab supports either C# or VB languages.

c. In the Solution Explorer right-clickC:\..\Lab3, select New Folder and name itImages.

d. Right-click the Images folder and select Add Existing Item.e. Navigate to C:\MSLabs\ASP.NET\LabFiles\Images select MyComics.gifand

clickAdd.

3. Add a master page tothe site.

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

In the Add New Item dialog select Master Page as the template type and namethe master page Site.master.

c. Ensure that C# or Visual Basic is selected in the Language box and that Placecode in separate file is checked and clickAdd.

d. In the Target Schema for Validation drop-down list on the toolbar selectInternet Explorer 6.0.

e. Click the Design button to switch to Design view.4. Define the layout of

the master page.

a. ClickLayout |Insert Table.b. In the Insert Table dialog click the Template button, select Header, footer, and

side from the drop-down list and clickOK.

c. Drag the ContentPlaceHolder control to the right-hand cell of the tables secondrow.

d. Place the cursor in that cell (not in the ContentPlaceHolder) and in the Propertieswindow 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 thecontext menu.

f. Select the new row and in the Properties window set the Height property to 1 andthe BgColor property to Gray.

g. Right-click the bottom row of the table and select Insert | Row Above from the


5/12


Page 3 of 10


context menu.

h. Select the new row and in the Properties window set the Height property to 1 andthe BgColor property to Gray.

i. Right-click the cell to the left of the one that contains the ContentPlaceHoldercontrol and select Insert | Column to the Right.

j. Select the new cell and in the Properties window set the Width property to 1 andthe BgColor property to Gray.

k. Select the top row of the table and in the Properties window set the BgColorpropertyto #105070.

l. Put the cursor in the leftmost cell in the tables middle row and in the Propertieswindow set the BgColor propertyto #ececec.

m.Select the bottom row of the table and in the Properties window set the BgColorpropertyto #ececec.

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

a. From the Toolbox, under Standard, drag a HyperLink control and drop it into thetop row of the table.

b. In the Properties window set the ImageUrl property to ~/Images/MyComics.gifand the NavigateUrl property to ~/Default.aspx.

c. Select the top row of the table and in the Properties window set the Heightproperty 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 theProperties window set the Width property to 128.

e. Select the bottom row of the table and in the Properties window set the Heightproperty to 16.

f. Click the cursor in the bottom row, select 8pt from the Font Size drop-down andVerdana from the Font Name drop-down.

g. Type If this page works, I built it. If it doesnt work, I dont know who built it.6. Convert existing

pages into content

pages.

a. In Solution Explorer double-clickDefault.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 pages remainingcontent:

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.


6/12


Page 4 of 10


k. Change the URL in browsers address bar to point to Admin.aspx and verify thatit, 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 clickLayout | InsertTable.

c. In the Insert Table dialog, select the Header template and clickOK.d. Drag the existing SqlDataSource and DropDownList controls into the tables top

row.

e. Drag the existing ObjectDataSource and GridView controls into the tablesbottom row.

f. Delete any whitespace between the tables top row and the top of the page so thetop 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 propertyto 1 and

the BgColor propertyto Gray.

i.

Select the top row and in the Properties window set the Height propertyto 32 andthe BgColor propertyto #ececec.

j. Insert a space or two to the left of the DropDownList to move it away from theleft border of the table cell.

k. Select the DropDownList and in the Properties window and expand Font, set theSize property to 10 and the Name property to Verdana.

l. Select the GridView and in the Properties window and expand Font, set the Sizeproperty 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 theSize 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.


7/12


Page 5 of 10

Exercise 2Theme the Web Sites Pages

Scenario

Theming is an easy-to-use mechanism for applying visual attributes en masse to controls. You can apply themes toindividual pages or to an entire site. In this exercise, youll apply a supplied theme to see the effect it has on the

sites pages. Then youll customize the theme and use it to standardize MyComics look and feel.


1. Remove formattingfrom the GridView.

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. ClickAuto Format, select Remove Formatting and clickOK.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.2. Theme the page

BasicBlue.

a. In the Solution Explorer right-clickC:\..\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.skinand clickAdd.

e. In the Solution Explorer right-clickBasicBlue and clickNew Folder.f. Name the folder Images.g. In Solution Explorer, under BasicBlue, right-click the Images folder and select

Add Existing Item.

h. Navigate tothe C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\Imagesfolder, select all the files and clickAdd.

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 shouldappear with alternating rows in the grid a different color.

k. Close the browser and return to Visual Studio.3. Develop a theme of

your own.

a. In the Solution Explorer right-click the App_Themes folder and select AddASP.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.skinand clickAdd.

e. Rename the file MyComics.skin.f. In the Solution Explorer double-clickMyComics.skin.g. ClickEdit | Find and Replace | Quick Replace and replace all occurrences of

#000066 with #105070.


8/12


Page 6 of 10


h. Now replace all occurrences of#eeeeee with lightyellow.i. Close the Quick Replace and clickFile | Save All.j. In the Solution Explorer right-clickMy 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 tothe C:\MSLabs\ASP.NET\LabFiles\Themes\BasicBlue\Images

folder, select all the files and clickAdd.

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 sites

pages.

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 clickAuto Format in the DetailsView Tasks

menu.

d. Select Remove Formatting and clickOK.e. Open Admin.aspx in Design view.f. Select the GridView control and clickAuto Format in the DetailsView Tasks

menu.

g. Select Remove Formatting and clickOK.h. Repeat the previous steps to remove formatting from the DetailsView control.i. In the Solution Explorer double-clickWeb.config.j. Add the following statement to the section of Web.config:

If working in VB, modify the existing tag.k. ClickFile | 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 isthemed to match Default.aspx.

n. Change the URL in browsers address bar to point to Admin.aspx and verify thatAdmin.aspx is themed as well.

o. Close the browser and return to Visual Studio.


9/12


Page 7 of 10

Exercise 3Add Multiple Views

Scenario

In this exercise, youll add a MultiView control to Default.aspx and populate the MultiView with two views: onethat presents page content the way its 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. Youll also add buttons for switching between

the views.


1. Add a custom HTTPhandler.

a. In the Solution Explorer right-clickC:\..\Lab3 folder and select Add ExistingItem

b. Navigate to C:\MSLabs\ASP.NET\LabFiles\Components\ImageGrabber.ashxand clickAdd.

c. In the Solution Explorer double-clickImageGrabber.ashx and inspect the codecontained 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, youll 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 MultiViewcontrol to

Default.aspx.

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 theMultiView. 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. Thatview becomes View2.

f. Select MultiView and in the Properties window set the ActiveViewIndexproperty to 0.

3. Add a DataListcontrol to the

MultiView.

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 data-

binding expressions that make HTML templates more readable:

C#


10/12


Page 8 of 10


Visual Basic

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-clickItemCommand to add an ItemCommand event handler toDefault.aspx.cs or Default.aspx.vb.


11/12


Page 9 of 10


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 ofDefault.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 theActiveViewIndex 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 followingstatement 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:


12/12


Page 10 of 10


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 buttons 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 buttonto 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.

Documents

ASP NET2 0UserInterfaceEnhancements-MasterPagesThemesandControls