How to use a Master Page in ASP.NET

Dave

When creating a website you will always have common sections which are repeated on every page throughout your whole site. For example headers and footers, a navigation bar, a side bar, etc. are all sections in your site which do not change depending on which page is being browsed. With a Master Page you only need to create these common sections once – ASP.NET will handle the rendering of them on every page automatically. This is a great advantage because you don’t have to copy identical code to every single page of your website.

So, how can you make use of these master pages? Let me show you.

Add a master page to your ASP.NET Web Application and call it Site.Master. If you view the source for this page you should see code similar to the below:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterPageExample.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

The magic of the master page is in the ContentPlaceHolder tags. ASP.NET will automatically render your content pages within these tags. What this means is that you can add any common HTML to your master page (around the ContentPlaceHolder tags) and when the page is rendered the content from your other pages will be wrapped in the master page.

To show you how this works let’s add a header and a footer to our master page Site.Master. The header will be “My Company Logo” and the footer will be “My Company Footer”.

<body>
    <form id="form1" runat="server">
    <h1>My Company Logo</h1>
    <br />
    <br />
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <br />
    <br />
    <hr />
    <asp:Label ID="Label1" runat="server" Text="My Company Footer" Font-Size="XX-Small"></asp:Label>
    </form>
</body>

Now let’s add a default page to the project and tell it to render using the master page. This is easy to do, just open the Add New Item window and select Web Content Form. Name it Default.aspx and click Add. Now Visual Studio will display the Select a Master Page window with a list of your current master pages. Select Site.Master and click OK.

If you view the HTML code for the Default.aspx page we just added you will see something like the below:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterPageExample.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

As you can see the standard html, head, and body sections of an HTML page do not exist here. This is because the page will be using the HTML from our Site.Master so there is no need to repeat it. We are telling ASP.NET to render this page using the master page with this statement MasterPageFile="~/Site.Master". The two Content sections represent the master page’s ContentPlaceHolder sections. This is where we put our page code.

The first Content placeholder represents the head section of the page. The second one represents the actual page content. Let’s add some code to the Default.aspx page.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterPageExample.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="This is my content page."></asp:Label><br />
    <br />
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/About.aspx">About my Company</asp:HyperLink>
</asp:Content>

Let’s quickly add another Web Content Form to the project and also associate it with Site.Master. We can call it About.aspx. Add some content to this page as shown below.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="MasterPageExample.About" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="About my Company"></asp:Label>
</asp:Content>

Now if you run the project you will see that the page displayed includes the header, the footer, and the content you added. If you click on the link About my Company that we added, you will be taken to the About.aspx page and the header and footer will also be on this page.

And that’s the beauty of the master page. It’s a great way to organise your pages. You can design your website in such a way that when you decide to update the look of your site you only have to change the style of the master page and it will be visible throughout the whole website.

I hope you liked this article. Stay tuned for more soon.

Dave

Related posts:

This website uses cookies