ASP.NET Tutorial/Development/Master page
Содержание
- 1 A Master Page enables you to share the same content among multiple content pages.
- 2 Associate different Master Pages dynamically with a content page
- 3 Change master page in page init event
- 4 Deal with the relative path between master page and content page
- 5 Dynamically change master page
- 6 Exposing Master Page Properties
- 7 How Master Pages and Content Pages Are Connected
- 8 Loading Master Pages Dynamically for Multiple Content Pages
- 9 Master page with default content
- 10 Modifies the Master Page <meta> tags (the tags used by search engines when indexing a page).
- 11 Modify a control in a Master Page by using the FindControl() method in a content page.
- 12 Multipart master page
- 13 Nesting Master Pages
- 14 Simplest Master page
- 15 Table layout master page
- 16 Using the Page Header Property
- 17 Using the Title Attribute
- 18 What is a Master page
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
font:14px Arial,Sans-Serif;
}
.content
{
margin:auto;
width:700px;
background-color:white;
border:Solid 1px black;
}
.leftColumn
{
float:left;
padding:5px;
width:200px;
border-right:Solid 1px black;
height:700px;
}
.rightColumn
{
float:left;
padding:5px;
}
.clear
{
clear:both;
}
</style>
<title>Simple Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="leftColumn">
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server"/>
</div>
<div class="rightColumn">
<asp:contentplaceholder
id="ContentPlaceHolder2"
runat="server"/>
</div>
<br class="clear" />
</div>
</form>
</body>
</html>
The content page uses the Master Page, Default.master.
The Master Page is associated through the MasterPageFile attribute.
This attribute contains the virtual path to a Master Page.
You must place all the content contained in a content page within the Content controls.
Otherwise, you get an exception.
File: SimpleContent.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
</asp:Content>
Associate different Master Pages dynamically with a content page
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<script runat="server">
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request["master"] != null)
{
switch (Request["master"])
{
case "Dynamic1":
this.MasterPageFile = "Default.master";
break;
case "Dynamic2":
this.MasterPageFile = "MasterDefault.master";
break;
}
}
}
</script>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Select a Master Page:
<ul class="selectMaster">
<li>
<a href="Default.aspx?master=Default">Dynamic Master 1</a>
</li>
<li>
<a href="Default.aspx?master=MasterDefault">Dynamic Master 2</a>
</li>
</ul>
</asp:Content>
Change master page in page init event
File: Default.aspx
<%@ Page Language="C#"
MasterPageFile="~/Default.master"
AutoEventWireup="true"
CodeFile="DynamicContentPage.aspx.cs"
Inherits="DynamicContentPage_aspx"
Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">Sample content</asp:Content>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class DynamicContentPage_aspx : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
this.MasterPageFile = "TableMaster.master";
}
}
File: Default.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="SiteTemplate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
<i>This is a simple footer.</i></div>
</form>
</body>
</html>
File: Default.master.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class SiteTemplate : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
File: TableMaster.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="TableMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td colspan="2" style="background: #ffccff">
<h1>My Header</h1>
</td>
</tr>
<tr>
<td style="background: #ffffcc" >
<asp:treeview ID="Treeview1" runat="server" Width="150px">
<Nodes>
<asp:TreeNode Text="Root" Value="New Node">
<asp:TreeNode Text="Page 1" Value="Page 1"></asp:TreeNode>
<asp:TreeNode Text="Page 2" Value="Page 2"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:treeview>
</td>
<td>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
<tr>
<td colspan="2" style="background: #ccff33">
<i>My Footer</i>
</td>
</tr>
</table>
</form>
</body>
</html>
File: TableMaster.master.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class TableMaster : System.Web.UI.MasterPage
{
public bool ShowNavigationControls
{
set { Treeview1.Visible = value; }
get { return Treeview1.Visible; }
}
}
Deal with the relative path between master page and content page
use the Page.ResolveUrl() method to translate an application relative URL into an absolute URL.
File: MasterPages\ImageMaster.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Image Master</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="<%=Page.ResolveUrl("~/MasterPages/Logo.gif") %>" alt="Website Logo" />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />
</div>
</form>
</body>
</html>
Dynamically change master page
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="Simple1.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="Default"
Title="Dynamic Masters"
%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentOfThePage" runat="server">
<h2>
This content page is currently bound to <span style="color:Blue">
<% =this.MasterPageFile %></span>.
</h2>
</asp:Content>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
MasterPageFile = "simple2.master";
}
}
File: simple1.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Hello, master pages</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="HeaderPanel" runat="server" BorderStyle="Outset"
BorderWidth="1px" Height="50px" Width="100%">
<asp:Label style="margin:5px;" ID="TitleBox" runat="server" EnableTheming="False" Font-Bold="True" Font-Names="Impact"
Text="Programming ASP.NET 3.5" Font-Size="XX-Large" ForeColor="Yellow" Width="100%"></asp:Label>
</asp:Panel>
<asp:contentplaceholder id="ContentOfThePage" runat="server">
</asp:contentplaceholder>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Outset"
BorderWidth="1px" Width="100%" HorizontalAlign="Right">
<asp:Label style="margin:8px;" ID="SubTitleBox" runat="server" EnableTheming="False"
Font-Bold="True" Font-Names="Lucida Console"
Text="Dino Esposito" Font-Size="Large" ForeColor="Orange"></asp:Label>
</asp:Panel>
</div>
</form>
</body>
</html>
File: simple2.master
<%@ Master Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Hello, master pages</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="HeaderPanel" runat="server" BorderStyle="Outset"
BorderWidth="1px" Height="50px" Width="100%">
<asp:Label style="margin:5px;" ID="TitleBox" runat="server" EnableTheming="False" Font-Bold="True" Font-Names="Impact"
Text="Programming ASP.NET 3.5" Font-Size="XX-Large" ForeColor="Yellow" Width="100%"></asp:Label>
</asp:Panel>
<asp:contentplaceholder id="ContentOfThePage" runat="server">
</asp:contentplaceholder>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Outset"
BorderWidth="1px" Width="100%" HorizontalAlign="Right">
<asp:Label style="margin:8px;" ID="SubTitleBox" runat="server" EnableTheming="False"
Font-Bold="True" Font-Names="Lucida Console"
Text="Dino Esposito" Font-Size="Large" ForeColor="Orange"></asp:Label>
</asp:Panel>
</div>
</form>
</body>
</html>
Exposing Master Page Properties
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
public string BodyTitle
{
get { return ltlBodyTitle.Text; }
set { ltlBodyTitle.Text = value; }
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
}
.content
{
margin:auto;
width:700px;
background-color:white;
padding:10px;
}
h1
{
border-bottom:solid 1px blue;
}
</style>
<title>Property Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1><asp:Literal ID="ltlBodyTitle" runat="server" /></h1>
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server" />
</div>
</form>
</body>
</html>
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<%@ MasterType VirtualPath="~/Default.master" %>
<script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
{
Master.BodyTitle = "The Body Title";
}
}
</script>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
</asp:Content>
How Master Pages and Content Pages Are Connected
A master page starts with a Master directive that specifies the same information.
<%@ Master Language="C#"
AutoEventWireup="true"
CodeFile="Default.master.cs"
Inherits="SiteTemplate" %>
The ContentPlaceHolder is like any ordinary control.
<%@ Master Language="C#"
AutoEventWireup="true"
CodeFile="Default.master.cs"
Inherits="SiteTemplate" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
><br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<i>This is a simple footer.</i>
</form>
</body>
</html>
ASP.NET links your page to the master page with attribute named MasterPageFile
<%@ Page Language="C#"
MasterPageFile="~/Default.master"
AutoEventWireup="true"
CodeFile="SimpleContentPage.aspx.cs"
Inherits="SimpleContentPage"
Title="Untitled Page" %>
path ~/ is to specify the root website folder.
The Page directive has another new attribute Title.
Title attribute overrides the title specified in the master page.
The content page can¡�t define anything provided in the master page,
including the <head> section,
the root <html> element,
the <body> element, and so on.
The content page supply a Content tag that corresponds to the ContentPlaceHolder in the master page.
<%@ Page Language="C#"
MasterPageFile="~/Default.master"
AutoEventWireup="true"
CodeFile="SimpleContentPage.aspx.cs"
Inherits="SimpleContentPage"
Title="Content Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<br />
Here"s some new content!
<br />
</asp:Content>
ContentPlaceHolderID attribute in the <Content> tag must match the ContentPlaceHolder specified in the master page exactly.
Loading Master Pages Dynamically for Multiple Content Pages
After registering the DynamicMasterPage class, every page in your application automatically inherits from the new base class.
Every page inherits the new OnPreInit() method and every page loads a Master Page dynamically.
File: DynamicMasterPage.cs
using System;
using System.Web.UI;
using System.Web.Profile;
public class DynamicMasterPage : Page
{
protected override void OnPreInit(EventArgs e)
{
this.MasterPageFile = (string)Context.Profile["MasterPageFile"];
base.OnPreInit(e);
}
}
After you create a new base Page class, you need to register it in the web configuration file.
<configuration>
<system.web>
<pages pageBaseType="DynamicMasterPage" />
<profile>
<properties>
<add
name="MasterPageFile"
defaultValue="Dynamic1.master" />
</properties>
</profile>
</system.web>
</configuration>
Master page with default content
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Untitled Page" %>
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
this is a test<br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
This is default content.<br />
</asp:contentplaceholder>
<i>This is a simple footer.</i>
</div>
</form>
</body>
</html>
Modifies the Master Page <meta> tags (the tags used by search engines when indexing a page).
You receive a NullReference exception if you use the Page.Header property when the Master Page does not contain a server-side <head> tag.
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
font:14px Arial,Sans-Serif;
}
.content
{
margin:auto;
width:700px;
background-color:white;
border:Solid 1px black;
}
.leftColumn
{
float:left;
padding:5px;
width:200px;
border-right:Solid 1px black;
height:700px;
}
.rightColumn
{
float:left;
padding:5px;
}
.clear
{
clear:both;
}
</style>
<title>Simple Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="leftColumn">
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server"/>
</div>
<div class="rightColumn">
<asp:contentplaceholder
id="ContentPlaceHolder2"
runat="server"/>
</div>
<br class="clear" />
</div>
</form>
</body>
</html>
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<script runat="server">
void Page_Load()
{
HtmlMeta metaDesc = new HtmlMeta();
metaDesc.Name = "DESCRIPTION";
metaDesc.Content = "A sample of using HtmlMeta controls";
HtmlMeta metaKeywords = new HtmlMeta();
metaKeywords.Name = "KEYWORDS";
metaKeywords.Content = "HtmlMeta,Page.Header,ASP.NET";
HtmlHead head = (HtmlHead)Page.Header;
head.Controls.Add(metaDesc);
head.Controls.Add(metaKeywords);
}
</script>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
</asp:Content>
Modify a control in a Master Page by using the FindControl() method in a content page.
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.content
{
margin:auto;
width:700px;
background-color:white;
padding:10px;
}
h1
{
border-bottom:solid 1px blue;
}
</style>
<title>Find Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h1><asp:Literal ID="ltlBodyTitle" runat="server" /></h1>
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server" />
</div>
</form>
</body>
</html>
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
{
Literal ltlBodyTitle = (Literal)Master.FindControl("ltlBodyTitle");
ltlBodyTitle.Text = "The Body Title";
}
}
</script>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
<br />Content, Content, Content, Content
</asp:Content>
Multipart master page
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
This is the generic content for this page. <br />
<br />
this is a test.</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="OtherLinksContent" Runat="Server">
Here"s a <a href="http://www.nfex.ru">link</a>.
<br />
Here"s a <a href="http://www.nfex.ru">link</a>.<br />
Here"s a <a href="http://www.nfex.ru">link</a>.<br />
Here"s a <a href="http://www.nfex.ru">link</a>.</asp:Content>
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://www.nfex.ru/style/logo.png" alt="nfex.ru" /><br /><br />
<asp:contentplaceholder id="MainContent" runat="server">
</asp:contentplaceholder>
<div style="border-bottom: 1px solid;
font-family: Verdana;
background-color: #ffffcc">
<strong>
OTHER LINKS<br />
</strong>
<asp:ContentPlaceHolder id="OtherLinksContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<i>This is a simple footer.</i>
</div>
</form>
</body>
</html>
Nesting Master Pages
A single site-wide Master Page that applies to all the content pages.
Aection-wide Master Pages that apply to only the pages contained in a particular section.
File: Site.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.content
{
margin:auto;
border-style:solid;
background-color:white;
padding:10px;
}
.tabstrip
{
padding:3px;
border-top:solid 1px black;
border-bottom:solid 1px black;
}
.tabstrip a
{
font:14px Arial;
color:DarkGreen;
text-decoration:none;
}
.column
{
float:left;
padding:10px;
border-right:solid 1px black;
}
.rightColumn
{
float:left;
padding:10px;
}
.clear
{
clear:both;
}
</style>
<title>Site Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Image
id="imgLogo"
ImageUrl="~/Images/SiteLogo.gif"
AlternateText="Website Logo"
Runat="server" />
<div class="tabstrip">
<asp:HyperLink
id="lnkProducts"
Text="Products"
NavigateUrl="~/Products.aspx"
Runat="server" />
<asp:HyperLink
id="lnkServices"
Text="Services"
NavigateUrl="~/Services.aspx"
Runat="server" />
</div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
<br class="clear" />
copyright © 2007 by the Company
</div>
</form>
</body>
</html>
File: SectionProducts.master
<%@ Master Language="C#" MasterPageFile="~/Site.master" %>
<asp:Content
id="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="server">
<div class="column">
<asp:ContentPlaceHolder
id="ContentPlaceHolder1"
Runat="server" />
</div>
<div class="column">
<asp:ContentPlaceHolder
id="ContentPlaceHolder2"
Runat="server" />
</div>
<div class="rightColumn">
<asp:ContentPlaceHolder
id="ContentPlaceHolder3"
Runat="server" />
</div>
</asp:Content>
File: SectionServices.master
<%@ Master Language="C#" MasterPageFile="~/Site.master" %>
<asp:Content
id="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="server">
<div class="column">
<asp:ContentPlaceHolder
id="ContentPlaceHolder1"
Runat="server" />
</div>
<div class="rightColumn">
<asp:ContentPlaceHolder
id="ContentPlaceHolder2"
Runat="server" />
</div>
</asp:Content>
File: Products.aspx
<%@ Page Language="C#" MasterPageFile="~/SectionProducts.master" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
</asp:Content>
<asp:Content
ID="Content3"
ContentPlaceHolderID="ContentPlaceHolder3"
Runat="Server">
Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
<br />Products, Products, Products
</asp:Content>
File: Services.aspx
<%@ Page Language="C#" MasterPageFile="~/SectionServices.master" Title="Services" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Services, Services, Services
<br />Services, Services, Services
<br />Services, Services, Services
<br />Services, Services, Services
<br />Services, Services, Services
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Services, Services, Services, Services, Services
<br />Services, Services, Services, Services, Services
<br />Services, Services, Services, Services, Services
<br />Services, Services, Services, Services, Services
<br />Services, Services, Services, Services, Services
</asp:Content>
Simplest Master page
File: Default.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="SiteTemplate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="apress.jpg" alt="Logo" /><br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
<i>This is a simple footer.</i></div>
</form>
</body>
</html>
File: Default.master.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class SiteTemplate : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Content Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<br />
Here"s some new content!<br />
</asp:Content>
Table layout master page
File: Default.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="TableMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td colspan="2" style="background: #ffccff">
<h1>My Header</h1>
</td>
</tr>
<tr>
<td style="background: #ffffcc" >
<asp:treeview ID="Treeview1" runat="server" Width="150px">
<Nodes>
<asp:TreeNode Text="Root" Value="New Node">
<asp:TreeNode Text="Page 1" Value="Page 1"></asp:TreeNode>
<asp:TreeNode Text="Page 2" Value="Page 2"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:treeview>
</td>
<td>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
<tr>
<td colspan="2" style="background: #ccff33">
<i>My Footer</i>
</td>
</tr>
</table>
</form>
</body>
</html>
File: Default.master.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class TableMaster : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
public bool ShowNavigationControls
{
set { Treeview1.Visible = value; }
get { return Treeview1.Visible; }
}
}
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TableContentPage_aspx" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Your content goes in this cell.<br />
<br />
<asp:Button ID="cmdShow" runat="server" Text="Show" OnClick="cmdShow_Click" />
<asp:Button ID="cmdHide" runat="server" Text="Hide" OnClick="cmdHide_Click" />
</asp:Content>
File: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class TableContentPage_aspx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void cmdHide_Click(object sender, EventArgs e)
{
TableMaster master = (TableMaster)this.Master;
master.ShowNavigationControls = false;
}
protected void cmdShow_Click(object sender, EventArgs e)
{
TableMaster master = (TableMaster)this.Master;
master.ShowNavigationControls = true;
}
}
Using the Page Header Property
To change the Title or Cascading Style Sheet rules in a Master Page, you can use the Page.Header property.
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
font:14px Arial,Sans-Serif;
}
.content
{
margin:auto;
width:700px;
background-color:white;
border:Solid 1px black;
}
.leftColumn
{
float:left;
padding:5px;
width:200px;
border-right:Solid 1px black;
height:700px;
}
.rightColumn
{
float:left;
padding:5px;
}
.clear
{
clear:both;
}
</style>
<title>Simple Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="leftColumn">
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server"/>
</div>
<div class="rightColumn">
<asp:contentplaceholder
id="ContentPlaceHolder2"
runat="server"/>
</div>
<br class="clear" />
</div>
</form>
</body>
</html>
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master" %>
<script runat="server">
void Page_Load()
{
Page.Header.Title = String.Format("Header Content ({0})", DateTime.Now);
Style myStyle = new Style();
myStyle.BackColor = System.Drawing.Color.Red;
Page.Header.StyleSheet.CreateStyleRule(myStyle, null, "html");
}
</script>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
</asp:Content>
Using the Title Attribute
There is one requirement for the Title attribute to work.
<head> tag in the Master Page must be a server-side Head tag.
<head> tag must include the runat="server" attribute.
File: Default.master
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
font:14px Arial,Sans-Serif;
}
.content
{
margin:auto;
width:700px;
background-color:white;
border:Solid 1px black;
}
.leftColumn
{
float:left;
padding:5px;
width:200px;
border-right:Solid 1px black;
height:700px;
}
.rightColumn
{
float:left;
padding:5px;
}
.clear
{
clear:both;
}
</style>
<title>Simple Master</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="leftColumn">
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server"/>
</div>
<div class="rightColumn">
<asp:contentplaceholder
id="ContentPlaceHolder2"
runat="server"/>
</div>
<br class="clear" />
</div>
</form>
</body>
</html>
File: Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Default.master"
Title="Content Page Title" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
<br />Content in the first column
</asp:Content>
<asp:Content
ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
<br />Content in the second column
</asp:Content>
What is a Master page
Master pages are similar to ordinary ASP.NET pages.
Master pages are text files that can contain HTML, web controls, and code.
Master pages have a different file extension .master instead of .aspx.
Master pages must be used by other pages, which are known as content pages.
Master page defines the page structure and the common ingredients.
The content pages adopt this structure and just fill it with content.
You can use a Master Page to create a common page layout.
You can use Master Pages to display common content in multiple pages.
You can add multiple Master Pages to the same application.
Master page file contains a <%@ Master %> directive instead of the normal <%@ Page %> directive.
Content from the content page appears in the ContentPlaceHolder controls during merging.
You cannot cache a Master Page with the OutputCache directive.
You cannot apply a theme to a Master Page.