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".

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

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

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

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).

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

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).

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

Now, you can add the StyleSheet.

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
- <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Firstmasterpage.master.cs" Inherits="Moremasterpage.Firstmasterpage" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <link href="style.css" type="text/css" rel="stylesheet" />
- <asp:ContentPlaceHolder ID="head" runat="server">
- </asp:ContentPlaceHolder>
- </head>
- <body>
- <form id="form1" runat="server">
- <div id="header">
- <div id="heimg"></div>
- </div>
- <div id="menu">
- <ul>
- <li><a href="Home.aspx">Home</a></li>
- <li><a href="technology.aspx">Technology</a></li>
- <li><a href="#">Recent Posts</a></li>
- <li><a href="#">Abouts</a></li>
- <li><a href="#">Login</a></li>
- </ul>
- </div>
- <div id="center">
- <h3>Welcome to our c-sharp website!!!!!!!!!</h3>
- <div id="ceimg"></div>
- </div>
- <div id="fooder">
- <h5>copyrights all reserved C# corner 2016</h5>
- </div>
- <div>
- <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
- </asp:ContentPlaceHolder>
- </div>
- </form>
- </body>
- </html>
- body {
- background - color: cadetblue;
- }#
- header {
- background - color: chartreuse;
- border - image - width: 50 px;
- text - align: center;
- width: 1000 px;
- height: 70 px;
- margin - left: auto;
- margin - right: auto;
- }#
- heimg {
- background - image: url("photo/cssss.jpg");
- width: 210 px;
- height: 40 px;
- margin - left: auto;
- margin - right: auto;
- }#
- heimgone {
- background - image: url("photo/cssss.jpg");
- width: 210 px;
- height: 40 px;
- margin - left: auto;
- margin - right: auto;
- }#
- menu {
- background - color: yellow;
- width: 1000 px;
- height: 50 px;
- margin - left: auto;
- margin - right: auto;
- }
- ul {
- list - style - type: none;
- }
- li a {
- background - color: coral;
- font - size: 40 px;
- }
- li {
- display: inline;
- padding - left: 3 px;
- column - width: 15 px;
- }
- a {
- text - decoration: none;
- margin - left: auto;
- }
- li a: hover {
- background - color: crimson;
- padding: 1 px;
- }#
- center {
- background - color: white;
- text - align: center;
- width: 1000 px;
- height: 700 px;
- margin - left: auto;
- margin - right: auto;
- }#
- img {
- background - image: url("photo/cssss.jpg");
- width: 700 px;
- height: 50 px;
- margin - left: auto;
- margin - right: auto;
- }#
- fooder {
- background - color: brown;
- width: 1000 px;
- height: 30 px;
- margin - left: auto;
- margin - right: auto;
- }#
- fooder {
- text - align: center;
- }#
- first {
- background - color: burlywood;
- text - align: center;
- width: 1000 px;
- height: 70 px;
- margin - left: auto;
- margin - right: auto;
- }
- #
- menuone {
- background - color: burlywood;
- width: 1000 px;
- height: 40 px;
- margin - left: auto;
- margin - right: auto;
- }#
- second {
- background - color: antiquewhite;
- text - align: center;
- width: 1000 px;
- height: 700 px;
- margin - left: auto;
- margin - right: auto;
- }#
- imageset {
- background - image: url("photo/unnamed.png");
- width: 300 px;
- height: 300 px;
- margin - left: auto;
- margin - right: auto;
- }
- }#
- last {
- background - color: burlywood;
- text - align: center;
- width: 1000 px;
- height: 30 px;
- margin - left: auto;
- margin - right: auto;
- }#
- imgone {
- background - image: url("photo/unnamed.png");
- width: 300 px;
- height: 300 px;
- margin - left: auto;
- margin - right: auto;
- }#
- ceimg {
- background - image: url("photo/unnamed.png");
- width: 300 px;
- height: 300 px;
- margin - left: auto;
- margin - right: auto;
- }#
- data {
- text - align: left;
- }
- <%@ Page Title="" Language="C#" MasterPageFile="~/Firstmasterpage.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Moremasterpage.Home" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
- <h3>Welcome to our c# corner Home page</h3>
- </asp:Content>
- // technolo
- <%@ Page Title="" Language="C#" MasterPageFile="~/Secondmasterpage.Master" AutoEventWireup="true" CodeBehind="technology.aspx.cs" Inherits="Moremasterpage.technology" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
- </asp:Content>
- <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
- <h3></h3>
- </asp:Content>
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).

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

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).

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

Step 10
Now, we can create default second MasterPage and if you want more design, you can write the code.
Secondmasterpage.aspx
- <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Secondmasterpage.master.cs" Inherits="Moremasterpage.Secondmasterpage" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <link href="style.css" type="text/css" rel="stylesheet" />
- <asp:ContentPlaceHolder ID="head" runat="server">
- </asp:ContentPlaceHolder>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="first">
- <h1>C-SHARP CORNER</h1>
- </div>
- <div id="menuone">
- <ul>
- <li><a href="Home.aspx">Home</a></li>
- <li><a href="#">Technology</a></li>
- <li><a href="#">Article</a></li>
- <li><a href="#">Blogs</a></li>
- <li><a href="#">Abouts</a></li>
- <li><a href="#">Login</a></li>
- </ul>
- </div>
- <div id="second">
- <h3>Welcome to our c-sharp Technology page!!!!!!!!!</h3>
- <div id="imageset"></div>
- <div id="data">
- <h3>C-sharp</h3>
- <h3>ASP.NET</h3>
- <h3>XAMARIN</h3>
- <h3>Android</h3>
- <h3>VisualStudio 2015</h3>
- </div>
- </div>
- <div id="last">
- <h5>copyrights all reserved C# corner 2016</h5>
- </div>
- <div>
- <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
- </asp:ContentPlaceHolder>
- </div>
- </form>
- </body>
- </html>
Now, run it in any browser and after a few minutes, you can see that output.
FirstMasterPage

SecondMasterPage


Jeednyasa PatilPosted Aug 1, 2020, 6:57 AM
Can you guide me
Jeednyasa PatilPosted Aug 1, 2020, 6:57 AM
I want a help for my website please?