Master Pages in ASP.Net

This article explains how to create a master page in ASP.NET 4.5 and using the creating CSS and jQuery menu bar.

This article explains how to create a master page in ASP.NET 4.5 and using the creating CSS and jQuery menu bar.

So, let's proceed with the following procedure:

  • Create a Master Pages Layout and ASP.NET web page
  • Create CSS and jQuery menu bar

See the following screen “Home.aspx” layout:

Master Page Layout

Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application". Name it "MasterTemp".

Create a new project

Creating a Master Page

Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Master Page" and name it “Site.Master”.

Master Page

The content page, that uses a Master Page is given below:

<%@  MasterLanguage="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterTemp.Site1" %>

<!DOCTYPEhtml>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body>

    <form id="form2" runat="server">

    <div>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>

    </div>

    </form>

</body>

</html>

Creating and using CSS in Master Page

Go to Solution Explorer then right-click on your application then select "Add New Item" then select "Style sheet" and name it “Site.css”.

CSS in Master Page

Implementation: Let's create an application to see the master page layout working.

In the Site.css styles are the following: body, page, header, main, footer and topnav (Menu).

Site.css

body

{

   font-size: .80em;

   height: auto;

   width: 100%;

   font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;

   margin: 0px;

   padding: 0px;

   background: #dde4e9;

}

 

a:hover

{

   color: Blue;

}

 

h1, h2, h3, h4, h5, h6

{

   font-size: 1.5em;

   color: #666666;

   font-variant: small-caps;

   text-transform: none;

   font-weight: 200;

   margin-bottom: 0px;

}

 

h1

{

   font-size: 1.6em;

   padding-bottom: 0px;

   margin-bottom: 0px;

}

 

h2

{

   font-size: 1.5em;

   font-weight: 600;

}

 

h3

{

   font-size: 1.2em;

}

 

h4

{

   font-size: 1.1em;

}

 

h5, h6

{

   font-size: 1em;

   color: White;

}

  

.page

{

   min-width: 1000px;

   max-width: 1024px;

   background-color: #FFFFFF;

   margin: 0pxauto0pxauto;

   border: 0pxsolid#496077;

}

  

.header

{

   position: relative;

   margin: 0px;

   padding: 0px;

   width: 100%;

   height: 100px;

   top: 0px;

   left: 0px;   

   border-top:5pxsolid#FF4500

   border-top-style:outset;

   background-image: -ms-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);

   background-image: -moz-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);

   background-image: -o-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);

   background-image: -webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#FFFFFF),color-stop(1,#F0EDED));

   background-image: -webkit-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);

   background-image: linear-gradient(totop,#FFFFFF0%,#F0EDED100%);

}

 

.headerh1

{

   border-style: none;

   border-color: inherit;

   border-width: medium;

   font-weight:200;

   margin: 25px;

   padding: 0px0px0px20px;

   color:#007fff;

   line-height: 2em;

   font-size: 2em;

}

 

.title

{

   display: block;

   float: left;

   text-align: left;

   width: auto;

}

 

.main

{

   padding: 0px12px;

   margin: 8px8px8px8px;

   min-height: 500px;

   background-color: White;

}

  

.footer

{

   color: #EEE;

   padding: 0px0px0px0px;

   margin: 0pxauto;

   margin-top: 10px;

   height: 50px;

   text-align: center;

   line-height: normal;

   background-color: #007fff;

   background: #000000;  

 

.clear

{

   clear: both;

   height: 1px;

}

 

.button

{

   display: inline-block;

   width: 100px;

   font-family: TimesNewRoman;

   font-weight: bold;

   font-size: 14px;

   text-align: center;

   padding: 5px;

   border: 0px#D7D7D7solid;

   text-align: center;

   text-decoration: none;

   color: White;

   margin: 5px;

   background-color: #001940;

   cursor: pointer;

}

 

.button:hover

{

   background: #000;

   text-decoration: none;

}

 

.button:active

{

   background: #001940;

}

 

.txt, .textarea

{

   padding: 8px;

   border: solid1px#E5E5E5;

   font: normal12pxVerdana, Tahoma, sans-serif;

   width: 200px;

   margin: 5px;

}

 

.left

{

   border-left: 0pxsolidred;

   border-right: 0pxsolidred;

   border-top: 0pxsolidred;

   float: left;

   width: 32%;

   margin-left: 10px;

   background-color: #F2F5F9;

   margin-bottom: 10px;

}

 

.font

{

   font-size: 11px;

   font-family: Verdana;

   color: #800000;

}

 

.text

{

   font-family: Verdana;

   font-size: 13px;

   font-variant: inherit;

   font-weight: normal;

   margin-bottom: 5px;

   color: #000000;

}

 

.accordion_headings

{

   padding: 5px;

   background: #33CCCC;

   color: #000000;

   -moz-box-shadow: 3px3px5px#535353;

   -webkit-box-shadow: 3px3px5px#535353;

   box-shadow: 3px3px5px#535353;

   -moz-border-radius: 6px6px6px6px;

   -webkit-border-radius: 6px;

   border-radius: 6px6px6px6px;

   border: 1pxsolid#3a2d00;

   cursor: pointer;

   font-weight: normal;

   height: 23px;

   margin-top: 1px;

   font-family: 'Copperplate Gothic Bold';

   font-size: 20px;

   font-style: normal;

}

 

p

{

   margin-top: -5px;

   margin-left: 25px;

   color: Yellow;

   font-size: 20px;

}

 

ul#topnav

{

   margin: 0;

   padding: 0;

   float: left;

   min-width: 1024px;

   max-width: 1024px;

   list-style: none;

   position: relative;

   font-size: 1.2em;

   background-color: #9fd2e5;

   background: #f0f0f0;

   font-family:'Times New Roman'

   font-variant:small-caps;

   text-transform: none;

   font-weight:900;

   margin-bottom: 0px;

}

 

ul#topnavli

{

   float: left;

   margin: 0;

   padding: 0;

}

 

ul#topnavlia

{

   padding: 10px15px;

   display: block;

   color:Blue;

   background: #f0f0f0;

   text-decoration: none;

}

ul#topnavlia:hover

{          

   background: #f0f0f0;

}

 

ul#topnavli:hover

{

   background: #1376c9repeat-xbackground: #f0f0f0;

}

 

ul#topnavlispan

{

   float: left;

   padding: 15px;

   margin-top: 5px;

   position: absolute;

   left: 0;

   top: 35px;

   display: none;

   width: 994px;

   color:black;

   background: #DDE4E9;

   -moz-border-radius-bottomright: 5px;

   -khtml-border-radius-bottomright: 5px;

   -webkit-border-bottom-right-radius: 5px;

   -moz-border-radius-bottomleft: 5px;

   -khtml-border-radius-bottomleft: 5px;

   -webkit-border-bottom-left-radius: 5px;

}

 

ul#topnavli:hoverspan

{

  display: blockbackground: #DDE4E9;         

}

 

ul#topnavlispana

{

   display: inline;color:blackbackground: #DDE4E9;

}

 

ul#topnavlispana:hover

{

   text-decoration: none;   color:red; background: #DDE4E9;
}

Now, the code behind file "Site.Master" uses the following code. I have also used the jQuery Menu bar and Content Placeholder used.

Site.Master

<%@MasterLanguage="C#"AutoEventWireup="true"CodeBehind="Site.master.cs"Inherits="MasterTemp.Site"%>

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>

<asp:ContentPlaceHolderID="titleContent"runat="server"/>

</title>

<scriptsrc="Scripts/jquery.js"></script>

<linkhref="Styles/Site.css"rel="stylesheet"/>

<asp:ContentPlaceHolderID="head"runat="server">

</asp:ContentPlaceHolder>

<scripttype="text/javascript">

        $(document).ready(function () {

 

            $("ul#topnav li").hover(function () {

                $(this).css({ 'background': '#f0f0f0'});

                $(this).find("span").show();

            }, function () {

                $(this).css({'background': 'none' });

                $(this).find("span").hide();

            }); 

        });

</script>

</head>

<body>

<formid="form1"runat="server">

<divclass="page">

<divclass="header">

<divclass="title">

<h1>C# Sharp Corner

</h1>

</div>

</div>

<ulid="topnav">

<li><aid="A1"href="#"runat="server">Home</a></li>

<li>

<aid="A2"href="#"runat="server">About</a>

<span>

<aid="A3"href="#"runat="server">Sub Menu 1</a> |

<aid="A4"href="#"runat="server">Sub Menu 2</a> |

<aid="A5"href="#"runat="server">Sub Menu 3</a>

</span>

</li>

<li>

<aid="A6"href="#"runat="server">Services</a>

<span>

<aid="A7"href="#"runat="server">Sub Menu 1</a> |

<aid="A8"href="#"runat="server">Sub Menu 2</a> |

<aid="A9"href="#"runat="server">Sub Menu 3</a>

</span>

</li>

<li>

<aid="A10"href="#"runat="server">Portfolio</a>

<span>

<aid="A11"href="#"runat="server">Sub Menu 1</a> |

<aid="A12"href="#"runat="server">Sub Menu 2</a> |

<aid="A13"href="#"runat="server">Sub Menu 3</a> |

<aid="A14"href="#"runat="server">Sub Menu 1</a> |

<aid="A15"href="#"runat="server">Sub Menu 2</a> |

<aid="A17"href="#"runat="server">Sub Menu 3</a>

</span>

</li>

<li><aid="A16"href="#"runat="server">Contact</a></li>

</ul>

<divclass="main">

<asp:ContentPlaceHolderID="MainContent"runat="server">

</asp:ContentPlaceHolder>

</div>

<divclass="clear">

</div>

 

<divclass="footer">

<br/>

                Copyright @ 2014

<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl="http://www.c-sharpcorner.com/"

Target="_blank"ForeColor="Orange"Style="text-decoration: none"> C# Corner </asp:HyperLink>

                All Rights Reserved.  

</div>

</div>

</form>

</body>

</html>

Now, go to Solution Explorer then right-click on your application then select "Add New Item" then select "Web form using Master Page" and name it “Home.aspx”. Next add click.

Web from using Master Page

Now, select a Master Page; just click "OK".

Select a Master Page

Now, in the code behind file "Home.aspx.cs" use the following code.

<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="Home.aspx.cs"Inherits="MasterTemp.Home"%>

<asp:ContentID="Content1"ContentPlaceHolderID="titleContent"runat="server">Home

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="head"runat="server">

</asp:Content>

<asp:ContentID="Content3"ContentPlaceHolderID="MainContent"runat="server">

</asp:Content>

Now run the page, it will look like this:

run the page

Design a master page in ASP.NET 4.5 using CSS and jQuery Menu bar menu/submenu. I hope you enjoyed this article. If you have any other questions then please provide your comments below.