ASP.NET provides a technique called Master Page to allow developers define a template that can be used across the pages in your site as the common layout. With Master Pages you can determine the layout of your site. Additionally, Master Pages provide efficiency in terms of designing your interface and performing some common programming tasks.
For example, if you have a menu that you want to display on all the pages in your web site, then you may place this menu on the Master Page and the other pages (that uses the Mater Page as the base layout template) will have the menu on the interface automatically. Another example is that if you plan to have a log in control on your site and want to persist it across the pages, Master Page will be the the place where you will want to implement the log in functionality.
There are several major things that differentiate Master pages from other ordinary *.aspx pages
- They have *.master extension (as opposed to *.aspx),
- The first line of the html markup starts with <%@Master page directive (as opposed to <%@Page in web forms)
- They contain a special ASP.NET control which is ContentPlaceHolder (this is where the contents of web forms will be placed).
You can add a Master Page from the Add -> New Item menu. Then, you should see the following window. Please search using master keyword, then choose Web Forms Master Page from the list.
The master page will come with two initial content placeholders, one in the <head> section, and the other one in the <body> . The content placeholder with ID “head” is where the scripts from the content pages goes to. Each page might have a different script in this placeholder. If a script should be executed across all pages, then this script should be included outside of the “head” content placeholder in the master page.
The content placeholders define the regions where the content will change depending on the page displayed. In other words, the content unique to other pages (called content pages) is displayed in the content placeholders. There must be one or more content placeholders defined in a master page. These placeholders are needed by the *.aspx pages to display their content.
Now, we will design our Master Page and use it as template for other pages. Our Master Page will have a header and footer and these elements will appear on the other pages that uses the master page.
Let’s restructure the page as follows:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MasterPages.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<h1>This is HEADER!</h1>
</td>
</tr>
<tr>
<td>
<asp:ContentPlaceHolder ID="cph_Body" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td>
<h4>This is FOOTER!</h4>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Please note that above we have two placeholders, head, and cph_Body. Anything outside of the content placeholders is where you need to design the layout of the site which will be used by other pages. The inside of placeholders will display the content specific to the pages. Let’s add a new page that uses the master page we have just created as the template. Please right-click on the project name in the solution explorer and navigate to Add -> New Item. In the dialog box below, search with “master” keyword and choose Web Form with Master Page:
Then you will see a new dialog box, where you need to choose the master page existing in your project:
Here is how your page should look like:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MasterPages.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="cph_Body" runat="server"> </asp:Content>
Our page, contains a new asp.net element which is called Content. As you may see above, we have TWO Content controls, one has ContentPlaceHolderId set to “head” and the other one has it set to “cph_Body“. These are the IDs of the content placeholders that we have created in the master page. In the content pages that use the master page as the layout, by default a separate Content control will be added for each ContentPlaceHolder control defined in the master page. One Content control is for “head” content placeholder and the other Content control is the “cph_Body” as indicated by the ContentPlaceHolderID attribute.
We will define a styling element in Content1 control that is associated with “head” placeholder. With this styling element we will make the background color yellow when the user visits WebForm1.aspx page. Please see the code snippet below.
However, we will use the second Content control which is associated with cph_Body placehold. The page content needs to be placed inside this Content control. Otherwise, you will receive an error. Let’s put a sample text to the cph_Body.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="MasterPages.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style>
body{
background-color:yellow;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_Body" runat="server">
<h2>This is my first page!</h2>
</asp:Content>
When you switch to Design mode, you will see that the outside of the body text you have just added is grey indicating that this area belongs to Master Page and cannot be edited from the current content page (WebForm1.aspx).
Let’s add another page with master page, and name it WebForms2.aspx. Please add a body text to this new page. It should look like this:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="MasterPages.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
//empty
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_Body" runat="server">
<h2>This is my second page!</h2>
</asp:Content>
Next, let’s add two link buttons in our master page that will navigate users to the content pages:
Please run and test the application. It should be working fine.
Let’s do something more before we finish this tutorial. Let’s open the master page (Site1.Master) and add a style (please make sure it is outside of the placeholder):
//other markup
<style> body { background-color: wheat; } </style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
//other markup
Please test the application. You will see that the background color is yellow in WebForm1.aspx. However, it becomes wheat in WebForm2.aspx. This is because WebForm2.aspx follows the styling of the Master Page.
One final note is that although as the designer you work on two separate pages, Content pages and Master page, the user will see only a single page. ASP.NET compiler will merge the content pages and master page and send it to the users’ browser as a single html file.
If you are further interested, here are some useful resources:
Asp.Net (C#) and Entity Framework Code-First 