Master Page In Asp.net

Ajay Malik

3y823k11100Article

Navigation MenuASP.NET Master PageContent PagesConsistent DesignContent PlaceholdersWeb Application Layout

11 Comments

Join the conversation! Your thoughts help the community grow.

Sudeeptaa Das6y ago
I'm having a problem, when i'm debugging it, it shows me directory error can you tell me what's wrong with my code.
- M. hariprasanna4y ago
  Don't debug the master page. create one new content page. and debug that page. it will be working.
Nandha Kumar Nagarajan7y ago
Share this rar file to this email id [email protected]
- Nandha Kumar Nagarajan7y ago
  Bcoz my pc is not allow blocked in my cmpy
Sunil Reddy8y ago
I did the same as above but didnt work, i mean master page CSS is not getting applied to Home
- Manoj Kumar4y ago
  Create a seperate folder for that and check the file name
Praveen reddy8y ago
Which is good practise writing our own html/css code or directly using visual studio properties and changing them ?
triple j)9y ago
I am getting an error at the HTML tag after the second doctype HTML
- Manoj Kumar4y ago
  Install Bootstrap from Nuget packages
Ajay Malik10y ago
Tq
Vignesh Mani10y ago
Nice

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.