Master Pages

ASP.NET master pages provide a simple way to maintain consistency when developing web sites.

This tutorial takes you through the process of building a masterpage (template) based website

Creating the master page

1. Identify a pre-existing HTML website for which you have the source code. If you do not have such a site, download the SimpleHTMLSite.zip and unzip it.
2. The next stage is to identify how many sections of the website differ from page to page. It may be as simple as the page title and some content between the menu and footer, or there may be multiple different elements
3. From one of the pages (in the root of the site), remove all of the unique sections of content from that page. Replace each block of content with a comment indicating what has been removed, e.g.

   <!-- Contained the primary h1 element for the page-->

   You should be left with a page which contains the elements common to every page on the site. (If you started with a website that was built using a template, this step may have been very easy.)
4. In an empty ASP.NET Web Application project (with references for Web forms added), right click on the project name and add a new item. Choose 'Web Forms Master Page' from the list, and name is something like Site.master
5. Within the newly created file, you will see some code is already in place. In particular, pay attention to the two ContentPlaceHolder elements shown below

   <asp:ContentPlaceHolder ID="head" runat="server">
   </asp:ContentPlaceHolder>

   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   
   </asp:ContentPlaceHolder>

6. These content placeholders are essentially markers which identify where unique content on each page will be located. The placeholder in the head section is already semi-appropriately named, but for clarity, change the head's content placeholder ID to headContentPlaceholder
7. If you only have one unique visible section (evidenced by the comments you created earlier) in the body of your HTML page, change the existing content placeholder's ID to mainContentPlaceholder. If you have multiple unique sections then you will need to add more content placeholders from the toolbox and name them appropriately. It is much easier to create all the content placeholders that you will need at this stage, than to add them later (i.e. after you have started to create child pages)
8. Copy and paste the relevant elements from the stripped-back page you edited earlier, ensuring that there is a content placeholder at each part of the file you previously removed content from.
9. As we will now be using ASP.NET, rename the file extensions in the site's menu to end in .aspx, and for the home page (likely to have an existing name of index.html or similar), ensure it is named default.aspx

Creating a web form based on a master page

1. Right click on the project and choose 'Add -> New item', and from the list select "Web Form with Master Page". Name the page appropriately based on the page you are reproducing from the original site.
2. You will be prompted to select a master page, so select the master page you previous created
3. You should see a page similar to the one below:

   <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterPageTest.Default" %>
   <asp:Content ID="Content1" ContentPlaceHolderID="headContentPlaceholder" runat="server">
   </asp:Content>
   <asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceholder" runat="server">
   </asp:Content>

4. Any content placed in between the opening and closing <asp:Content> tags will be inserted into the relevant content placeholders in the master page to form a complete page.
5. Using your original site, add the content that you previously deleted into the appropriate content area.
6. The only thing that is not quite the same is setting the page title - this can be set in the page declaration of the web form in the quotation marks at Page Title="" in the first line of the page. ASP.NET will insert this title into the document's <title> element.
7. Using the same process, create the remaining pages for the site.
8. Test each of the pages in the browser
9. If you have folders with files in as part of your site, or images in the master page, you will find that these may be broken in pages located in folders. Ensure you read the relative URLs tutorial to understand how to address this issue.