This is the first article in a six-part series on ASP.NET Master Pages and SharePoint.
In this article we will discuss the structure and architecture of an ASP.NET Master Page. We will show ASP.NET Master Page’s basic concepts in order to gain an understanding of how the pages work. This article will lay the groundwork for the subsequent articles in this series on customizing SharePoint Master Pages.
Master Pages were introduced in version 2.0 of ASP.NET. Master Pages are a template that other pages can inherit from to keep consistent functionality. The pages that inherit from Master Pages are referred to as content pages. Master Pages allow the ASP.NET developer to keep consistent, reusable, web-based code (html, css, javascript, etc.) in one high level place, so the content pages can concentrate on their specific web-based code. This allows for easily manageable web-based applications.
Master Pages are architected with a merging concept. A content page refers to a Master Page and the ASP.NET framework merges the two pages together to make one page.
There are two main things that help define an ASP.NET Master Page:
A Master Page contains the same type of web code that is contained in an ASP.NET page. This includes head, body, form and any other html tag.
| <%@Master language=”C#”%> <%@ Import Namespace=”Microsoft.SharePoint” %> <%@ Import Namespace=”Microsoft.SharePoint.ApplicationPages” %> <html id=”HTML1″ runat=”server” xmlns:o=”urn:schemas-microsoft-com:office:office”> <head id=”HEAD1″ runat=”server”> <META Name=”GENERATOR” Content=”Microsoft SharePoint”> <META Name=”progid” Content=”SharePoint.WebPartPage.Document”> <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″> <META HTTP-EQUIV=”Expires” content=”0″> <link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css” /> </head> <body> <form id=”Form1″ runat=”server” > <div> Hello </div> … |
The difference between a Master Page and regular ASP.NET is that the Master Page can have special sections called ContentPlaceHolders. A ContentPlaceHolder is a place holder section that the content pages can fill in for the Master Page.
The Master Page is a combination of regular html tags and ContentPlaceHolders.
| <%@Master language=”C#”%> <%@ Import Namespace=”Microsoft.SharePoint” %> <%@ Import Namespace=”Microsoft.SharePoint.ApplicationPages” %> <html id=”HTML1″ runat=”server” xmlns:o=”urn:schemas-microsoft-com:office:office”> <head id=”HEAD1″ runat=”server”> <META Name=”GENERATOR” Content=”Microsoft SharePoint”> <META Name=”progid” Content=”SharePoint.WebPartPage.Document”> <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=utf-8″> <META HTTP-EQUIV=”Expires” content=”0″> <link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css” /> </head> <body> <form id=”Form1″ runat=”server” > <div> Hello </div>
… |
If the ContentPlaceHolder of a Master Page is empty, it will be filled in by the implementing content page. Alternatively, the ContentPlaceHolder can have web code inside of it, which will be used if implementing content page does not implement the particular ContentPlaceHolder.
Content pages are the ASP.NET pages that implement a Master Page. Content pages are normal ASP.NET pages that contain an attribute which informs the compiler that the page should be merged with a Master Page. This attribute is part of the page directive tag and is called the MasterPageFile.
| <%@ Page Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/Site1.Master” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._Default” %> |
Content pages contain content tags. Content tags let the compiler know which ContentPlaceHolders to override the Master Page.
| <asp:Content ID=”MyContent” ContentPlaceHolderId=”MyPlaceHolder” runat=”server”> This is the content that will override the ContentPlaceHolder “MyPlaceHolder” from the Master Page </asp:Content> |
The order of the content tags on the content pages is irrelevant. The Master Page determines the layout of all the content. The content pages use content tags to fill in ContentPlaceHolders on the Master Page.
Content pages are not required to implement all ContentPlaceHolders of a Master Page. If a content page does refer to a ContentPlaceHolder, then the code inside the respective content tag will override the ContentPlaceHolder section of the Master Page. However, if a Content Page does not implement a ContentPlaceHolder, then the code within the ContentPlaceHolder on the Master Page will render on the browser.
The Master Page is a template that controls the layout of a site. Content pages take care of filling in the content of predefined sections of the Master Page called ContentPlaceHolders.
Below is a wireframe of a Master Page:
| <%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”Site1.master.cs” Inherits=”WebApplication1.Site1″ %> <!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>Untitled Page</title> </head> <body> <form id=”form1″ runat=”server” style=”width: 1200px” > <div style=”border:solid 1px”> Logo </div> <div style=”border:solid 1px”> Top Menu </div> <div style=”width:300px; height: 286px;float:left;border:solid 1px”> Side Menu </div> <div style=”border:solid 1px; height: 286px;”> <div style=”border:solid 1px; height: 124px; width: 400px;float:left; margin:10px”> <asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”> </asp:ContentPlaceHolder> </div> <div style=”border:solid 1px; height: 124px; width: 400px; margin:10px”> <asp:ContentPlaceHolder ID=”ContentPlaceHolder2″ runat=”server”> </asp:ContentPlaceHolder> </div> <div style=”border:solid 1px; height: 124px; width:812px; margin:10px”> <asp:ContentPlaceHolder ID=”ContentPlaceHolder3″ runat=”server”> </asp:ContentPlaceHolder> </div> </div> </form> </body> </html> |
| <%@ Page Language=”C#” AutoEventWireup=”true” MasterPageFile=”~/Site1.Master” CodeBehind=”Default.aspx.cs” Inherits=”WebApplication1._Default” %> <asp:Content ID=”Content1″ ContentPlaceHolderId=”ContentPlaceHolder1″ runat=”server”> This is the content that will override the ContentPlaceHolder “ContentPlaceHolder1″ from the Master Page </asp:Content> <asp:Content ID=”Content3″ ContentPlaceHolderId=”ContentPlaceHolder3″ runat=”server”> This is the content that will override the ContentPlaceHolder “ContentPlaceHolder3″ from the Master Page </asp:Content> <asp:Content ID=”Content2″ ContentPlaceHolderId=”ContentPlaceHolder2″ runat=”server”> This is the content that will override the ContentPlaceHolder “ContentPlaceHolder2″ from the Master Page </asp:Content> |
SharePoint is designed on the concept of Master Pages. Almost all of the out of the box ASP.NET pages in SharePoint inherit from a Master Page. Thus, if you want to customize the look and feel of all the SharePoint pages, you can do this by customizing Master Pages. This allows for a centralized place to make customizations (instead of modifying every web page in the entire SharePoint system).
The following articles in this series will show you the Master Pages included in SharePoint and the best practices for making customizations to SharePoint Master Pages. However, it is important to understand the basics of Master Pages before trying to customize Master Pages in SharePoint.
I am currently a Project Manager at RDA Corporation (don’t worry – PMs at RDA do a lot of architectural work too). In addition I am also the IW/Collaboration Evangelist Team Leader at RDA. The IW/Collaboration Evangelist Team at RDA is dedicated to the growth and knowledge of SharePoint and other collaboration tools within Microsoft. I have been working with SharePoint since 2001 and have been involved in numerous custom application efforts centered around SharePoint during my employment at RDA. I have been coding in .net since it came out and am Microsoft Certified – MCPD, MCSD, MCAD, MTS (SQL Server 2005), MTS(SharePoint).
Contact the author | Other Posts by ggalipeau (6) | Author's Website
Loading ...
