Converting Existing Pages to use MasterPages in ASP.NET 2
 
 

MasterPages in ASP.NET 2

ASP Tutorials > Master Pages

I created several ASP.NET 2 pages, and got them all working nicely, then decided I'd like to wrap the lot up with a nice menu system, utilizing the handy Master Pages system of ASP.NET. I looked all over for tutorials on this, but all I found was explainations of how to make a page that uses a MasterPage from scratch, rather than how to convert several existing pages to use a Master Page. So, this page you are reading here describes what I had to work out for myself: How to take a load of pages you have made already and shoe-horn them into a Master Page. (I'm using ASP.NET 2, C#, and Visual Web Developer 2005 Express)

What are Master Pages?

Oh, just to describe what we are talking about here, a Master Page can be used to add standard elements to lots of the pages of your website, such as having exactly the same menu on each page. You put the menu into one Master Page, and the menu then appears on all the pages that use this Master Page. The Master Page is like a template that contains a hole in it. The hole gets filled with the individual contents of each web page, and the Master Page stuff appears around the hole, as you can see in the picture below.

If you are Starting from Scratch

Just for the record, if you want to know what all the other tutorials I read say about Master Pages, the answer is this:

  1. Make a MasterPage.
  2. Click on File / New File and make a new Web Form, but make sure the "Select Master Page" checkbox is checked. The wizard then asks you for the name of your existing Master Page
  3. Build the new page in the "hole" inside the MasterPage.

How to Convert Existing Pages to Use a Master Page

First, you need to make your Master Page if you don't have one already. This is done as follows:

  1. Click File / New File and select Master Page. This creates an empty Master Page with a box in it called ContentPlaceHolder1. This placeholder is where the actual content of your real page will go.
  2. Customize this Master Page. You can add anything you like around the ContentPlaceHolder. You can also add a second (or third!) ContentPlaceHolder if you want an advanced Master Page that holds more than one piece of content.
  3. Don't both giving the Mater Page a title, because the individual content pages provide the title to the Master Page.

Next, get a content page that you already have, and look at its source code. Inside the first line that says:

<%@ Page Language="C#" AutoEventWireup="true" ... %>

You need to add these two new parameters:

  1. MasterPageFile="myMasterPage.master"
    This tells the page to use the Master Page that you specify.
  2. Title="My Title"
    This lets the content page tell the Master Page what title to display.

If the file contains a line:

<!DOCTYPE html PUBLIC ... >

then remove it.

The Master Page contains all the HTML codes for starting and ending the page, so you must remove all of this part:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>blah blah blah</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">

and this end part:

</form>
</body>
</html>

The main content of your page will now be floating in just a <div>...</div> tag, so wrap it up inside a Content component using these lines of code:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceholder1" Runat="Server">

and

</asp:Content>

It should now look like this:

<%@ Page Language="C#" AutoEventWireup="true" ... MasterPageFile="myMasterPage.master" Title="something" %>
<script>If you've got any script stuff in you page, it sits here</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceholder1" Runat="Server">
<div>
...... main part of your page ....
</div>
</asp:Content>

That's it. Compile it and you will get your page appearing inside the Master Page template you selected.

This page last updated on 6 November 2006
 
 

This ASP.NET tutorial is part of the ASP section of WhereCanIBuyIt?