Create and use ASP.NET Master Pages C#


Back to learning
Created: 17/06/2013

Create and use ASP.NET Master Pages C#


Software used: Microsoft Visual Studio 2010, Windows

In this basic tutorial we will see how to create and implement Master Pages in Asp.Net
1)

2)


3) Add the master page


4)


5)Now do the same thing but now select Web Form and then press below, "Select master page"


6)


7) Add another page by doing the same as we made in the step 5


8) Go to your masterpage (Site1.Master) in my case.

And add some Menu that will be displayed in all the pages from our site.
All the content that i puth in my master page will be displayed in all the pages that use my masterpage.

Master Page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
<!-- Main Menu, this will be displayed in all the site -->
        <a href="Default.aspx">Go to Default</a>
        <a href="Contact.aspx">Go to Contact</a>
    </div>

    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
          
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>



Contact Page

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Contact.aspx.cs" Inherits="Contact" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>



Default Page

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>





9) Result

10) Result


11) And if you want to add specific content to a specific page use the contentplaceholder

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Here i will puth all the content that belong to this page particularly
</asp:Content>

 12) For example in Contact.aspx.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Name:<br />
Email:<br />
Mail description:<br />

</asp:Content>

Result




13) For the header holder its the same, add the spacific content to specific head.




If you have any question, ask in the comments below.