Tuesday, 26 July 2011

Nesting Master Pages with ASP.NET 4.0 and C#


This tutorial will demonstrate how to nest master pages within other master pages using ASP.NET 4.0 and C#.

Adding the Main Master Page
To demonstrate nesting master pages we will need to create two master pages, a main master page and a sub master page. Then, we will derive a content page from the sub master page to demonstrate how the pages all link together. At this point I have created a new ASP.NET Empty Web Site. To begin:
  1. Right click the project in your solution explorer.
  2. Select add new item...
  3. Select a master page.
  4. Name it 'MainMasterPage.master'.
  5. Click add.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

This is the going to be the main page that we derive the other pages from. When you created the page, it setup a content place holder for us named 'ContentPlaceHolder1'. We need to change that to 'MainMasterContent'. Also, above the content place holder I am going to add the following text 'Main Master Page' and set it to bold with a few break lines after it. The code for the MainMasterPage.master should look like this:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainMasterPage.master.cs" Inherits="MainMasterPage" %>
 
<!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>
        <strong>Main Master Page</strong> <br /> <br />
        <asp:ContentPlaceHolder id="MainMasterContent" runat="server">
            
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Adding the Sub Master Page
The next thing we need to do is add in another master page that will actually be encapsulated in the main master page. To do this:
  1. Right click the project in your solution explorer.
  2. Select add new item...
  3. Select a master page.
  4. Name it 'SubMasterPage.master'.
  5. Ensure that the Select master page option is checked.
  6. Click add.
  7. Select MainMasterPage.master.
  8. Click ok.
This masterpage has generated some content based on the master page that we have selected. However, because we want to add further content to this page, we need to add a content place holder here. To do this, add the text 'Sub Master Page' in bold followed by a few break lines to the MainMasterContent. Then, add a new content place holder here with an id 'SubMasterContent'. The SubMasterPage.master code should look like this:
<%@ Master Language="C#" MasterPageFile="~/MainMasterPage.master" AutoEventWireup="true" CodeFile="SubMasterPage.master.cs" Inherits="SubMasterPage" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainMasterContent" Runat="Server">
    <strong>Sub Master Page</strong> <br /> <br />
    <asp:ContentPlaceHolder id="SubMasterContent" runat="server">
        
    </asp:ContentPlaceHolder>
 
</asp:Content>

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud servers! 

Adding the Content Page
Finally, we need to add a page that inherits from our SubMasterPage which inherits from the MainMasterPage. To do this:
  1. Right click the project in your solution explorer.
  2. Select add new item...
  3. Select a web form.
  4. Name it 'Default.aspx'.
  5. Ensure that the Select master page option is checked.
  6. Click add.
  7. Select SubMasterPage.master.
  8. Click ok.
Notice that a content tag has been generated corresponding to the 'SubMasterContent' content place holder we added into our second master page. In this content tag we can add the content to our page. I am going to add 'Page Content' followed by a break line and copy that about 4 times. The Default.aspx code should look like this:
<%@ Page Title="" Language="C#" MasterPageFile="~/SubMasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="SubMasterContent" Runat="Server">
    Page Content <br />
    Page Content <br />
    Page Content <br />
    Page Content <br />
</asp:Content>

Testing
To actually test this out and see what this has done, load up the web site. Notice you see a page that contains the content from our main master page, then sub master page, then the Default.aspx page that looks something like this:
 

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

What is happening here is that our main master page contains a content place holder in which the content from the sub master page is added. Likewise, the sub master page contains a content place holder in which the content from the Default.aspx page is added. Furthermore, each master page can contain its own content such as the headers for each master page in this example.

Thank you for reading this tutorial, check us out for more on Master Pages.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)