How to convert an ASP.NET 2 page to use Masterpages
If you have made several ASP.NET 2 webpages, and you decide that you want to convert them to use MasterPages, how do you go about it? There are plenty of tutorials on the web about how to create pages from scratch, using MasterPages, but I could find no advice on how to convert existing pages to use a master page. (BTW, the pages I'm talking about were made in ASP.NET 2 in Visual Web Developer Express, using c# code-behind pages.) So, this page describes the technique I worked out to do this.
First, what exactly are Master Pages?
Master Pages are used to give all the webpages on your website a standard look
and feel, such as a standard header, menu system, footer etc. All the standard
elements are placed on the Master Page, which also contains a slot for the content
page. Each content page is then framed within the Master Page so that all the
standard elements of the master page appear on each page. See the diagram for
how it is presented in Visual Web Developer.
Adding a Master Page to an existing web page
The first step is to create your Master Page. To do this:
- Click File / New File / Master Page. This creates an empty Master Page containing a control called ContentPlaceHolder1. The placeholder is where the normal web page will fit within this Master Page template.
- Design the Master Page however you like, such as adding standard naviagation or images. In fact, the really clever bit is that you can add more than one ContentPlaceHolder if you want the Master Page to hold more than one piece of content (e.g. a standard page that contains two of your web pages)
- BTW, you don't need to give the Master Page a <title> because the content pages provide the title to the Master Page.
Now examine the source code of one of your content pages. In the first line you will find:
<%@ Page Language="C#" AutoEventWireup="true"
... %>
You need to add these two new parameters into that line:
MasterPageFile="myMasterPage.master"
Here you provide the name of the master page that you want the content page to be nested in.Title="My Title"
Here you provide the title that you want the Master Page to use.
If the content page contains this line:
<!DOCTYPE html PUBLIC ... >
then delete it, as the Master Page also contains this line.
The Master Page contains all the HTML codes for the <head> and starting and ending the <body>, so you must remove all the following top part of your content page:
<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 ending section:
</form>
</body>
</html>
The main content of your page will now be contained 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 something like this:
<%@ Page Language="C#" AutoEventWireup="true"
... MasterPageFile="myMasterPage.master" Title="My Title"
%>
<script>If you've got any scripts in your page then leave them here</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceholder1"
Runat="Server">
<div>
...... the main content of your page ....
</div>
</asp:Content>
You have now converted a content page to use a Master Page. It is not too difficult, eh?
How to create a Master Page from scratch
If you already have a Master Page and you want to create a page from scratch to use it, then things are much more simple:
- Make the MasterPage.
- Click on File / New File / New Web Form and make sure that "Select Master Page" is checked. When you click OK, you will be asked for the name of the Master Page
- Create the new content page in the slot inside this MasterPage.