Ideal Way of Defining the Master Page in ASP.NET

William Emmanual

Rate me:

4.70/5 (8 votes)

26 Sep 2013CPOL2 min read

14.7K

Planning the Master Page in ASP.NET

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.

ASP.NET

//
<%@ 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">
    <!-- UserControl for Meta tags, stylesheets, 
    JQuery min file to be added on every  page -->
    <headTags:headerTags runat="server" ID="headerTags" />

    <!-- For custom styles to be added each page -->
    <asp:ContentPlaceHolder ID="head" 
    runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="newsletter" runat="server">    

    <header>
        <div class="container">
            <div class="row">
                <!-- UserControl For dynamic menu to be added each page -->
                <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>

    <!-- Javascript files -->
    <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>
    
    <!-- For custom scripts to be added each page -->
    <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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

William Emmanual

CEO Enziq Solutions Pvt. Ltd.

India

My key portfolios at Enziq Solutions includes Business Development and Strategy and overseeing Web operations and Digital Promotion.

Read more about me at: http://enziq.com/site/Company/william.html

This is a Organisation

3 members

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.