Thursday, May 2, 2013

Create Master Page and Content Page in Visual Studio 2012


In this article we will go through the steps of adding master page in Visual Studio 2012. Master page has the extension of .master . Master page in websites are used to give a common layout to website. Master pages uses content place holder to create content pages.

Directive @Master directive defines a master page.
Master page fall under the namespace System.Web.UI.MasterPage.

To add master page to your website follow these steps:

Step 1:  Create new website in visual studio 2012.

Step 2Right  click on Website in Solution Explorer window. If solution explorer is not visible in Visual Studio then you can enable it by Clicking on View menu and then on Solution Explorer.

Step 3:   After Right click on Website in Solution Explorer choose Add->AddNewItem or use keyboard shortcut ctrl+shift+A.

Step 4:  In Add New Item window choose the language under Installed in left side and then choose Master Page in the right side as shown in picture below. Give name to master page and click on ok button.

Master Page in Visual Studio 2012

Step 5: You can remove this content placeholder from head tag.
  <asp:ContentPlaceHolder id="head" runat="server">

 Step 6: To create content page go to design view of Master Page and then click AddContentPage as shown in the picture below:

Add Content Page in vs 2012

In this way a content page has been created using master page.

The content in the page added from master page can be added inside this tag:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

You can try sample using the code given below:

Master Page Design Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">

        <div style="background:#4cff00; height:70px;" >
           <h1>Header content</h1>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        <div style="background:#00ff90;height:70px;">
              <h1>Footer Content content</h1>

Content Page Code:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    This is content Page


  1. Link for using Master Pages and Nested Master Pages in Asp.Net

  2. Excellent Tutorial and Very informative too

  3. Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.. PHP Training in chennai | PHP Training chennai | PHP course in chennai | PHP course chennai

  4. Looking for a career in technology industry? Wonder what are the languages that will give just the right start to your career?
    Over to the hottest programming languages you can learn in 2015.

    Web developing

  5. Excellent post! Thank you for Sharing. We are the best erp software providers in chennai. For more details call +91 9677025199 or email us on
    erp in chennai

  6. Thank you for Sharing. I'm working in brave technologies private limited, We are the best erp software developers based in chennai. erp providers in chennai

  7. The best thing is that your blog really informative thanks for your great information!
    erp software in chennai