Introduction
Every project starts with a tussle between the web designers (the HTML geeks) and the .NET developers about how to structure the ASP.NET master page according to the specific requirements of the website being designed and developed. If only to ease this debate and to serve as a solid, tried and tested approach to minimize this discussion, I am sharing my master page that helps me through almost all my website development projects.
Background
Planning the right structure for your master page is crucial for the entire website's performance and scalability. I would like to present an approach that is both easy to understand and breaks down the structure of the site into abstract pieces distributed across user controls, content placeholders and sitemap files to ensure minimum code complexity.
Using the Code
This breakup ensures:
- The meta tags that your SEO teams will update are separated into a different user control that can be edited separately from your main development [headTags.ascx].
- Head content placeholder ensures that you have a section to place your custom CSS, custom JS files specific to any page.
- The menu is separated away into a user control [menu.ascx] that allows you the space to write custom code for showing different types of menus for different pages, including the code for showing the active page.
- The sitemap path file to ensure you do not have to write the entire sitemap multiple times, and this is used to create the breadcrumb of the site, the menu of the site, quick links (if needed) on the footer.
- The footer content placeholder ensures that any new custom jquery files can be added to the footer of the site after the common set of JS files are loaded including the jQuery file.
//
<%@ Master Language="C#" AutoEventWireup="true"
CodeBehind="generic.master.cs" Inherits="MeriBus.generic" %>
<%@ Register TagPrefix="headTags"
TagName="headerTags" Src="~/headTags.ascx" %>
<%@ Register TagPrefix="siteMenu"
TagName="siteWideMenu" Src="~/menu.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
-->
<headTags:headerTags runat="server" ID="headerTags" />
-->
<asp:ContentPlaceHolder ID="head"
runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="newsletter" runat="server">
<header>
<div class="container">
<div class="row">
-->
<siteMenu:siteWideMenu runat="server" ID="siteWide" />
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
PathSeparator=" \ "></asp:SiteMapPath>
</div>
<asp:ContentPlaceHolder ID="quickLinks"
runat="server"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="center"
runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</section>
</form>
<footer>
<div class="container" >
</div>
</footer>
-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
.
.
.
<script type="text/javascript" src="js/bootstrap.js"></script>
-->
<asp:ContentPlaceHolder ID="footer"
runat="server"></asp:ContentPlaceHolder>
</body>
</html>
//
This should serve as a default master page reference while creating any new website's master page. Do let me know if you have ideas for improving this breakup.
Why User Controls?
User controls are a great way to ensure that the code snippet can be placed outside the master page and thus allow me to call it across any number of master pages. This is a desired case for website structure elements like Menu navigation and HTML meta tags.
User controls ensure that individual elements of the site can be edited from a single location across multiple instances of the code, for example if a site has a member area and an open public area, the navigation of both views will be different. But you can write the code for the menu showing two views via the same User Control called on multiple master pages.
