In this article, we shall learn how to change the Master page dynamically for a content page in ASP.NET.
Introduction
Master page allows us to share the common content as well as layout to multiple pages. The best example is to show same header and footer and the same layout across different pages of the website. For example on ITFunda.com - an ASP.NET online training website you can notice that all pages have same header and footer but in between content is different. The layout in which header and footer exists is the master page (.master) and rest content comes from the content page (.aspx page).
In this article, let us learn how to change master page dynacmially for the content pages in ASP.NET. To demonstrate this I have created a demo page.
Get hundreds of .NET Tips and Tricks and online ASP.NET training here.
Below is the code of my 1st master page.
MASTERPAGE.MASTER
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title>Home Page</title>
<asp:ContentPlaceHolder id runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="1" cellpadding="2" cellspacing="1">
<tr>
<td colspan="2">Menu 1 | Menu 2 | Menu 3 | Menu 4</td>
</tr>
<tr valign="top">
<td><h3>Left Panel</h3>Other contents goes here</td>
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">(C) all rights reserved.</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Below is the code of my 2nd master page.
MASTERPAGE2.MASTER
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs"
Inherits="MasterPage2" %>
<!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>
This master page doesn’t have html table and ContentPlaceHolder has been placed on the page without
using html table layout.
Now below is the code of my content page (.aspx). Notice that I am using MasterPage.master (1st Master page in this).
.ASPX PAGE (DEFAULT.ASPX)
<%@ Page Title="Default Home Page" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<p>This is the content written from the content page (.aspx) page.</p>
</asp:Content>
Below is the code behind of the content page (.aspx.cs)
.ASPX PAGE CODE BEHIND FILE
protected void Page_PreInit(object sender, EventArgs e)
{
this.MasterPageFile = "~/MasterPage2.master";
}
protected void Page_Load(object sender, EventArgs e)
{
}
By default, the default.aspx is using MasterPage.master master page, however we have set the MasterPageFile property of the page to the 2nd master page (MasterPage2.master) in the Page_PreInit event of this page. When we run the page, we get the output something like below.
OUTPUT
The page should have appeared into the tabular layout as this .aspx page was using MasterPage.master in the Page directive but due the code behind Page_PreInit event where we have changed the master page to MasterPage2.master the page is appearning like above.
Note that master page can only be changed if both master pages have the same number of ContentPlaceHolder with the same ContentPlaceHolderID.
Hope you are enjoying my series of articles on asp.net. Thanks for reading!
Keep learning and sharing your knowledge !