How To Create Master Page In ASP.NET

Ajay Malik
Jul 05, 2016
159.9k
0
0
Article

Master page provides the layout and functionality to the other pages. Creating a master page in ASP.NET is very easy. Let's start creating master page step by step.

Step 1: Open new project in visual studio

New project->Installed->Web->ASP.NET Web Application (shown in the picture),

After clicking OK button in the Window, select Empty (shown in the picture),

After clicking OK button, project "masterpage" opens but no file is there (shown in the picture),

Step 2: Add new file in to our project.

Add the master page into our project.

Right click Project->Add->New item (shown in the picture),

After clicking on new item, Window will open, select Web Form->Web Forms Master Page (shown in the picture),

After clicking the add button, master page 'site1.master' adds to our project.

Click on site1.master into Solution Explorer (shown in the picture),

Step 3: Design the master page, using HTML.

HTML code of my master page is,

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="masterpage.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>c# corner</title>
<link href="css/my.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>my layout</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<header id="header">
<h1>c# corner</h1>
</header>
<nav id="nav">
<ul>
<li><a href="home.aspx">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<aside id="side">
<h1>news</h1>
<a href="#"><p>creating html website</p></a>
<a href="#"><p>learn css</p></a>
<a href="#">learn c#</a>
</aside>
<div id="con">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<footer id="footer">
copyright @c# corner
</footer>
</body>
</html>
<form id="form1" runat="server">
</form>
</body>
</html>

CSS Code

#header{
color: #247BA0;
text-align: center;
font-size: 20px;
}
#nav{
background-color:#FF1654;
padding: 5px;
}
ul{
list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
column-width: 5%;
}
li
{
display: inline;
padding-left: 2px;
column-width: 20px;
}
a{
text-decoration: none;
margin-left:20px
}
li a:hover{
background-color: #F3FFBD;
color: #FF1654;
padding:1%;
}
#side{
text-align: center;
float: right;
width: 15%;
padding-bottom: 79%;
background-color: #F1FAEE;
}
#article{
background-color: #EEF5DB;
padding: 10px;
padding-bottom: 75%;
}
#footer{
background-color: #C7EFCF;
text-align:center;
padding-bottom: 5%;
font-size: 20px;
}
#con{
border:double;
border-color:burlywood;
}

Our master page is designed. Move to the next step.

Step 4: Add web form in to our project.

Right click on the project->Add->New item (shown in the picture),

Select Web form with the master page.

After clicking on that, add the button Window, open the selected masterpage->site1.master and click OK.

Now, design our homepage.

Here, we write home page only,

Home.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="masterpage.home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Home page</h1>
</asp:Content>

Finally, our Master page is created; build and run the project.