Introducing Master Pages in ASP.NET 2.0
Posted On December 6, 2007 by Priyadarshan Roy filed under Internet
If you have worked in ASP.NET then definitely you have realized that something was not there or it was missing for creating web pages. Almost all the websites use a similar layout. In some websites, this layout consists of the header, body and footer and in some other websites, it contains menus, toolbars etc. The question here is, “is there an effective way to build such type of web sites?” I know that some of you might be thinking that by making our code reusable, we can implement it very easily. If we talk about ASP.NET 1.x then this can be achieved by using user controls. But being a .NET developer, you must have noticed that there are some drawbacks of using user controls for this purpose. Lets say, we are using a user control as a header and footer in the web page and want to make the layout of all the web pages same using this header and footer user controls. Later, if you need some internal modifications in these controls then you do not need to make any change in the pages that are referring these controls. But lets suppose, we need some public interface modifications in these user controls then you need to update all the referenced pages. This is the main drawback using the user controls to make the same layout of all the web pages in our application.
ASP.NET 2.0 provides a far better approach to implement this. ASP.NET 2.0 introduces the concept of Master Pages. Master page is a single file and it defines a template for a set of pages. Master page contains replaceable sections, which have unique IDs. The pages that will be using the master page will refer to it by using the @Page directive. A page, which is bound to Master page, is called Content Page. Users cannot see Master Pages. Master Pages have the extension .master. User cannot access master pages and ASP.NET runtime engine gives an error if user tries to access master page directly. If a content page is requested then ASP.NET runtime engine builds a dynamic class by merging master and content pages.
Master pages are the hottest feature of ASP.NET 2.0 and using master pages users can create a website in which all the pages can share the same layout. Each content page references the Master page and fleshes out the placeholders with the contents.
Creating Master Pages:
Each master page has the extension .master and it is somewhat similar to .aspx pages. It has two characteristics:
* @Master directive
* ContentPlaceHolders
Each ContentPlaceHolders are replaced with the contents of the content pages at runtime. Users cannot directly access Master or content pages. You’ll see an error if you try to access the master page directly or if you try to access the content page, which is not bound to any master page.
Below is a simple master page test.master:
| <%@ Master %> <html> <head> <link rel="Stylesheet” href="styles.css” /> </head> <form runat="server"> <table border="0” width="100%” bgcolor="blue” style="BORDER-BOTTOM:black 4px solid"> <tr> <td><h2>Introducing Master Pages</h2></td> </tr> </table> <br> <asp:contentplaceholder runat="server” id="CPage” /> </form> </body> </html> .......................................................................................................................................... |
A page which is bound to the master page inherits all the contents of the master page and you can attach server controls on the content page.
Content pages are Master pages are distinguished by the @Master directive.
ContentPlaceHolder control:
This controls inherits from the template class and is defined in the system.web.ui.webcontrols namespace and acts as a container placed in the master page and is identified by the ID. The ID links the placeholders and the content pages.
You can even specify default content for the content page as below:
<asp:contentplaceholder runat="server” ID="PageBody">
<!-- No custom
content is provided by the content page -->
§
</asp:contentplaceholder>
The default content is completely ignored if the content page populates the place holders.
Creating Content Pages:
The master page file that we created earlier contains a placeholder named CPage. This placeholder contains the body of the page. Below is a simple content page bound to the test.master master page:
| <%@ Page Language="C#” masterpagefile="test.master” %> <script runat="server"> void OnButtonClick(object sender, EventArgs e) { msg.Text = “Hi, Tarun"; } </script> <asp:content runat="server” contentplaceholderID="CPage"> <div> <h1>Body of the page</h1> <asp:button runat="server” text="Click Me” onclick="OnButtonClick” /> <asp:label runat="server” id="msg” /> </div> </asp:content> .......................................................................................................................................... |
Lets name this content page as testContent.aspx. Now invoke the content page and you will see ASP.Net engine will display the output by merging the master and content pages. Below is the output of the above code:

