Post
Ask Question

Create Multiple Master Pages In ASP.NET 4.5.2 Using Visual Studio 2015

Introduction

In this article, you will learn how to create multiple Master pages in ASP.NET project, using Visual Studio 2015.

Requirements

  • Visual Studio 2015 Update 3
  • ASP.NET 4.5.2

If you create or develop multiple Master pages, you should follow the below steps.

Step 1

Now, open Visual Studio 2015 Update 3. Go to the File >> New >> Project. Or, use the shortcut key "Ctrl+Shift +N".

Visual Studio

Step 2

Here, select Visual C# >> Web >> ASP.NET Web Application. Finally, click "OK" button.

Visual Studio

Step 3

Here, you can select the template for your ASP.NET application. We are choosing "Empty" here. Now, click OK button.

Visual Studio

Step 4

Now, open the project and look for the Solution Explorer.

Visual Studio

Step 5

Here, open the default .aspx. If you want a Master Page, you can add the page (Web Forms MasterPage) Add+New item (Ctrl+Shift+A).

Visual Studio

Step 6

Now,we can add the first Master Page in our Solution Explorer.

Visual Studio

Step 7

Now, we can add some web forms. It is like Home page, login page, etc. Here, open the default .aspx. If you want a webform, you can add the page (Web Forms with MasterPage) Add+New item (Ctrl+Shift+A).

Visual Studio

Here, open a new window and you can select the MasterPage(Firstmasterpage.Master) and click the "OK" button.

Visual Studio

Now, you can add the StyleSheet.

Visual Studio

Step 8

Now, we can create default first Master Page. If you want more design, you can write the code. Here, we can see the first MasterPage ASP.NET code.

Firstmasterpage.aspx

  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Firstmasterpage.master.cs" Inherits="Moremasterpage.Firstmasterpage" %>  
  2.   
  3.     <!DOCTYPE html>  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.     <head runat="server">  
  8.         <title></title>  
  9.   
  10.         <link href="style.css" type="text/css" rel="stylesheet" />  
  11.   
  12.         <asp:ContentPlaceHolder ID="head" runat="server">  
  13.         </asp:ContentPlaceHolder>  
  14.     </head>  
  15.   
  16.     <body>  
  17.         <form id="form1" runat="server">  
  18.             <div id="header">  
  19.                 <div id="heimg"></div>  
  20.   
  21.   
  22.             </div>  
  23.             <div id="menu">  
  24.                 <ul>  
  25.                     <li><a href="Home.aspx">Home</a></li>  
  26.                     <li><a href="technology.aspx">Technology</a></li>  
  27.                     <li><a href="#">Recent Posts</a></li>  
  28.   
  29.                     <li><a href="#">Abouts</a></li>  
  30.                     <li><a href="#">Login</a></li>  
  31.                 </ul>  
  32.             </div>  
  33.             <div id="center">  
  34.                 <h3>Welcome to our c-sharp website!!!!!!!!!</h3>  
  35.                 <div id="ceimg"></div>  
  36.   
  37.             </div>  
  38.             <div id="fooder">  
  39.                 <h5>copyrights all reserved C# corner 2016</h5>  
  40.             </div>  
  41.             <div>  
  42.                 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
  43.   
  44.                 </asp:ContentPlaceHolder>  
  45.             </div>  
  46.         </form>  
  47.     </body>  
  48.   
  49.     </html>  
Now, you can see the first master page design code. It is the CSS code (style.css).
  1. body {  
  2.     background - color: cadetblue;  
  3. }#  
  4. header {  
  5.     background - color: chartreuse;  
  6.   
  7.   
  8.     border - image - width: 50 px;  
  9.   
  10.     text - align: center;  
  11.     width: 1000 px;  
  12.     height: 70 px;  
  13.     margin - left: auto;  
  14.     margin - right: auto;  
  15.   
  16. }#  
  17. heimg {  
  18.     background - image: url("photo/cssss.jpg");  
  19.     width: 210 px;  
  20.     height: 40 px;  
  21.     margin - left: auto;  
  22.     margin - right: auto;  
  23.   
  24. }#  
  25. heimgone {  
  26.     background - image: url("photo/cssss.jpg");  
  27.     width: 210 px;  
  28.     height: 40 px;  
  29.     margin - left: auto;  
  30.     margin - right: auto;  
  31.   
  32. }#  
  33. menu {  
  34.     background - color: yellow;  
  35.     width: 1000 px;  
  36.     height: 50 px;  
  37.     margin - left: auto;  
  38.     margin - right: auto;  
  39.   
  40. }  
  41. ul {  
  42.     list - style - type: none;  
  43.   
  44. }  
  45. li a {  
  46.     background - color: coral;  
  47.     font - size: 40 px;  
  48.   
  49. }  
  50. li {  
  51.     display: inline;  
  52.     padding - left: 3 px;  
  53.     column - width: 15 px;  
  54. }  
  55. a {  
  56.     text - decoration: none;  
  57.     margin - left: auto;  
  58. }  
  59. li a: hover {  
  60.     background - color: crimson;  
  61.     padding: 1 px;  
  62. }#  
  63. center {  
  64.     background - color: white;  
  65.     text - align: center;  
  66.     width: 1000 px;  
  67.     height: 700 px;  
  68.     margin - left: auto;  
  69.     margin - right: auto;  
  70.   
  71. }#  
  72. img {  
  73.     background - image: url("photo/cssss.jpg");  
  74.     width: 700 px;  
  75.     height: 50 px;  
  76.     margin - left: auto;  
  77.     margin - right: auto;  
  78. }#  
  79. fooder {  
  80.     background - color: brown;  
  81.     width: 1000 px;  
  82.     height: 30 px;  
  83.     margin - left: auto;  
  84.     margin - right: auto;  
  85.   
  86. }#  
  87. fooder {  
  88.     text - align: center;  
  89. }#  
  90. first {  
  91.     background - color: burlywood;  
  92.     text - align: center;  
  93.     width: 1000 px;  
  94.     height: 70 px;  
  95.     margin - left: auto;  
  96.     margin - right: auto;  
  97. }  
  98.  
  99. #  
  100. menuone {  
  101.     background - color: burlywood;  
  102.   
  103.     width: 1000 px;  
  104.     height: 40 px;  
  105.     margin - left: auto;  
  106.     margin - right: auto;  
  107. }#  
  108. second {  
  109.     background - color: antiquewhite;  
  110.     text - align: center;  
  111.     width: 1000 px;  
  112.     height: 700 px;  
  113.     margin - left: auto;  
  114.     margin - right: auto;  
  115. }#  
  116. imageset {  
  117.     background - image: url("photo/unnamed.png");  
  118.     width: 300 px;  
  119.     height: 300 px;  
  120.     margin - left: auto;  
  121.     margin - right: auto;  
  122. }  
  123. }#  
  124. last {  
  125.     background - color: burlywood;  
  126.     text - align: center;  
  127.     width: 1000 px;  
  128.     height: 30 px;  
  129.     margin - left: auto;  
  130.     margin - right: auto;  
  131. }#  
  132. imgone {  
  133.     background - image: url("photo/unnamed.png");  
  134.     width: 300 px;  
  135.     height: 300 px;  
  136.     margin - left: auto;  
  137.     margin - right: auto;  
  138. }#  
  139. ceimg {  
  140.     background - image: url("photo/unnamed.png");  
  141.     width: 300 px;  
  142.     height: 300 px;  
  143.     margin - left: auto;  
  144.     margin - right: auto;  
  145.   
  146. }#  
  147. data {  
  148.     text - align: left;  
  149. }  
Here is the code for Homepage.
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Firstmasterpage.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Moremasterpage.Home" %>  
  2.     <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">  
  3.     </asp:Content>  
  4.     <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
  5.         <h3>Welcome to our c# corner Home page</h3>  
  6.     </asp:Content>  
  7.   
  8.   
  9.     // technolo  
  10.   
  11.     <%@ Page Title="" Language="C#" MasterPageFile="~/Secondmasterpage.Master" AutoEventWireup="true" CodeBehind="technology.aspx.cs" Inherits="Moremasterpage.technology" %>  
  12.         <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">  
  13.         </asp:Content>  
  14.         <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
  15.   
  16.             <h3></h3>  
  17.   
  18.         </asp:Content>  
Now, the first Master page has been created.

Step 9

Now, you can create the second Master Page. Here, open the default .aspx. If you want a Master Page, you can add the page (Web Forms Master Page) from Add+New item (Ctrl+Shift+A).

Visual Studio

Now, you can add two Master Pages in your Project Solution Explorer.

Visual Studio

Here, we can add some webform, like Home page,Technology page and extra. Here, open the default .aspx. If you want a webform, you can add the page (Web Forms with Master Page) from Add+New item (Ctrl+Shift+A).

Visual Studio

Here, open the new window and you can select the Master Page (Secondmasterpage.Master) and click the "OK" button.

Visual Studio

Step 10

Now, we can create default second MasterPage and if you want more design, you can write the code.

Secondmasterpage.aspx
  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Secondmasterpage.master.cs" Inherits="Moremasterpage.Secondmasterpage" %>  
  2.   
  3.     <!DOCTYPE html>  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.     <head runat="server">  
  8.         <title></title>  
  9.         <link href="style.css" type="text/css" rel="stylesheet" />  
  10.         <asp:ContentPlaceHolder ID="head" runat="server">  
  11.         </asp:ContentPlaceHolder>  
  12.     </head>  
  13.   
  14.     <body>  
  15.         <form id="form1" runat="server">  
  16.             <div>  
  17.                 <div id="first">  
  18.   
  19.                     <h1>C-SHARP CORNER</h1>  
  20.                 </div>  
  21.                 <div id="menuone">  
  22.                     <ul>  
  23.                         <li><a href="Home.aspx">Home</a></li>  
  24.                         <li><a href="#">Technology</a></li>  
  25.                         <li><a href="#">Article</a></li>  
  26.                         <li><a href="#">Blogs</a></li>  
  27.                         <li><a href="#">Abouts</a></li>  
  28.                         <li><a href="#">Login</a></li>  
  29.                     </ul>  
  30.                 </div>  
  31.                 <div id="second">  
  32.                     <h3>Welcome to our c-sharp Technology page!!!!!!!!!</h3>  
  33.   
  34.                     <div id="imageset"></div>  
  35.                     <div id="data">  
  36.                         <h3>C-sharp</h3>  
  37.                         <h3>ASP.NET</h3>  
  38.                         <h3>XAMARIN</h3>  
  39.                         <h3>Android</h3>  
  40.                         <h3>VisualStudio 2015</h3>  
  41.   
  42.                     </div>  
  43.   
  44.                 </div>  
  45.                 <div id="last">  
  46.                     <h5>copyrights all reserved C# corner 2016</h5>  
  47.                 </div>  
  48.                 <div>  
  49.                     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
  50.   
  51.                     </asp:ContentPlaceHolder>  
  52.                 </div>  
  53.         </form>  
  54.     </body>  
  55.   
  56.     </html>  
Step 11

Now, run it in any browser and after a few minutes, you can see that output.

FirstMasterPage

Visual Studio

SecondMasterPage

Visual Studio 
Next Recommended Reading Creating Master Page In ASP.NET