Thursday, May 2, 2013

Create Master Page and Content Page in Visual Studio 2012

21 comments

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 asp.net 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">
 </asp:ContentPlaceHolder>

 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">
  
</asp:Content>


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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   
</head>
<body>
    <form id="form1" runat="server">

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



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
</asp:Content>

21 comments:

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

    http://geeksprogrammings.blogspot.com/2014/03/masterpages-aspnet.html

    ReplyDelete
  2. Excellent Tutorial and Very informative too

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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 info@bravetechnologies.in
    erp in chennai

    ReplyDelete
  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

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

    ReplyDelete
  8. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information&its very useful to me...
    Android training in chennai
    Ios training in chennai

    ReplyDelete
  9. Good and nice blog post, thanks for sharing your information.. it is very useful to me.. keep rocks and updating.


    Dot Net Training in chennai | Dot Net Training institute in chennai

    ReplyDelete
  10. Well Written.... Nice to read this article.... Thanks for sharing....
    Android Training

    ReplyDelete

  11. Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate? google mail sign in

    ReplyDelete
  12. The website is looking bit flashy and it catches the visitors eyes. A design is pretty simple and a good user-friendly interface.

    Programmierung in L├╝denscheid

    ReplyDelete