COMP2121 Exercise 3: Creating and Using ASP.NET Master Pages and controlling “look and feel” in with VWD

Master Pages

A master page is an ASP.NET file with the extension .master (for example, MySite.master) instead of .aspx. This exercise illustrates how to create a master page and several content pages. It includes the following tasks:

  • Creating a master page in Microsoft Visual Web Developer.
  • Creating an ASP.NET page with content that you want to display in the master page.
  • Running master pages to show different content.
  • Selecting a master page at run time.

It has a predefined layout that can include static text, HTML elements, and server controls. Master pages allow you to create a page layout for a template page and then create separate pages containing content that is merged with the master page at run time.

Ordinary C# .aspx pages have the following use for the @ Page directive:

<%@ Master Language="C#" %>

The master page is identified by a special @ Master directive that replaces the @ Page directive. The @Master directive can contain most of the same directives that a @ Control directive can contain. For example, the following master-page directive includes the name of a code-behind file, and assigns a class name to the master page.

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

In addition to the @Master directive, the master page also contains all of the top-level HTML elements for a page, such as html, head, and form. For example, a master page might use an HTML table for the layout, an img element for a company logo, static text for the copyright notice, and server controls to create standard navigation for the site. You can use any HTML and any ASP.NET elements as part of the master page.

Exercise 3(a) Creating a Master Page

Like a CSS file, the master page is a template for how pages on a site will look. You created a master page last week – or rather the Visual Studio site creation wizard set one up for you.

In this section, you’ll create another master page manually. You can then use a table to lay out a menu, a logo, and a footer that will appear on each page of your site. You will also work with a content placeholder, which is a region in the master page that can be replaced with information in a content page.

  1. Open your website from last week’s exercises.
  2. In Solution Explorer, right-click the name of your Web site, and thenclick Add New Item.
  3. Under Visual Studio installed templates, click Master Page.
  4. In the Name box, type Master1.
  5. This time, select the Place code in separate file check box. This will put the code in a separate code-behind file with a further .cs suffix. Last week, you used single-file ASP.NET page, and the code appeared in the main .aspx file when viewed in Source view, rather than a separate code file.
  6. In the Language list, click C# as before, and then click Add.

The new master page opens in Source view.

Note that the top of the page has that @ Master declaration described earlier. Also, the body of the page contains an <asp:contentplaceholder> control, which is the area of the master page where replaceable content will be merged from content pages at run time. You will work more with the content placeholder later. A page can contain more than one of these.

Laying Out the Master Page

The master page can contain any combination of static text and controls. You will now create and use a layout table to help you position elements that you create. Later, you will position the content placeholder control.

To create a layout table for the master page

  1. With the Master1.master file selected in Source view, set the target schema for validation to Microsoft Internet Explorer 6.0. To set this value, you can use either the drop-down list on the toolbar or select Options from the Tools menu, and then click Validation.
  2. Switch to Design view.
  3. From the drop-down list at the top of the Properties window, select DOCUMENT, and then set BgColor to a distinctive colour, such as blue.

The colour you select is not important. Later you will create a second master page without a colour to contrast with what you have selected here.

  1. Click the page where you want to place the layout table. (Note: Do not put the layout table inside the ContentPlaceHolder control)
  2. On the Layout menu, click Insert Table.
  3. In the Insert Table dialog box, click Template. In the list click Header, footer and side, and then click OK.

The template defines the arrangement of rows and cells in the table. The template you have selected creates three rows, and the middle row is split into two cells.

  1. In the middle row, click the leftmost column, and then in the Properties window, set its Width to 48
  2. Click the top row, and then set its Height to 48 in the Properties window
  3. Click the bottom row, and then set its Height to 48 in the Properties window. Note: You can set the width and height by dragging the table cell borders or by selecting the cell and setting values in the Properties window.
  4. Select all cells in the table and set BgColor to a different color than the background color, and set VAlign to top.

Exercise 3(b) Adding static content to the master page

You can now add example content to the master page that will appear on all pages:

  1. Click the bottom cell, and then type footer text such as Copyright 2005 Contoso Inc.
  2. In the Toolbox, from the Navigation control group, drag a Menu control into the top cell.
  3. Set the Menu control's Orientation property to Horizontal
  4. Click the smart tag on the Menu control, and click Edit Menu Items in the Menu Tasks dialog box. You now have a menu…
  5. Under Items, click the Add a root node icon twice to add two menu items:
  6. Click the first node, and then set Text to Home and NavigateUrl to Home.aspx.
  7. Click the second node, and then set Text to About and NavigateUrl to About.aspx.
  8. Click OK to close the Menu Item Editor dialog box.
  9. If you have a graphics file available to use as a logo, follow these steps to place it on the master page:
  10. In Solution Explorer, right-click the name of your Web site, and then click Add Existing Item.
  11. Navigate to your graphics file, select the graphic file, and then click Add.
  12. In the Toolbox, from the Standard group, drag an Image control to the middle left column of the table.
  13. Set the Image control's ImageUrl property to the name of the graphics file.

7.Positioning the content placeholder It is now OK to specify where the master page can display content at run time…

  1. Drag the ContentPlaceHolder control into the middle right cell.

The control's ID property is ContentPlaceholder1. Leave or change the name, but make a note - you will need to know it later.

2.Save the page.

Exercise 3(c) Creating Content for the Master Page

The content page is a specialized form of an ASP.NET page that contains only the content to be merged with the master page. A content page does not have the usual elements that make up an ASP.NET page, such as html, body, or form elements. The idea is that the content page adds the text and controls that you want to display when users request that page.

In this exercise, you will add two pages with content for the previously saved master page. The first is a home page and the second is an about page:

  1. In Solution Explorer, right-click the name of your Web site, and click Add New Item.
  2. Under Visual Studio installed templates, click Web Form.
  3. In the Name box, type Home.
  4. In the Language list, click the programming language you prefer.
  5. Select the Select master page check box, and then click Add.

The Select a Master Page dialog box appears.

  1. Click Master1.master, and then click OK.

A new .aspx file is created. The page contains an @ Page directive that attaches the current page to the selected master page with the MasterPageFile attribute, as shown in the following code example:

<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>

The page also contains an <asp:Content> element that you will work with next.

Exercise 3(d) Adding content to the Home page

  1. Switch to Design view.

The region you created as a ContentPlaceHolder control in the master page is displayed as a Content control in the new content page. The rest of the master page content is displayed so you can see the layout, but it appears dimmed because you cannot change it while editing a content page.

  1. From the drop-down list in the Properties window, click DOCUMENT, and then set Title to Contoso Home Page.

The title of each content page can be set independently, so that the correct title is displayed in the browser when the content is merged with the master page. The title information is stored in the content page's @Page directive.

  1. In the Content control, type Welcome to the Contoso Web Site, select the text, and then format the text as a Heading 1 by selecting the text and selecting Heading 1 from the Block Format drop-down list above the Toolbox.
  2. Press ENTER to create a new blank line in the Content control, and then type Thank you for visiting our site.

The text you add here is not important; you can type any text that will help you recognize this page as the home page.

  1. Save the page.

Exercise 3(e) Creating the “About” page & Testing the System

  1. Use the same steps that you used for the Home page to add a new content page named About.aspx.

Be sure to attach the new page to the Master1.master page as you did with the Home page.

  1. Change the page's title to Contoso About Page.
  2. In the content region, type About Contoso, and then format the text as a Heading 1 by selecting the text and selecting Heading 1 from the Block Format drop-down list above the Toolbox.
  3. Press ENTER to create a new line, and then type Since 1982, Contoso has provided high-quality software services.
  4. Save the page.
  5. Now, switch to the Home.aspx page, and then press CTRL+F5…

ASP.NET merges the content in the Home.aspx page with the layout in the Master1.master page into a single page and displays the resulting page in the browser. Notice that the URL of the page is Home.aspx; there is no reference in the browser to the master page.

7.Click the About link.

The About.aspx page is displayed. It is also merged with Master1.master page.

Exercise 3(f) Referencing Master Page Members

Code in the content pages can reference members on the master page, including any public properties or methods and any controls on the master page. In this part of the walkthrough, you will create a property on the master page, and then use the value of the property in the content pages. The premise is that the company name for the Web site is stored as a property in the master page, and any reference to the company name in the content pages is based on the master page property. The first step is to add a property to the master page:

  1. Switch to or open the Master1.master page.
  2. In Solution Explorer, right-click Master1.master, and then click View Code to open the code editor.
  3. Inside the class definition, type the following code.

public String CompanyName

{

get { return (String) ViewState["companyName"]; }

set { ViewState["companyName"] = value; }

}

The code creates a property named CompanyName for the master page. The value is stored in view state so that it is persisted between postbacks.

  1. Inside the class definition (but not inside the property code), add the following code.

void Page_Init(Object sender, EventArgs e)

{

this.CompanyName = "Contoso";

}

For this example, you will hard-code the value of the CompanyName property into the page.

You can now modify the content page to use the master page's CompanyName property.

Exercise 3(g): referencing the CompanyName property in the content page

  1. Switch to or open the Home.aspx page.
  2. Switch to Source view.
  3. At the top of the page, underneath the @ Page directive, add the following @ MasterType directive:

<%@ MasterType virtualpath="~/Master1.master" %>

The directive binds the content page's Master property, which you will use shortly, to the Master1.master page.

  1. Switch to Design view.
  2. In the Content control, change the text to Welcome to the Web site of .
  3. In the Toolbox, from the Standard group, drag a Label control onto the Content control, and place it after the static text so that the text reads:

Welcome to the Web site of [Label]

  1. Set the Label control's ID property to CompanyName.
  2. In Solution Explorer, right-click Home.aspx, and then click View Code to open the code editor.
  3. Inside the class definition, add the following code.

void Page_Load(Object sender, EventArgs e)

{

CompanyName.Text = Master.CompanyName;

}

The content page's Master property returns a reference to the master page as defined in the @ MasterType directive you added in step 3. You can now test the content page to be sure it is referencing the master page's CompanyName property correctly…

10.Switch to or open the Home.aspx page, and then press CTRL+F5 to run the page. The page is displayed in the browser, with the text Welcome to the Web site of Contoso

11.Close the browser. Switch to or open the Master1.master code-behind page.

12.Change the Page_Init handler to assign a different company name to the property, as in the following code example.

void Page_Init(Object sender, EventArgs e)

{

this.CompanyName = "New Company Name";

}

13.Switch to the Home.aspx page, and then press CTRL+F5 to run it again. This time, the updated company name appears in the page.

Notes

Several other issues you should be aware of when working with a master page…

  • In a real-world application, you would probably store information such as the company name in the configuration file and read it directly in the content pages. However, the scenario outlined here provides a simple illustration of how to reference master page members in content pages.
  • You can access members on the master page even without including an @ MasterType directive. However, to do so, you must cast the System.Web.UI.Page.Master property to the appropriate master page type (the Master property is null if a page has no master page). For more information, see Working with ASP.NET Master Pages Programmatically.
  • You can reference controls on the master page by using the Master.FindControls method. For more information, see Working with ASP.NET Master Pages Programmatically.

Exercise 3(h) Changing Master Pages Dynamically

Under some circumstances, it might be useful to change master pages dynamically; that is, to use code to set the master page for a content page. For example, you might want to let users select from several layouts and set the master page according to their preferences.

You will now add a second master page to the Web site, and then create buttons that allow the user to switch between one master page and another. Because the two master pages will be very similar, you will make a copy of the first master page and modify it to act as the second master page.

  1. In Solution Explorer, right-click Master1.master, and then click Copy.
  2. Right-click the name of the Web site, and then click Paste.

A master page is added to the Web site with the name Copy of master1.master.

  1. Right-click Copy of master1.master, click Rename, and then name the new master page Master2.master.
  2. Open Master2.master and, in the @ Master directive, change Master1 to Master2.

The completed page directive will look like the following code example.

<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>

  1. Switch to Design view.
  2. In the Properties window, in the drop-down list at the top, click DOCUMENT.
  3. Clear the BgColor property.

The new master page will look and function like Master1.master, but will have no background colour.