Click here to Skip to main content
Click here to Skip to main content

Nested Master Page in VS 2008

, 8 Feb 2008
Rate this:
Please Sign up or sign in to vote.
In visual studio 2008 nested master page concept is introduced, to make page template

Introduction

Using master page was one of the famous features in ASP.NET 2.0. It is great news for developer that Visual Studio 2008 has introduced nested master page concept. You can nest master pages so master page can have flexible layout. Using nested master page we can make website template. In this article there is a small implementation of such page template.

works through

  • STEP 1: Let’s make a parent master page which will contain header of the page and footer of your website.
  • STEP 2: Create a child master page which will have one column (body content)
  • STEP 3: Create another child master page which will have two columns (left and body content)

Create Web Site

In visual studio 2008 and a new web site using file system or local IIS

Create Parent master page


  1. From solution explorer go to "Add new item"
  2. Add a master page named "ParentMaster.master"
  3. To put header make a div in the ParentMaster named "Header"
  4. To put footer make a div in the ParentMaster named "Footer"
  5. To put content of your web site make a ContentPlaceHolder named "contentMain"

Here is the code of parent master page

<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" Runat="Server">
    <div id="twoColumn">
    <table width="100%">
        <tr><td style="width:20%">
        <asp:ContentPlaceHolder ID="leftColumn" runat="server">
            
        </asp:ContentPlaceHolder>
        </td><td style="width:80%">
        <asp:ContentPlaceHolder ID="rightColumn" runat="server">
            
        </asp:ContentPlaceHolder>
        </td></tr>
    </table>
    </div>
</asp:Content>         

Create one column child master page


  1. From solution explorer go to "Add new Item"
  2. Add a child master page named "OneColumnMaster.master"
  3. And checked "Select master page" from the "Add new item" window
  4. From second window select "ParentMaster.master" as the master of that child master page.
  5. In your child master page you will get asp:content with ContentPlaceHolderID="contentMain" as the parent master page of this child master has a placeholder named “contentMain”
  6. Now in the OneColumnMaster.master page add a new ContentPlaceHolder under default asp:content given in page. Give name of that ContentPlaceHolder "OneColumnContent"
  7. So you have make a template for your website which has one column in body section and adding this master with any aspx page will give you that contentPlaceHolder to add data.

Here is the code of one column child master page

<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" Runat="Server">
    <asp:ContentPlaceHolder ID="oneColumnContent" runat="server">
    
    </asp:ContentPlaceHolder>
</asp:Content>     

Create two column child master page


  1. From solution explorer add another new master page and make parent master page of that new master as "ParentMaster.master" same as previous one.
  2. By default you will get asp:content with ContentPlaceHolderID="contentMain", now add two contentPlaceHolder under asp:content named one "leftColumn" and another "mainColumn".

Here is the code of two column child master page

<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" Runat="Server">
    <div id="twoColumn">
    <table width="100%">
        <tr><td style="width:20%">
        <asp:ContentPlaceHolder ID="leftColumn" runat="server">
            
        </asp:ContentPlaceHolder>
        </td><td style="width:80%">
        <asp:ContentPlaceHolder ID="rightColumn" runat="server">
            
        </asp:ContentPlaceHolder>
        </td></tr>
    </table>
    </div>
</asp:Content> 

Master template in you web pages

Now you have two templates for your web site one template is one column and another template is two columns (left and main). Just add web page in your web site and select what template you need for page and use it.

For one column web page code will like that

<asp:Content ID="Content1" ContentPlaceHolderID="oneColumnContent" Runat="Server">
    //Enter all the contents of page here
</asp:Content>      

For two column web page code will like that

<asp:Content ID="Content1" ContentPlaceHolderID="leftColumn" Runat="Server">
    //Enter data of left content here
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="rightColumn" Runat="Server">
    //Enter all the Contents of page here 
</asp:Content>     

Points of Interest

Now it is easy to make your website template using nester master page so enjoy make your master pages web site template.

Happy Coding Smile | :)

History

I was working in a project using asp.net 3.5 and for some interesting UI problem solving have used nested master page. Its fun to using that.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ashrafur Rahaman
Software Developer (Senior)
Canada Canada
Software engineer with broad experience in enterprise application development, product deployment automation, software test & test automation, application & system management, and manage big projects and team using proven agile technologies.
 
Passionate on Microsoft technologies, developed solutions using C#, .net (1.1/2.0/3.5/4), SQL Server (2005/2008). Work on Powershell, SSRS, SSIS, WPF, Ajax, WCF, JQuery.
 
Develop innovative application with cutting edge technologies always boosting inside.

Comments and Discussions

 
GeneralMy vote of 3 Pinmemberpramodkumarw21-Jul-13 11:47 
Generalneed to pass values from ascx control in nest master page to aspx page Pinmembermacupryk8-Jun-11 9:23 
QuestionMaster page base in different web application PinmemberGiuseppe759-May-11 5:26 
GeneralMy vote of 1 Pinmemberkaustubh.rk855-Dec-10 22:45 
GeneralNice article for Nested Master Pages Pinmemberjaivardhan joshi25-Dec-09 20:52 
GeneralMaster Pages were nestable in 2005 PinmemberbzBetty9-Feb-08 13:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 9 Feb 2008
Article Copyright 2008 by Ashrafur Rahaman
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid