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.    heightauto;  
  5.    width100%;  
  6.    font-family"Helvetica Neue""Lucida Grande""Segoe UI"ArialHelveticaVerdanasans-serif;  
  7.    margin0px;  
  8.    padding0px;  
  9.    background#dde4e9;  
  10. }  
  11. a:hover  
  12. {  
  13.    color: Blue;  
  14. }  
  15. h1, h2, h3, h4, h5, h6  
  16. {  
  17.    font-size1.5em;  
  18.    color#666666;  
  19.    font-variantsmall-caps;  
  20.    text-transformnone;  
  21.    font-weight200;  
  22.    margin-bottom0px;  
  23. }  
  24. h1  
  25. {  
  26.    font-size1.6em;  
  27.    padding-bottom0px;  
  28.    margin-bottom0px;  
  29. }  
  30. h2  
  31. {  
  32.    font-size1.5em;  
  33.    font-weight600;  
  34. }  
  35. h3  
  36. {  
  37.    font-size1.2em;  
  38. }  
  39. h4  
  40. {  
  41.    font-size1.1em;  
  42. }  
  43. h5, h6  
  44. {  
  45.    font-size1em;  
  46.    color: White;  
  47. }  
  48. .page  
  49. {  
  50.    min-width1000px;  
  51.    max-width1024px;  
  52.    background-color#FFFFFF;  
  53.    margin0pxauto0pxauto;  
  54.    border0pxsolid#496077;  
  55. }  
  56. .header  
  57. {  
  58.    positionrelative;  
  59.    margin0px;  
  60.    padding0px;  
  61.    width100%;  
  62.    height100px;  
  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-stylenone;  
  77.    border-color: inherit;  
  78.    border-widthmedium;  
  79.    font-weight:200;  
  80.    margin25px;  
  81.    padding0px0px0px20px;  
  82.    color:#007fff;  
  83.    line-height2em;  
  84.    font-size2em;  
  85. }  
  86. .title  
  87. {  
  88.    displayblock;  
  89.    floatleft;  
  90.    text-alignleft;  
  91.    widthauto;  
  92. }  
  93. .main  
  94. {  
  95.    padding0px12px;  
  96.    margin8px8px8px8px;  
  97.    min-height500px;  
  98.    background-color: White;  
  99. }  
  100. .footer  
  101. {  
  102.    color#EEE;  
  103.    padding0px0px0px0px;  
  104.    margin0pxauto;  
  105.    margin-top10px;  
  106.    height50px;  
  107.    text-aligncenter;  
  108.    line-heightnormal;  
  109.    background-color#007fff;  
  110.    background#000000;    
  111. }  
  112. .clear  
  113. {  
  114.    clearboth;  
  115.    height1px;  
  116. }  
  117. .button  
  118. {  
  119.    display: inline-block;  
  120.    width100px;  
  121.    font-family: TimesNewRoman;  
  122.    font-weightbold;  
  123.    font-size14px;  
  124.    text-aligncenter;  
  125.    padding5px;  
  126.    border0px#D7D7D7solid;  
  127.    text-aligncenter;  
  128.    text-decorationnone;  
  129.    color: White;  
  130.    margin5px;  
  131.    background-color#001940;  
  132.    cursorpointer;  
  133. }  
  134. .button:hover  
  135. {  
  136.    background#000;  
  137.    text-decorationnone;  
  138. }  
  139. .button:active  
  140. {  
  141.    background#001940;  
  142. }  
  143. .txt, .textarea  
  144. {  
  145.    padding8px;  
  146.    border: solid1px#E5E5E5;  
  147.    font: normal12pxVerdana, Tahomasans-serif;  
  148.    width200px;  
  149.    margin5px;  
  150. }  
  151. .left  
  152. {  
  153.    border-left0pxsolidred;  
  154.    border-right0pxsolidred;  
  155.    border-top0pxsolidred;  
  156.    floatleft;  
  157.    width32%;  
  158.    margin-left10px;  
  159.    background-color#F2F5F9;  
  160.    margin-bottom10px;  
  161. }  
  162. .font  
  163. {  
  164.    font-size11px;  
  165.    font-familyVerdana;  
  166.    color#800000;  
  167. }  
  168. .text  
  169. {  
  170.    font-familyVerdana;  
  171.    font-size13px;  
  172.    font-variant: inherit;  
  173.    font-weightnormal;  
  174.    margin-bottom5px;  
  175.    color#000000;  
  176. }  
  177. .accordion_headings  
  178. {  
  179.    padding5px;  
  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.    border1pxsolid#3a2d00;  
  189.    cursorpointer;  
  190.    font-weightnormal;  
  191.    height23px;  
  192.    margin-top1px;  
  193.    font-family'Copperplate Gothic Bold';  
  194.    font-size20px;  
  195.    font-stylenormal;  
  196. }  
  197. p  
  198. {  
  199.    margin-top-5px;  
  200.    margin-left25px;  
  201.    color: Yellow;  
  202.    font-size20px;  
  203. }  
  204. ul#topnav  
  205. {  
  206.    margin0;  
  207.    padding0;  
  208.    floatleft;  
  209.    min-width1024px;  
  210.    max-width1024px;  
  211.    list-stylenone;  
  212.    positionrelative;  
  213.    font-size1.2em;  
  214.    background-color#9fd2e5;  
  215.    background#f0f0f0;  
  216.    font-family:'Times New Roman';   
  217.    font-variant:small-caps;  
  218.    text-transformnone;  
  219.    font-weight:900;  
  220.    margin-bottom0px;  
  221. }  
  222. ul#topnavli  
  223. {  
  224.    floatleft;  
  225.    margin0;  
  226.    padding0;  
  227. }  
  228. ul#topnavlia  
  229. {  
  230.    padding10px15px;  
  231.    displayblock;  
  232.    color:Blue;  
  233.    background#f0f0f0;  
  234.    text-decorationnone;  
  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.    floatleft;  
  247.    padding15px;  
  248.    margin-top5px;  
  249.    positionabsolute;  
  250.    left: 0;  
  251.    top: 35px;  
  252.    displaynone;  
  253.    width994px;  
  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.   displayblock;  background#DDE4E9;           
  266. }  
  267. ul#topnavlispana  
  268. {  
  269.    displayinline;color:black;  background#DDE4E9;  
  270. }  
  271. ul#topnavlispana:hover  
  272. {  
  273.    text-decorationnone;   color:redbackground#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.