Post
Ask Question

Master Page In Asp.net

Introduction

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

Step 1. Open a new project in Visual Studio.

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

StartPage

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

MasterPage

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

EmptyFile

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

AddNewItem

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

WebFormMasterPage

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>
    <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>
    <p id="con">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </p>
    <footer id="footer">
        copyright @c# corner
    </footer>
    <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 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 the 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.

The master page looks as shown in the picture.


Similar Articles