Module 2: Using Master Pages

Transcription

1 Module 2: Using Master Pages Contents Overview 1 Lesson: Advantages of Using Master Pages 2 Lesson: Writing Master and Content Pages 9 Lesson: Writing Nested Master Pages 21 Lesson: Programming Master Pages 27 Lab A: Writing Master Pages and Content Pages 36

2 Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, address, logo, person, place or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property Microsoft Corporation. All rights reserved. Microsoft, Active Directory, FrontPage, IntelliSense, Microsoft Press, MSDN, PowerPoint, SharePoint, Verdana, Visual Basic, Visual Studio, Windows, and Windows Server are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners.

3 Module 2: Using Master Pages iii Instructor Notes Presentation, Demonstrations, and Student Practices: 60 minutes Lab: 45 minutes This module provides information about ASP.NET 2.0 master pages. After completing this module, students will be able to:! List the advantages of using master pages.! Write master pages and their corresponding content pages.! Create nested master pages.! Program master pages. Required materials To teach this module, you need the following materials:! Microsoft PowerPoint file 3201a_02.ppt Important It is recommended that you use PowerPoint 2002 or later to display the slides for this course. If you use PowerPoint Viewer or an earlier version of PowerPoint, some features of the slides might not be displayed correctly. Preparation tasks To prepare for this module:! Read all of the materials for this module.! Read the chapter titled Using Master Pages in the Microsoft Press book Introducing Microsoft ASP.NET 2.0.! Complete the practices and lab.

4 iv Module 2: Using Master Pages How to Teach This Module Key points to remember when teaching this module:! Try to keep students focused on the content in this module. You should try to answer questions about topics covered later on in the course by saying that the topic in question will be covered in detail in a later module. And if you know the module in which it is covered, go ahead and inform the class.! When performing the hands-on activities, if you make any changes to the virtual machine that you do not want to keep, you can close the virtual machine without saving. This will take the virtual machine back to the most recently saved state. To close the virtual machine without saving, perform the following steps: a. On the virtual machine, on the Action menu, click Close. b. In the Close dialog box, on the What do you want the virtual machine to do? list, select Turn off and delete changes and then click OK.! Module 2, Using Master Pages, provides a comprehensive overview of master pages, nested master pages, and content pages. Students learn key concepts and have opportunity for a lot of hands-on activity during the practices and lab.! The lesson, Advantages of Using Master Pages, provides an overview of familiar topics such as user controls and include files and how these aspects of ASP.NET 1.x development have been enhanced by the use of master pages in ASP.NET 2.0.! The lesson, Writing Master and Content Pages, teaches students about the fundamentals of master pages and how they enable developers to reuse code across pages. This lesson also discusses the relationship between master and content pages.! The lesson, Writing Nested Master Pages, teaches students about the master page hierarchy and architecture, including best practices for nesting master pages.! The lesson, Programming Master Pages, teaches students about the requirements for programming master pages, including exposing and invoking properties and dynamically modifying the master page. Demonstration Tips When performing the instructor-led demonstrations in this course, you might consider showing the finished result of the demonstrations before you begin. By showing students the completed application before you begin performing the actual tasks to build it, they will have a mental picture of what you are trying to accomplish in the demonstration. The finished solutions for each demonstration are provided in the solution folder. For example, C:\Program Files\Microsoft Learning\3201A\Practices\Mod02\ Solution\language\Demo1

5 Lesson: Advantages of Using Master Pages Advantages of ASP.NET 1.x User Controls Module 2: Using Master Pages v You can summarize the advantages of ASP.NET 1.x user controls by stating that 1.x user controls:! Are fairly easy to create and modify.! Are good for smaller-scale applications where scalability is not an issue. This is because changes to public interface require every page that references the control to be updated. Disadvantages of ASP.NET 1.x User Controls Advantages of Classic ASP Include Files Disadvantages of Classic ASP Include Files What Are Master Pages? Advantages of ASP.NET 2.0 Master Pages The main disadvantage of 1.x user controls is that they must be compiled and distributed for use on referencing pages. If the public interface changes, all referencing pages must be changed. There is a noticeable performance hit when a user views a page that has a new user control because the dynamic assembly needs to be recompiled. You can summarize the advantages of classic ASP include files by stating that ASP include files do not affect server performance or how a page is built. They are independent objects and therefore can be quickly and easily modified. Include files are not object oriented. Therefore, it is difficult to integrate them into an ASP.NET programming model. Many times, HTML tables begin inside an include file and end inside a page s HTML, which makes it difficult to support inside WYSIWYG designers. A master page is very similar to a normal Web form except that instead of directive, master pages use directive. Master pages contain HTML markup, user controls, and at least one ContentPlaceHolder control. Neither master pages nor their child content pages work independently of one another. If a user attempts to access a file with the.master extension, an error message is generated because.master files are a forbidden type of resource in Microsoft ASP.NET. The page layout for master pages is easy to share, simple to maintain, and functional to a Web application. The master page provides a single point of reference for all pages to display standardized Web content. Master pages are completely transparent to end users, and they allow developers to create Web sites where pages share a common layout.

6 vi Module 2: Using Master Pages Lesson: Writing Master and Content Pages Key Characteristics of Master Pages Methods for Attaching Content Pages to a Master Page Page- Level Binding Methods for Attaching Content Pages to a Master Page Application- and Folder- Level Binding The directive differentiates master pages from standard Web forms. directive supports several attributes. Refer to Table 2-1, Introducing ASP.NET 2.0, for a list of supported attributes. The ContentPlaceHolder control is a container that is filled by content pages at run time. Master pages can be attached to a content page either explicitly or by reference within the content pages. The key point for this topic is that, you can link all content pages of an entire application to the same master page. This is an efficient method for keeping applications consistent. It also ensures that only content pages are bound to a master page. Practice: Writing a Master Page Key Characteristics of Content Pages Practice: Writing a Content Page Demonstration: How to Set Binding at the Application or Folder Level This practice focuses on the building of HTML content and ContentPlaceHolders. Previously, each.aspx page in a Web site was required to contain only one <form> tag. With master pages, the <form> tag is in the master page and not in the content pages. The ability to create a template for a set of pages is a new feature of ASP.NET 2.0. Such templates are called master pages. This enables you to separate the standard parts of your Web site, which you want to be shown on all of your site s pages, by implementing master pages. This also helps you cut down on redundant code and HTML, and make code, HTML control, and updating simpler tasks. Content pages must either explicitly reference a master page in the MasterPageFile attribute of directive, or dynamically set the master page reference in the Page_PreInit event. All content for display must be located within a Content control that is defined in a linked master page. If any content is present outside of a Content control, a Content control is not linked to a master page s ContentPlaceHolder; or, if no Content control is present, ASP.NET will generate an error. Content pages cannot contain a <form> tag. This practice focuses on students editing directive to reference a master page and building content within Content controls. A content page defines the content for each region of the master page. Content pages do not include the standard HTML of a Web form. The key feature of a content page is the Content control, which inherits the Control class. You define which master page to link to within directive. You also define any event code needed by your content page within the content page itself. Application and folder-level master page binding is accomplished by placing a <pages master="masterfilename"/> node in the <system.web> portion of the web.config. This demonstration sets an application-wide master page in the web.config file for the entire site. When using an application-wide master page, all.aspx content pages must use Content controls. Placing content outside of a Content control in a.aspx page will generate an error.

7 Lesson: Writing Nested Master Pages What Are Nested Master Pages? How to Design Nested Master Pages Practice: Writing a Nested Master Page Module 2: Using Master Pages vii Nested master pages allow designers to create multiple displays based on business logic or context to form a hierarchical nested structure. A nested master page must follow some rules of a content page and some rules of a top-level master page. A nested master page has directive with a MasterPageFile attribute. All content on the nested master page must be contained within Content controls, and the nested master page must contain at least one ContentPlaceHolder control within one of its Content controls. There is no architectural limit on the number of levels you can implement in your page hierarchy. Nesting has a minimal impact on performance. This practice focuses on the student creating a hierarchy of nested master pages and a content page. The top-level master page provides the format for all pages on a Web site, while the nested master page provides the format for a section or sections of pages that refer to it. When using nested master pages, any child master is seen and implemented as a plain content page in which extra ContentPlaceHolder controls are defined for an extra level of content pages. A nested master page contains both Content and ContentPlaceHolder controls. There is no architectural limitation in the number of nesting levels you can use on your Web site, and there is only negligible impact on performance when nested master pages are used.

8 viii Module 2: Using Master Pages Lesson: Programming Master Pages How to Expose Master Page Properties Demonstration: How to Expose Master Page Properties How to Invoke Master Page Properties Demonstration: How to Invoke Master Page Properties How to Dynamically Change the Master Page To expose the properties of a control used in a master page, designers must ensure that the runat attribute is set to server and that the ID is equal to a unique value. Also, the master page must have a ClassName attribute defined in directive. A public interface must be created in the master page for child pages to interact. To expose a control on a master page, you must create a class name for the master page and then create a public wrapper exposing the control. Typically, to expose properties of a control in ASP.NET, you simply have to set the runat attribute and give the control an ID. The process is not that simple when exposing properties in a master page. To expose a control's property, you must set up the control and then create a public wrapper property to make the control accessible. To invoke a custom property of a master page, designers must cast the Master object to the class defined in the master page file. This requires intrinsic knowledge of the class name. This demonstration shows how to cast the Master object to the master page class name and change a property of a control used on the master page. This demonstration invokes a master page's SubTitle property from a child page. Typically, intrinsic properties of a bound master page are accessed through the Master property. However, because SubTitle is not an intrinsic part of the Master property, but instead is a custom property, it cannot be accessed without casting the Master property to a Master page class. The Master page class is defined in the Master directive using the ClassName attribute. To dynamically change a master page reference, a content page cannot have the MasterPageFile attribute of directive. The master page must be connected to the content page in the Page_PreInit event of the content page.

9 Lab: Writing Master Pages and Content Pages Scenario reflection activity Module 2: Using Master Pages ix This lab focuses on having students practice writing master and content pages. To best complete this lab, students should have completed all of the practices because the lab integrates the facts, concepts, and skills that students learned while viewing the instructor-led demonstrations and completing practices in this module. Students should have a good understanding of how master, nested master, and content pages relate to one another. Also, point the students to the figure located after the Scenario section. This illustration provides an example of the application that students will create in this lab. The students will complete the exercises individually, but should be encouraged to ask one another and the instructor for help if they have trouble completing a procedure. The purpose of this lab is to teach the students to write a master page, a nested master page, and a content page. Allow no more than 5 10 minutes for this activity. It should be a simple and informal discussion that offers students the opportunity to think about what they learned in the lab and to draw comparisons to situations in their own organizations. It s easy to get off track during these types of discussions, so just remember to keep students focused on the subject of this module writing master pages and their corresponding content pages, creating nested master pages, and programming master pages. They should focus their discussion on using Microsoft Visual Studio 2005 to create Web sites, master pages, nested master pages, and content pages, and how these capabilities might be applicable to their organizations.

10

11 Module 2: Using Master Pages 1 Overview *****************************ILLEGAL FOR NON-TRAINER USE******************************

12 2 Module 2: Using Master Pages Lesson: Advantages of Using Master Pages *****************************ILLEGAL FOR NON-TRAINER USE******************************

13 Module 2: Using Master Pages 3 Advantages of ASP.NET 1.x User Controls *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, The Rationale Behind Master Pages, page 31.

14 4 Module 2: Using Master Pages Disadvantages of ASP.NET 1.x User Controls *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, The Rationale Behind Master Pages, page 31.

15 Module 2: Using Master Pages 5 Advantages of Classic ASP Include Files *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, The Rationale Behind Master Pages, page 32.

16 6 Module 2: Using Master Pages Disadvantages of Classic ASP Include Files *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, The Rationale Behind Master Pages, page 32.

17 Module 2: Using Master Pages 7 What Are Master Pages? *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, pages

18 8 Module 2: Using Master Pages Advantages of ASP.NET 2.0 Master Pages *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, pages

19 Lesson: Writing Master and Content Pages Module 2: Using Master Pages 9 *****************************ILLEGAL FOR NON-TRAINER USE******************************

20 10 Module 2: Using Master Pages Key Characteristics of Master Pages *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, page 34.

21 Module 2: Using Master Pages 11 Methods for Attaching Content Pages to a Master Page Page- Level Binding *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, page 39.

22 12 Module 2: Using Master Pages Methods for Attaching Content Pages to a Master Page-Applicationand Folder-Level Binding *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, pages

23 Module 2: Using Master Pages 13 Practice: Writing a Master Page *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, page 35. Introduction In this practice, you will create a master page called BookSample.master. Next, you will link the style sheet and add a title. Then you will add tables and controls to the form. Use the following values in this practice: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator P@ssw0rd Procedure! To prepare for this practice 1. If the virtual machine has been paused: On the GEN-STU-01 virtual machine, on the Action menu, click Resume. 2. If the virtual machine has been shut down: a. From the Desktop, double-click the Microsoft Virtual PC icon, highlight GEN-STU-01, and then click Start. b. After the GEN-STU-01 virtual machine boots, log on with a user name of Administrator and a password of P@ssw0rd. 3. If Visual Studio is not open: On the GEN-STU-01 virtual machine, click Start, and then click Microsoft Visual Studio 2005.

24 14 Module 2: Using Master Pages! To open the Mod2 Web site 1. In Microsoft Visual Studio 2005, click File, and then click Open Web Site. 2. In the Open Web Site window, in File System, browse to C:\Program Files\Microsoft Learning\3201A\Practices\Mod02\Starter\ language\practice1, and then click Open. Note This is a dual-language course that contains code snippets, starter, and solution files for both C# and Microsoft Visual Basic.NET. Choose the language in which you want to code to complete the procedures. When you see the word language (for example, StrongPassword.language), this indicates that the folder or file can be either C# or Visual Basic.NET. Choose the language you are using, and then proceed.! To create the BookSample.master page 1. On the File menu, click New File. 2. In the Visual Studio installed templates section, click the Master Page template. 3. In the Name box, type BookSample.master. 4. In the Language list, select the language you are working in. 5. Clear the Place code in separate file checkbox, and then click Add.! To modify the BookSample.master page 1. Create a link to the styles.css style sheet: <link rel="stylesheet" href="styles.css" /> 2. Change the page title: <title>master Page</title> 3. In the form, add a table with title text: <table border="0" width="100%" bgcolor="beige" style="border-bottom:silver 5px solid"> <tr> <td><h2>introducing ASP.NET 2.0</h2></td> </tr> </table> 4. Add a table around the ContentPlaceHolder control and change the ID of the ContentPlaceHolder control to Toolbar: <table width="100%" style="border:solid 1px black;"> <tr> <td> <asp:contentplaceholder ID="Toolbar" Runat="Server">This is some default content from the Master Page</asp:ContentPlaceHolder> </td> </tr>

25 Module 2: Using Master Pages Add another ContentPlaceHolder control called PageBody: <tr> <td> <asp:contentplaceholder ID="PageBody" Runat="Server" /> </td> </tr> </table> 6. Save and close the BookSample.master page. 7. Close any open files or projects, but leave Visual Studio open. 8. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

26 16 Module 2: Using Master Pages Key Characteristics of Content Pages *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, page 37.

27 Module 2: Using Master Pages 17 Practice: Writing a Content Page *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, page 37. Introduction In this practice, you will create a content page to implement a master page. Use the following values in this practice: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator P@ssw0rd Procedures! To prepare for this practice! You must have completed the practice called Writing a Master Page before performing this practice.! On the GEN-STU-01 virtual machine, on the Action menu, click Resume.! To open the Mod2 project 1. In Visual Studio 2005, on the File menu, click Open Web site. 2. On the Open Web Site window, on File System, browse to C:\Program Files\Microsoft Learning\3201A\Practices\Mod02\ Starter\language\Practice2, and then click Open. (You can also use the project you created in the previous practice.)

28 18 Module 2: Using Master Pages! To create the WithMaster.aspx content page 1. In Solution Explorer, right-click the BookSample.master file, and then click Add Content Page. 2. In Solution Explorer, rename Default.aspx to WithMaster.aspx.! To modify the WithMaster.aspx content page 1. Add a Content control and link it to the PageBody ContentPlaceHolder by setting the ContentPlaceHolderID to PageBody: <asp:content ID="Content2" ContentPlaceHolderID="PageBody" Runat="server"> 2. In the Content control, create an <h1> tag with content: <h1>this is the body of the page</h1> 3. Add a Button control with Click Me in the Text attribute, followed by a break tag: <asp:button ID="Button1" Runat="server" Text="Click Me" /><br /> 4. Add a Label control with msg in the ID attribute, and an empty string in the Text attribute: <asp:label ID="msg" Runat="server" Text=""> </asp:label> 5. In Design view, double-click the button to create the Button1_Click event code, and change the msg.text to Hello, Master Pages: C# void Button1_Click(object sender, EventArgs e) { msg.text = "Hello, Master Pages"; } Visual Basic.NET Sub Button1_Click(sender As Object, e As EventArgs) msg.text = Hello, Master Pages" End Sub 'Button1_Click 6. Save the WithMaster.aspx page.! To review the WithMaster.aspx content page 1. Right-click the WithMaster.aspx page, and then click View in Browser. 2. Review the page. 3. Close the browser and any open files or projects, but leave Visual Studio 2005 open. 4. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

29 Module 2: Using Master Pages 19 Demonstration: How to Set Binding at the Application or Folder Level *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, What Are Master Pages?, pages Introduction In this demonstration, you will see an example of how to configure an application-wide or sub-application-wide master page. Your instructor will use the following values in this demonstration: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator Procedure! To prepare for this demonstration 1. If the virtual machine has been paused: On the GEN-STU-01 virtual machine, on the Action menu, click Resume. 2. If the virtual machine has been shut down: a. From the Desktop, double-click the Microsoft Virtual PC icon, highlight GEN-STU-01, and then click Start. b. After the GEN-STU-01 virtual machine boots, log on with a user name of Administrator and a password of P@ssw0rd. 3. If Visual Studio is not open: On the GEN-STU-01 virtual machine, click Start, and then click Microsoft Visual Studio 2005.

30 20 Module 2: Using Master Pages! To open the Demo project 1. In Visual Studio 2005, on the File menu, click Open Web Site. 2. In the Open Web Site window, on File System, browse to C:\Program Files\Microsoft Learning\3201A\Democode\Mod02\ Starter\language\Demo1, and then click Open.! To open the web.config file In Solution Explorer, double-click web.config. This opens the web.config file into the edit window.! To add a reference to the application-wide master page 1. Inside the <system.web> tag, add the following reference using the <pages> tag: <pages masterpagefile="booksample.master" /> 2. Save and close the web.config file.! To open the WithMaster.aspx content page In Solution Explorer, double-click WithMaster.aspx. This opens the WithMaster.aspx file into the edit window.! To ensure the reference to the application-wide master page is used 1. Remove the reference to the master page in directive: C# <%@ Page language="c#" %> Visual Basic.NET <%@ Page language="vb" %> 2. Save the WithMaster.aspx file.! To review the WithMaster.aspx content page 1. Right-click the WithMaster.aspx page, and then click View in Browser. 2. Review the page. 3. Close the browser and any open files or projects, but leave Visual Studio 2005 open. 4. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

31 Module 2: Using Master Pages 21 Lesson: Writing Nested Master Pages *****************************ILLEGAL FOR NON-TRAINER USE******************************

32 22 Module 2: Using Master Pages What Are Nested Master Pages? *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, Underpinnings of Master Pages, pages

33 Module 2: Using Master Pages 23 How to Design Nested Master Pages *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, Underpinnings of Master Pages, pages

34 24 Module 2: Using Master Pages Practice: Writing a Nested Master Page *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, Underpinnings of Master Pages, pages Introduction In this practice, you will create a nested master page. Important The master, nested master, and content pages can all be written in any Microsoft ASP.NET language. For this practice, the master page is written in a different language than the nested master and content pages that you will be creating. Use the following values in this practice: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator P@ssw0rd Procedures! To prepare for this practice On the GEN-STU-01 virtual machine, on the Action menu, click Resume.! To open the Mod2 project 1. In Visual Studio 2005, on the File menu, click Open Web Site. 2. In the Open Web Site window, on File System, browse to C:\Program Files\Microsoft Learning\3201A\Practices\Mod02\ Starter\language\Practice3, and then click Open.

35 Module 2: Using Master Pages 25! To review the body.master file 1. Review directive and supporting attributes: C# Master Language="C#" MasterPageFile="BookSample.master" Debug="true" AutoEventWireup="true"%> Visual Basic.NET Master Language="VB" MasterPageFile="BookSample.master" Debug="true" AutoEventWireup="true"%> 2. Review the Content control linked to the Toolbar ContentPlaceHolder control: <asp:content ID="Content1" Runat="Server" ContentPlaceHolderID="Toolbar"> 3. In the second table cell, review the ContentPlaceHolder control called Menu: <asp:contentplaceholder ID="Menu" Runat="Server" /> 4. After the first content control, review another Content control that is linked to the PageBody ContentPlaceHolder control: <asp:content ID="Content2" Runat="Server" ContentPlaceHolderID="PageBody">! To create the Page.aspx content page 1. In Solution Explorer, right-click body.master, and then click Add Content Page. 2. Rename Default.aspx to Page.aspx.! To modify the Page.aspx content page 1. Add a Content control called Content3 linked to the Menu control: <asp:content ID="Content3" Runat="Server" ContentPlaceHolderID="Menu"> 2. In the Content3 Content control, add three Button controls called View, Buy, and Review with onclick events called View_Click, Buy_Click, and Review_Click, respectively: <asp:button ID="View" Runat="Server" Text="View TOC" onclick="view_click" width="90px" /> <asp:button ID="Buy" Runat="Server" Text="Buy" onclick="buy_click" width="90px" /> <asp:button ID="Review" Runat="Server" Text="Review" onclick="review_click" width="90px" /> 3. Add a script element with a runat attribute set to server to the top of the page.

36 26 Module 2: Using Master Pages 4. Inside the script tag, create default event code for the three buttons onclick events: C# void Buy_Click(object sender, EventArgs e) { } void Review_Click(object sender, EventArgs e) { } void View_Click(object sender, EventArgs e) { } Visual Basic.NET Sub Buy_Click(ByVal sender As Object, ByVal e As EventArgs) End Sub 'Buy_Click Sub Review_Click(ByVal sender As Object, _ ByVal e As EventArgs) End Sub 'Review_Click Sub View_Click(ByVal sender As Object, _ ByVal e As EventArgs) End Sub 'View_Click Note Design view does not support creating or editing nested master pages, so you cannot view the results until a content page is created in the next exercise. 5. Save the Page.aspx file.! To review the nested master page 1. Right-click the Page.aspx page, and then click View in Browser. 2. Review the page. 3. Close the browser and any open files or projects, but leave Visual Studio 2005 open. 4. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

37 Module 2: Using Master Pages 27 Lesson: Programming Master Pages *****************************ILLEGAL FOR NON-TRAINER USE******************************

38 28 Module 2: Using Master Pages How to Expose Master Page Properties *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, A Realistic Example, pages

39 Module 2: Using Master Pages 29 Demonstration: How to Expose Master Page Properties *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, A Realistic Example, Introduction In this demonstration, you will see an example of how to expose the properties of a master page. Your instructor will use the following values in this demonstration: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator P@ssw0rd Procedure! To prepare for this demonstration On the GEN-STU-01 virtual machine, on the Action menu, click Resume.! To open the Demo project 1. In Visual Studio 2005, on the File menu, click Open Web Site. 2. In the Open Web Site window, on File System, browse to C:\Program Files\Microsoft Learning\3201A\Democode\Mod02\ Starter\language\Demo2, and then click Open.! To open the main.master file In Solution Explorer, double-click main.master. This opens the main.master file into the edit window.

40 30 Module 2: Using Master Pages! To set up the page for exposure Add a classname attribute to directive. Name the class MyMaster: C# <%@ Master ClassName="MyMaster" Language="C#" %> Visual Basic.NET <%@ Master ClassName="MyMaster" Language="VB" %>! To set up the title for exposure Add a span tag called titlebar around the text Title found under the ContentPlaceHolder called HeaderLeft: <Span Runat="Server" ID=" titlebar">title</span>! To create a public wrapper exposing titlebar 1. Create a public string SubTitle and code the get and set methods to return the inner HTML of the titlebar span tag: C# public string SubTitle { get { return titlebar.innertext; } set { titlebar.innertext = value; } } Visual Basic.NET Public Property SubTitle() As String Get Return titlebar.innertext End Get Set titlebar.innertext = value End Set End Property 2. Save and close the main.master file. Note We will use this file in the next demonstration when we invoke the properties exposed in this file. 3. Close the browser and any open files or projects, but leave Visual Studio 2005 open. 4. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

41 Module 2: Using Master Pages 31 How to Invoke Master Page Properties *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, A Realistic Example,

42 32 Module 2: Using Master Pages Demonstration: How to Invoke Master Page Properties *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, A Realistic Example, Introduction In this demonstration, you will see an example of how to invoke the properties of a master page. Your instructor will use the following values in this demonstration: Variable Virtual machine User Name Password Value GEN-STU-01 Administrator P@ssw0rd Procedure! To prepare for this demonstration On the GEN-STU-01 virtual machine, on the Action menu, click Resume.! To open the Demo project 1. In Visual Studio 2005, on the File menu, click Open Web Site. 2. In the Open Web site window, on File System, browse to C:\Program Files\Microsoft Learning\3201A\Democode\Mod02\ Starter\language\Demo3, and then click Open.! To open the default.aspx content page In Solution Explorer, double-click default.aspx. This opens the default.aspx file into the edit window.

43 Module 2: Using Master Pages 33! To add a Page_Load event 1. In the <script runat="server"> tag, add a Page_Load event: C# void Page_Load(object sender, EventArgs e) { } Visual Basic.NET Sub Page_Load(sender As Object, e As EventArgs) End Sub 'Page_Load 2. In the Page_Load event code, change the header text to This is the homepage: C# Header.Title = "This is the homepage"; Visual Basic.NET Header.Title = "This is the homepage" 3. To change the custom property that you created in the master page from the previous demonstration, perform the following step: In the Page_Load event code, change the master page SubTitle to Welcome!: C# ((MyMaster)Master).SubTitle = "Welcome!"; Visual Basic.NET CType(Master, MyMaster).SubTitle = "Welcome!" 4. Save the default.aspx file.! To open the another.aspx content page In Solution Explorer, double-click another.aspx. This opens the another.aspx file into the edit window.

44 34 Module 2: Using Master Pages! To add a Page_Load event 1. In the <script runat="server"> tag, add a Page_Load event: C# void Page_Load(object sender, EventArgs e) { } Visual Basic.NET Sub Page_Load(sender As Object, e As EventArgs) End Sub 'Page_Load 2. In the Page_Load event code, change the header text to This is another page: C# Header.Title = "This is another page"; Visual Basic.NET Header.Title = "This is another page" 3. In the Page_Load event code, change the master page SubTitle to Welcome!: C# ((MyMaster)Master).SubTitle = "Another Page"; Visual Basic.NET CType(Master, MyMaster).SubTitle = "Another Page" 4. Save the another.aspx file.! To review the content pages 1. Switch to the default.aspx page. 2. Right-click the page, and select View in Browser. 3. Review the page. 4. Close the browser and any open files or projects, but leave Visual Studio 2005 open. 5. On the GEN-STU-01 virtual machine, on the Action menu, click Pause.

45 Module 2: Using Master Pages 35 How to Dynamically Change the Master Page *****************************ILLEGAL FOR NON-TRAINER USE****************************** See Introducing Microsoft ASP.NET 2.0, Chapter 2, Working with Master Pages, A Realistic Example,

46 36 Module 2: Using Master Pages Lab A: Writing Master Pages and Content Pages *****************************ILLEGAL FOR NON-TRAINER USE****************************** Objectives After completing this lab, you will be able to:! Write a master page.! Write nested master pages.! Write a content page. Note This lab focuses on the concepts in this module and as a result may not comply with Microsoft security recommendations. Prerequisites For more information You must have either viewed all of the instructor-led demonstrations and completed all of the practices in this module, or have equivalent knowledge and experience. If you would like supporting information to perform the lab exercises, you can:! Review the instructor-led demonstrations and practices in this module for detailed steps of the tasks required in this lab.! Use Dynamic Help for detailed information on the controls, code, and objects.! Refer to related content in the book Introducing Microsoft ASP.NET 2.0.! Open the solution files located on both the virtual machine and your Student compact disc at C:\Program Files\Microsoft Learning\3201A\Labfiles\ Mod02\Solution\language.

47 Module 2: Using Master Pages 37 Scenario You and your Adventure Works Web development team met with the directors of each department to be represented on the intranet site two weeks ago in a roundtable session. Your team learned that several of the company s departments want:! A consistent look and feel for each department page so that users don t become disoriented when navigating between departments.! Customized navigation of key parts of the intranet to be accessible to their employees.! A new home page that is easy to use, provides relevant information, and conforms to corporate standards. After reviewing the functionality and features available in the new Microsoft.NET 2.0 Framework, as well as the total cost of ownership of Web sites built using ASP.NET 2.0, your Web development team has decided to move forward using ASP.NET 2.0. The strategy to accomplish the needs outlined by the Adventure Works departments is as follows:! To ensure standardized corporate branding and consistent user experience of the intranet, you will create and implement a corporate master page.! To meet the request for customized group-level navigation, the intranet development team will advocate the use of nested master pages so each group can create and maintain its own sub-navigation menus and content.! To create the new home page that meets the requirements, you will write it by using a content page that is based on the master page. This will ensure that all the pages in the intranet maintain consistency. The following figure provides a sample of the application that you will create during the lab exercises. Estimated time to complete this lab: 45 minutes

48 38 Module 2: Using Master Pages Lab Setup To complete this lab, you must use the following values and then verify that the GEN-STU-01 virtual machine is running and that Visual Studio is open. Variable Virtual machine User Name Password Value GEN-STU-01 Administrator 1. If the GEN-STU-01 virtual machine is not running: a. On the Desktop, double-click the Microsoft Virtual PC icon, highlight GEN-STU-01, and then click Start. b. After the GEN-STU-01 virtual machine boots, log on with a user name of Administrator and a password of P@ssw0rd. 2. If Visual Studio is not open: On the GEN-STU-01 virtual machine, click Start, and then click Microsoft Visual Studio 2005.

49 Module 2: Using Master Pages 39 Exercise 1 Writing a Master Page Scenario In this exercise, you will create a new Web site project in Visual Studio Then you will create a master page for the Adventure Works corporate intranet site. A big part of the design of the Adventure Works intranet site is that each be given its own sub-area on the site. To ensure the corporate branding policy and that users do not become frustrated when navigating between department pages, every page on the site must be given the same appearance and functionality for consistency. To accomplish this, your Web Development team has outlined the following strategy: You will create a master page to be used by all pages on the site to ensure consistency.! The master page contains: The header. A content placeholder.! The header contains: A top navigation bar to enable quick navigation to each department site. The site logo. The site title. The current page.! To open the starter Web site 1. In Visual Studio 2005, from the File menu, click Open Web Site. 2. Browse to C:\Program Files\Microsoft Learning\3201A\LabFiles\Mod02\ Starter\language\ AdWorksWebSite, and then click Open.! To create a master page 1. On the File menu, click New File. 2. In Visual Studio installed templates, select Master Page. 3. Change the Name to AdWorks.master. 4. In the Language list, select the language you are working in. 5. Clear the Place code in separate file checkbox, and then click Add.

50 40 Module 2: Using Master Pages! To modify the page header 1. Find the <title> tag and change the text to Adventure Works Intranet Portal. Your code should look like the following: <title>adventure Works Intranet Portal</title> 2. Add the style sheet declaration. Your code should look like the following: <link type="text/css" rel="stylesheet" href="stylesheet.css" />! To modify the page body 1. Replace the ContentPlaceHolder control named ContentPlaceHolder1 with a table that stretches across the entire page with five rows. Your code should look like the following: <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td> <!-- Row One --> </td> </tr> <tr> <td> <!-- Row Two --> </td> </tr> <tr> <td> <!-- Row Three --> </td> </tr> <tr> <td> <!-- Row Four --> </td> </tr> <tr> <td> <!-- Row Five --> </td> </tr> </table>

51 Module 2: Using Master Pages The primary stakeholders of the intranet site want each group to have its own sub-area of the intranet. Therefore, your team has decided that the first row should contain one cell spanning two columns with seven HyperLink controls linking to the six groups within the company and the home page for the intranet site. The links should be contained in a table and have the following titles: Home HR Accounting Legal Sales Training Expenses Your code should look like the following: <td colspan="2"> <!-- Row One --> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr class="bannerframe" > <td class="bannercell" > <asp:hyperlink ID="HyperLink1" Runat="server" NavigateUrl="~/default.aspx"> Home</asp:HyperLink> <asp:hyperlink ID="HyperLink2" Runat="server" NavigateUrl="~/hr.aspx"> HR</asp:HyperLink> <asp:hyperlink ID="HyperLink3" Runat="server" NavigateUrl="~/accounting.aspx"> Accounting</asp:HyperLink> <asp:hyperlink ID="HyperLink4" Runat="server" NavigateUrl="~/legal.aspx"> Legal</asp:HyperLink> <asp:hyperlink ID="HyperLink5" Runat="server" NavigateUrl="~/sales.aspx"> Sales</asp:HyperLink> <asp:hyperlink ID="HyperLink6" Runat="server" NavigateUrl="~/training.aspx"> Training</asp:HyperLink> <asp:hyperlink ID="HyperLink7" Runat="server" NavigateUrl="~/expenses.aspx"> Expenses</asp:HyperLink> </td> </tr> </table> </td> Note Manually typing in all the HyperLink controls is tedious and, fortunately, not necessary. You can drag controls from the toolbox onto the page and set properties using the Properties Window.

52 42 Module 2: Using Master Pages 3. The second row has a class of HeaderFrame, and the cell within contains the image yellow.gif with a static height of three pixels. Your code should look like the following: <tr class="headerframe" height="3px"> <!-- Row Two --> <td colspan="2" style="height: 3px"><asp:Image ID="Image1" Runat="server" Height="3px" Width="100%" ImageUrl="~/Images/yellow.GIF" /></td> </tr> 4. The third row contains the site image, the current site name, and the current site logo split into two cells. Your code should look like the following: <tr height="49px"> <!-- Row Three --> <td><asp:hyperlink ID="HyperLink8" Runat="Server" NavigateUrl="~/default.aspx"><asp:Image ID="Image2" Runat="server" Width="49px" ImageUrl="~/Images/home.GIF" /></asp:hyperlink></td> <td width="99%" class="headercell" nowrap><font color="#000000">adventure Works</font><br /><span align="left" class="headertitle">home</span></td> </tr> 5. The fourth row has a class of HeaderFrame, and the cell within contains the image yellow.gif with a static height of one pixel. Your code should look like the following: <tr class="headerframe" height="1px"> <!-- Row Four --> <td colspan="2" style="height: 1px"><asp:Image ID="Image3" Runat="server" Height="1px" Width="100%" ImageUrl="~/Images/yellow.GIF" /></td> </tr> 6. The fifth row contains the content placeholder that all the pages will use to render their content and is named SiteContentPlaceHolder. Your code should look like the following: <tr height="99%"> <!-- Row Five --> <td colspan="2" valign="top"> <asp:contentplaceholder id="sitecontentplaceholder" runat="server"></asp:contentplaceholder> </td> </tr>

53 Module 2: Using Master Pages 43! To view the design 1. Save the AdWorks.master file by clicking the File menu and then clicking Save AdWorks.master. 2. Click the Design button on the view toolbar located at the bottom of Visual Studio.NET Leave your project open in Visual Studio.NET 2005 because you will use it in the next exercise.

54 44 Module 2: Using Master Pages Exercise 2 Writing a Nested Master Page Scenario In this exercise, you will create a nested master page for the home page of the Adventure Works intranet site. Each Adventure Works department site on the intranet must:! Contain a sub-menu that links to each of the department s pages.! Have the same appearance and functionality as all of the other Adventure Works department sites. To accomplish these requirements, your team decides to:! Create a nested master page that creates a content placeholder with a specific style for the menu.! Create another content placeholder for content of the page that uses the master page.! To create a child master page 1. On the File menu, click New File. 2. In Visual Studio installed templates, select Master Page. 3. Change the Name to AdWorksPage.master. 4. In the Language list, select the language you are working in. 5. Clear the Place code in separate file checkbox, and then click Add. 6. Delete all the code below the </script> tag, as well as the <!DOCTYPE> declaration. Your code should look like the following: C# <%@ master language="c#" %> <script runat="server"> </script> Visual Basic.NET <%@ master language="vb" %> <script runat="server"> </script>

55 Module 2: Using Master Pages 45! To add a reference to the AdWorks.master master page Add the masterpagefile directive to the page. Your code should look like the following: C# <%@ master language="c#" masterpagefile="~/adworks.master"%> Visual Basic.NET <%@ master language="vb" masterpagefile="~/adworks.master"%>! To create the content placeholders 1. Create the content container that references the SiteContentPlaceHolder in the AdWorks.master master page. Your code should look like the following: <asp:content id="sitecontentplaceholder" ContentPlaceHolderId="SiteContentPlaceHolder" runat="server"> </asp:content> 2. Create a table with a width and height of 100%, one row, and two cells, inside the content container tag. 3. The first cell should have a class of LightBlueTable, a width of 180 pixels, and contain a div tag with a class of BulletStyle, and a style attribute with font-weight: bold. 4. The second cell should contain a div tag with the class of EditorZoneBody. Both cells should have an attribute of valign= top. Your code should look like the following: <table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0"> <tr> <td class="lightbluetable" width="180px" valign="top"> <div style="font-weight: bold;" class="bulletstyle"> </div> </td> <td valign="top"> <div class="editorzonebody"> </div> </td> </tr> </table>