Open Visual Web Developer.

On the File menu, click New Web Site.

The New Web Site dialog box appears.

Under Visual Studio installed templates, click ASP.NET Web Site.

In the Location box, enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\WebSites.

In the Language list, click the programming language you prefer to work in.

Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

In Solution Explorer, right-click the name of your Web site, and then click Add New Item.

Under Visual Studio installed templates, click Master Page.

In the Name box, type Master1.

Select the Place code in separate file check box.

Note:
This walkthrough assumes you are using code-behind files for all pages. If you are using a single-file ASP.NET page, the code illustrated in this walkthrough will work, but will appear in Source view, not in a separate code file.

In the Language list, click the programming language you prefer and then click Add.

The new master page opens in Source view.

At the top of the page is an @ Master declaration instead of the @ Page declaration normally found at the top of ASP.NET pages. The body of the page contains a 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 in this walkthrough.

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.

Switch to Design view.

From the drop-down list at the top of the Properties window, select DOCUMENT, and then set BgColor to a distinctive color, such as blue.

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

Click the page where you want to place the layout table.

Note:
Do not put the layout table inside the ContentPlaceHolder control.

On the Table menu, click Insert Table.

In the Insert Table dialog box, create a table with three rows and one column, and then click OK.

Place the cursor inside the second row of the table.

On the Table menu, in the Modify submenu, click Split Cells.

In the Split Cells dialog box, select Split into columns, and then click OK.

Make the following settings:

• In the middle row, click the leftmost column, and then set its Width to 48 in the Properties window.

• Click the top row, and then set its Height to 48 in the Properties window.

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

Select all cells in the table and set BgColor to a different color than the background color.

Click the bottom cell, and then type footer text such as Copyright 2007 Contoso Inc.

In the Toolbox, from the Navigation control group, drag a Menu control into the top cell.

Create a menu by following these steps:

1. Set the Menu control's Orientation property to Horizontal.

2. Click the smart tag on the Menu control, and click Edit Menu Items in the Menu Tasks dialog box.

Under Items, click the Add a root node icon twice to add two menu items:

1. Click the first node, and then set Text to Home and NavigateUrl to Home.aspx.

2. Click the second node, and then set Text to About and NavigateUrl to About.aspx.

3. Click OK to close the Menu Item Editor dialog box.

If you have a graphics file available to use as a logo, follow these steps to place it on the master page:

1. In Solution Explorer, right-click the name of your Web site, and then click Add Existing Item.

2. Navigate to your graphics file, select the graphic file, and then click Add.

3. In the Toolbox, from the Standard group, drag an Image control to the middle left column of the table.

4. Set the Image control's ImageUrl property to the name of the graphics file.

Drag the ContentPlaceHolder control into the middle right cell. The ContentPlaceHolder item is in the Standard tab of the Toolbox.

The control's ID property is ContentPlaceholder1. You can leave this name or change it. If you change the name, make a note of the name because you will need to know the name later.

Save the page.

In Solution Explorer, right-click the name of your Web site, and click Add New Item.

Under Visual Studio installed templates, click Web Form.

In the Name box, type Home.

In the Language list, click the programming language you prefer.

Select the Select master page check box, and then click Add.

The Select a Master Page dialog box appears.

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.

[Visual Basic]

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

[C#]

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

The page also contains an Content control element that you will work with next.

Switch to Design view.

The ContentPlaceHolder controls in the master page are displayed as Content controls in the new content page. The rest of the master page content is displayed so that you can see the layout. However, it appears dimmed because you cannot change it while you are editing a content page.

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

You can set the title of each content page 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.

In the Content control that matches ContentPlaceHolder1 on the master page, type Welcome to the Contoso Web Site.

Select the text then format it as a heading by selecting Heading 1 from the Block Format drop-down list above the Toolbox.

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.

Save the page.

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.

Change the page's title to Contoso About Page.

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.

Press ENTER to create a new line, and then type Since 1982, Contoso has provided high-quality software services.

Save the page.

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.

Click the About link.

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

Switch to or open the Master1.master page.

In Solution Explorer, right-click Master1.master, and then click View Code to open the code editor.

Note:
By default, Visual Web Developer creates pages that use the code-behind model. If you prefer, you can create code by using the single-file model. For more information, see ASP.NET Web Page Code Model.

Inside the class definition, type the following code.

Public Property CompanyName() As String
    Get
        Return CType(ViewState("companyName"), String)
    End Get
    Set(ByVal Value As String)
        ViewState("companyName") = Value
    End Set
End Property

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.

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

Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
       Handles Me.Init
   Me.CompanyName = "Contoso"
End Sub

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.

Switch to or open the Home.aspx page.

Switch to Source view.

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.

Switch to Design view.

In the Content control, change the text to Welcome to the Web site of .

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]

Set the Label control's ID property to CompanyName.

In Solution Explorer, right-click Home.aspx, and then click View Code to open the code editor.

Inside the class definition, add the following code.

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _
        Handles Me.Load
    CompanyName.Text = Master.CompanyName
End Sub

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.

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

Close the browser.

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

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

Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _
       Handles Me.Init
   Me.CompanyName = "New Company Name"
End Sub

void Page_Init(Object sender, EventArgs e)
{
   this.CompanyName = "New Company Name";
}

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.

In Solution Explorer, right-click Master1.master, and then click Copy.

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.

Right-click Copy of master1.master, click Rename, and then name the new master page Master2.master.

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="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>

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

Switch to Design view.

In the Properties window, in the drop-down list at the top, click DOCUMENT.

Clear the BgColor property.

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

Open the code file for Master2.master and change the class name in the master page's code-behind file from Master1 to Master2 to match the value of the Inherits attribute in the page's @ Master directive.

The code will look like the following example:

Partial Class Master2

public partial class Master2 : System.Web.UI.MasterPage

Switch to or open the Master2.master page.

In the Toolbox, from the Standard node, drag a LinkButton control onto the page and place it below the menu in the top table cell.

Set the button's Text property to Colorful.

Double-click the button to create a handler for its Click event, and then add the following highlighted code.

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
        Handles LinkButton1.Click
    Session("masterpage") = "Master1.master"
    Response.Redirect(Request.Url.ToString())
End Sub

[C#]

void LinkButton1_Click(Object sender, EventArgs e)
{
   Session["masterpage"] = "Master1.master";
   Response.Redirect(Request.Url.ToString());
}

The code loads the file name of the alternate master page into a persistent session variable, and then reloads the current page. (The Url property returns a Uri object that references the current page.) Shortly, you will create code in the content page that will use the name of the master page.

Switch to or open the Master1.master page in Design view.

Add a LinkButton control as you did in steps 1 and 2, and set its Text property to Plain.

Double-click the Plain button to create a handler for its Click event, and then add the following highlighted code.

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_
        Handles LinkButton1.Click
    Session("masterpage") = "Master2.master"
    Response.Redirect(Request.Url.ToString())
End Sub

void LinkButton1_Click(Object sender, EventArgs e)
{
   Session["masterpage"] = "Master2.master";
   Response.Redirect(Request.Url.ToString());
}

This code is the same as that for the button in the Master2.master page, except that it loads an alternate master page.

Switch to or open the About.aspx page.

Note:
The Home page you have already created contains an @ MasterType directive that effectively binds it to a single master page (Master1.master). Therefore, you will not be able to assign master pages dynamically to the Home page and will instead work with other pages you have created.

In Solution Explorer, right-click About.aspx, and then click View Code to open the code editor.

Inside the class definition, add the following code.

Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _
        Handles Me.PreInit
   If Not Session("masterpage") Is Nothing Then
      Me.MasterPageFile = CType(Session("masterpage"), String)
   End If
End Sub

void Page_PreInit(Object sender, EventArgs e)
{
   if(Session["masterpage"] != null)
   {
      this.MasterPageFile = (String) Session["masterpage"];
   }
}

The code sets the value of the current page's MasterPageFile property to the value in the session variable, if any. This code must run in the Page_PreInit handler; it cannot run in a handler that occurs any later than the Page_PreInit handler (for example, in the Page_Init handler), because the master page must be established so that the page can create an instance of it before any further initialization can occur.

In the About.aspx page, press CTRL+F5 to run the page.

The page is displayed in the browser merged with its default master page, Master1.master.

Click the Plain link.

The page is redisplayed, this time merged with Master2.master, which has no background color.

Click the Colorful link.

The page is displayed using Master1.master again.