Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

What are Master Pages and how to create Master Pages in ASP.NET

Author: Jeff Nava

Master Pages can be easily created and they provide consistent look and feel to your website.

 
What are Master Pages?

Master Pages are the way to create a consistent look to your website. A master page can hold common controls, elements or content and gives a common look and feel to entire application. Master pages are the special type of ASP.NET pages that works like template for other pages. It defines what portions of the page will remain fixed for all pages. A Master page has the extension .master. You can add any control in master pages same as you add in your aspx pages.

What are Content Pages?
 
All other pages can be created and associated with master pages. These aspx pages can be created with separate functionality and layout. These associated pages are called content pages. You can associate as many aspx pages to a master page as you want.
 
What is ContentPlaceHolder?
 
Every master page has a ContentPlaceHolder control. A content page, by default, takes the layout and appearance of the master page. The ContentPlaceHolder portion of the master page is for content page so that content page can replace its own content with master page.  A master page can contain any number of ContentPlaceHolder controls.
 
Nested Master Pages
 
Visual Studio 2008 ASP.NET 3.5 and above offers an advanced feature of Nested Master Pages. A master page can be associated to another master page. This is called nested master pages. I will explain nested master pages with an example in a future article.
 
How to create Master Page and its associated Content Page
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Choose language Visual C# or Visual Basic
  4. Create New ASP.NET Empty Web Site
  5. Web Site > Add New Item
  6. Select Master Page and click Add
  7. You can see a page MasterPage.master.  Write code below in MasterPage.master in between <form> tag.

    <div style="background-color:Aqua">
       
     
       
       <asp:Panel ID="Panel1" runat="server" Height="50px" HorizontalAlign="Center">
       
         <asp:Label ID="Label1" runat="server" 
       
         Text="This is Master Page. Header of your page can be here."></asp:Label>
       
       </asp:Panel>
       
     
       
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
            
       
        </asp:ContentPlaceHolder>
       
        <asp:Panel ID="Panel2" runat="server" Height="50px" HorizontalAlign="Center">
       
            <asp:Label ID="Label2" runat="server" 
       
            Text="This is Master Page. Footer of your page can be here."></asp:Label>
       
        </asp:Panel>
       
    </div>
     
    I have changed the <div> tag background color to aqua, added a panel with height of the panel is fifty and set its “HorizontalAlign” to center and added label in the panel. Then there is a “ContentPlaceHolder” control with an “id” of “ContentPlaceHolder1” for content page. At the end there is another panel with same height, horizontal alignment and another label.
     
    You can add header, footer or any content which you want to be there throughout your web application in the master page. “ContentPlaceHolder’ control can be more than one in your master page. 
     
  8. Now again Web Site > Add New Item.
  9. This time select a Web Form
  10. Make sure that you have checked the “Select master page” option and click Add
  11. “Select a Master Page” window will appear. Select the MasterPage.master and click “Ok”
  12. A Default.aspx page will be created and you will see two  <asp:Content> tags 
  13. Write code below in between <asp:Content> tag which has the ContentPlaceHolderID equal to “ContentPlaceHolder1”. Remember “ContentPlaceHolder1” is the “id” of <asp:ContentPlaceHolder> in master page

    <asp:Panel ID="Panel1" BackColor="White" runat="server" Height="100px"
       
        HorizontalAlign="Center">
       
      <br />
       
      <br />
       
      <asp:Label ID="Label1" runat="server" Text="This is Content Page."
       
             Font-Size="20px"></asp:Label>
       
    </asp:Panel>
         
     
 Now Press F5 and see the result in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< File uploading for specific file types only in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net