ASP.NET  

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.

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:

  1. <%@  MasterLanguage="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterTemp.Site1" %>  
  2. <!DOCTYPEhtml>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5.     <title></title>  
  6.     <asp:ContentPlaceHolder ID="head" runat="server">  
  7.     </asp:ContentPlaceHolder>  
  8. </head>  
  9. <body>  
  10.     <form id="form2" runat="server">  
  11.     <div>  
  12.         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
  13.         </asp:ContentPlaceHolder>  
  14.     </div>  
  15.     </form>  
  16. </body>  
  17. </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

  1. body  
  2. {  
  3.    font-size: .80em;  
  4.    height: auto;  
  5.    width: 100%;  
  6.    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;  
  7.    margin: 0px;  
  8.    padding: 0px;  
  9.    background: #dde4e9;  
  10. }  
  11. a:hover  
  12. {  
  13.    color: Blue;  
  14. }  
  15. h1, h2, h3, h4, h5, h6  
  16. {  
  17.    font-size: 1.5em;  
  18.    color: #666666;  
  19.    font-variant: small-caps;  
  20.    text-transform: none;  
  21.    font-weight: 200;  
  22.    margin-bottom: 0px;  
  23. }  
  24. h1  
  25. {  
  26.    font-size: 1.6em;  
  27.    padding-bottom: 0px;  
  28.    margin-bottom: 0px;  
  29. }  
  30. h2  
  31. {  
  32.    font-size: 1.5em;  
  33.    font-weight: 600;  
  34. }  
  35. h3  
  36. {  
  37.    font-size: 1.2em;  
  38. }  
  39. h4  
  40. {  
  41.    font-size: 1.1em;  
  42. }  
  43. h5, h6  
  44. {  
  45.    font-size: 1em;  
  46.    color: White;  
  47. }  
  48. .page  
  49. {  
  50.    min-width: 1000px;  
  51.    max-width: 1024px;  
  52.    background-color: #FFFFFF;  
  53.    margin: 0pxauto0pxauto;  
  54.    border: 0pxsolid#496077;  
  55. }  
  56. .header  
  57. {  
  58.    position: relative;  
  59.    margin: 0px;  
  60.    padding: 0px;  
  61.    width: 100%;  
  62.    height: 100px;  
  63.    top: 0px;  
  64.    left: 0px;     
  65.    border-top:5pxsolid#FF4500;   
  66.    border-top-style:outset;  
  67.    background-image: -ms-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);  
  68.    background-image: -moz-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);  
  69.    background-image: -o-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);  
  70.    background-image: -webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#FFFFFF),color-stop(1,#F0EDED));  
  71.    background-image: -webkit-linear-gradient(bottom,#FFFFFF0%,#F0EDED100%);  
  72.    background-image: linear-gradient(totop,#FFFFFF0%,#F0EDED100%);  
  73. }  
  74. .headerh1  
  75. {  
  76.    border-style: none;  
  77.    border-color: inherit;  
  78.    border-width: medium;  
  79.    font-weight:200;  
  80.    margin: 25px;  
  81.    padding: 0px0px0px20px;  
  82.    color:#007fff;  
  83.    line-height: 2em;  
  84.    font-size: 2em;  
  85. }  
  86. .title  
  87. {  
  88.    display: block;  
  89.    float: left;  
  90.    text-align: left;  
  91.    width: auto;  
  92. }  
  93. .main  
  94. {  
  95.    padding: 0px12px;  
  96.    margin: 8px8px8px8px;  
  97.    min-height: 500px;  
  98.    background-color: White;  
  99. }  
  100. .footer  
  101. {  
  102.    color: #EEE;  
  103.    padding: 0px0px0px0px;  
  104.    margin: 0pxauto;  
  105.    margin-top: 10px;  
  106.    height: 50px;  
  107.    text-align: center;  
  108.    line-height: normal;  
  109.    background-color: #007fff;  
  110.    background: #000000;    
  111. }  
  112. .clear  
  113. {  
  114.    clear: both;  
  115.    height: 1px;  
  116. }  
  117. .button  
  118. {  
  119.    display: inline-block;  
  120.    width: 100px;  
  121.    font-family: TimesNewRoman;  
  122.    font-weight: bold;  
  123.    font-size: 14px;  
  124.    text-align: center;  
  125.    padding: 5px;  
  126.    border: 0px#D7D7D7solid;  
  127.    text-align: center;  
  128.    text-decoration: none;  
  129.    color: White;  
  130.    margin: 5px;  
  131.    background-color: #001940;  
  132.    cursor: pointer;  
  133. }  
  134. .button:hover  
  135. {  
  136.    background: #000;  
  137.    text-decoration: none;  
  138. }  
  139. .button:active  
  140. {  
  141.    background: #001940;  
  142. }  
  143. .txt, .textarea  
  144. {  
  145.    padding: 8px;  
  146.    border: solid1px#E5E5E5;  
  147.    font: normal12pxVerdana, Tahoma, sans-serif;  
  148.    width: 200px;  
  149.    margin: 5px;  
  150. }  
  151. .left  
  152. {  
  153.    border-left: 0pxsolidred;  
  154.    border-right: 0pxsolidred;  
  155.    border-top: 0pxsolidred;  
  156.    float: left;  
  157.    width: 32%;  
  158.    margin-left: 10px;  
  159.    background-color: #F2F5F9;  
  160.    margin-bottom: 10px;  
  161. }  
  162. .font  
  163. {  
  164.    font-size: 11px;  
  165.    font-family: Verdana;  
  166.    color: #800000;  
  167. }  
  168. .text  
  169. {  
  170.    font-family: Verdana;  
  171.    font-size: 13px;  
  172.    font-variant: inherit;  
  173.    font-weight: normal;  
  174.    margin-bottom: 5px;  
  175.    color: #000000;  
  176. }  
  177. .accordion_headings  
  178. {  
  179.    padding: 5px;  
  180.    background: #33CCCC;  
  181.    color: #000000;  
  182.    -moz-box-shadow: 3px3px5px#535353;  
  183.    -webkit-box-shadow: 3px3px5px#535353;  
  184.    box-shadow: 3px3px5px#535353;  
  185.    -moz-border-radius: 6px6px6px6px;  
  186.    -webkit-border-radius: 6px;  
  187.    border-radius: 6px6px6px6px;  
  188.    border: 1pxsolid#3a2d00;  
  189.    cursor: pointer;  
  190.    font-weight: normal;  
  191.    height: 23px;  
  192.    margin-top: 1px;  
  193.    font-family: 'Copperplate Gothic Bold';  
  194.    font-size: 20px;  
  195.    font-style: normal;  
  196. }  
  197. p  
  198. {  
  199.    margin-top: -5px;  
  200.    margin-left: 25px;  
  201.    color: Yellow;  
  202.    font-size: 20px;  
  203. }  
  204. ul#topnav  
  205. {  
  206.    margin: 0;  
  207.    padding: 0;  
  208.    float: left;  
  209.    min-width: 1024px;  
  210.    max-width: 1024px;  
  211.    list-style: none;  
  212.    position: relative;  
  213.    font-size: 1.2em;  
  214.    background-color: #9fd2e5;  
  215.    background: #f0f0f0;  
  216.    font-family:'Times New Roman';   
  217.    font-variant:small-caps;  
  218.    text-transform: none;  
  219.    font-weight:900;  
  220.    margin-bottom: 0px;  
  221. }  
  222. ul#topnavli  
  223. {  
  224.    float: left;  
  225.    margin: 0;  
  226.    padding: 0;  
  227. }  
  228. ul#topnavlia  
  229. {  
  230.    padding: 10px15px;  
  231.    display: block;  
  232.    color:Blue;  
  233.    background: #f0f0f0;  
  234.    text-decoration: none;  
  235. }  
  236. ul#topnavlia:hover  
  237. {  
  238.    background: #f0f0f0;  
  239. }  
  240. ul#topnavli:hover  
  241. {  
  242.    background: #1376c9repeat-x;  background: #f0f0f0;  
  243. }  
  244. ul#topnavlispan  
  245. {  
  246.    float: left;  
  247.    padding: 15px;  
  248.    margin-top: 5px;  
  249.    position: absolute;  
  250.    left: 0;  
  251.    top: 35px;  
  252.    display: none;  
  253.    width: 994px;  
  254.    color:black;  
  255.    background: #DDE4E9;  
  256.    -moz-border-radius-bottomright: 5px;  
  257.    -khtml-border-radius-bottomright: 5px;  
  258.    -webkit-border-bottom-right-radius: 5px;  
  259.    -moz-border-radius-bottomleft: 5px;  
  260.    -khtml-border-radius-bottomleft: 5px;  
  261.    -webkit-border-bottom-left-radius: 5px;  
  262. }  
  263. ul#topnavli:hoverspan  
  264. {  
  265.   display: block;  background: #DDE4E9;           
  266. }  
  267. ul#topnavlispana  
  268. {  
  269.    display: inline;color:black;  background: #DDE4E9;  
  270. }  
  271. ul#topnavlispana:hover  
  272. {  
  273.    text-decoration: none;   color:red; background: #DDE4E9;  
  274. }

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

  1. <%@ MasterLanguage="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MasterTemp.Site"%>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title>  
  6. <asp:ContentPlaceHolder ID="titleContent" runat="server"/>  
  7. </title>  
  8. <script src="Scripts/jquery.js"></script>  
  9. <link href="Styles/Site.css"rel="stylesheet"/>  
  10. <asp:ContentPlaceHolderID="head" runat="server">  
  11. </asp:ContentPlaceHolder>  
  12. <script type="text/javascript">  
  13.         $(document).ready(function () {  
  14.             $("ul#topnav li").hover(function () {  
  15.                 $(this).css({ 'background': '#f0f0f0'});  
  16.                 $(this).find("span").show();  
  17.             }, function () {  
  18.                 $(this).css({'background': 'none' });  
  19.                 $(this).find("span").hide();  
  20.             });   
  21.         });  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <form id="form1" runat="server">  
  26. <div class="page">  
  27. <div class="header">  
  28. <div class="title">  
  29. <h1>C# Sharp Corner</h1>  
  30. </div>  
  31. </div>  
  32. <ul id="topnav">  
  33. <li><a id="A1" href="#" runat="server">Home</a></li>  
  34. <li>  
  35. <a id="A2" href="#" runat="server">About</a>  
  36. <span>  
  37. <a id="A3" href="#" runat="server">Sub Menu 1</a> |  
  38. <a id="A4" href="#" runat="server">Sub Menu 2</a> |  
  39. <a id="A5" href="#" runat="server">Sub Menu 3</a>  
  40. </span>  
  41. </li>  
  42. <li>  
  43. <a id="A6" href="#" runat="server">Services</a>  
  44. <span>  
  45. <a id="A7" href="#" runat="server">Sub Menu 1</a> |  
  46. <a id="A8" href="#" runat="server">Sub Menu 2</a> |  
  47. <a id="A9" href="#" runat="server">Sub Menu 3</a>  
  48. </span>  
  49. </li>  
  50. <li>  
  51. <a id="A10" href="#" runat="server">Portfolio</a>  
  52. <span>  
  53. <a id="A11" href="#" runat="server">Sub Menu 1</a> |  
  54. <a id="A12" href="#" runat="server">Sub Menu 2</a> |  
  55. <a id="A13" href="#" runat="server">Sub Menu 3</a> |  
  56. <a id="A14" href="#" runat="server">Sub Menu 1</a> |  
  57. <a id="A15" href="#" runat="server">Sub Menu 2</a> |  
  58. <a id="A17" href="#" runat="server">Sub Menu 3</a>  
  59. </span>  
  60. </li>  
  61. <li><a id="A16" href="#" runat="server">Contact</a></li>  
  62. </ul>  
  63. <div class="main">  
  64. <asp:ContentPlaceHolderID="MainContent" runat="server">  
  65. </asp:ContentPlaceHolder>  
  66. </div>  
  67. <div class="clear">  
  68. </div>  
  69. <div class="footer">  
  70. <br/>  
  71.                 Copyright @ 2014  
  72. <asp:HyperLinkID="HyperLink1" runat="server"NavigateUrl="http://www.c-sharpcorner.com/"  
  73. Target="_blank" ForeColor="Orange" Style="text-decoration: none"> C# Corner </asp:HyperLink>  
  74.                 All Rights Reserved.    
  75. </div>  
  76. </div>  
  77. </form>  
  78. </body>  
  79. </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.

  1. <%@ PageTitle="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="MasterTemp.Home"%>  
  2. <asp:Content ID="Content1" ContentPlaceHolderID="titleContent" runat="server">Home  
  3. </asp:Content>  
  4. <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">  
  5. </asp:Content>  
  6. <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">  
  7. </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.

Membership not found