Master page design in Asp.net

Master page is the page that make every web page look standard, and added as reference to each page we create in that web application.

Master page is very helpful to create standard design for website, here you learn how to create and implement master page and nested master page in asp.net application.

Master page is design layout of webpage, which helps to standardize the look and feel for web pages in application; Master page contains all common reusable interface part of all asp.net web pages

Here are few characteristic of Master Page in Asp.Net

• Master page provide template for standardization
• In one Application we can have multiple master pages
• It has placeholders for the content, which can be overridden by web page
• Master page comes with .master extension
• ScriptManager, Header, Footer all are placed in Masterpage
• ContentPlaceHolder - a place for web page control, in page asp:Content has a property called ContentPlaceHolderID to map with place holder

Above picture demonstrate the outline of a master page structure in asp.net application

<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
    

How to use Master page in asp.net webpage

Now let's look at the webpage, how we implement the master page.

First we define a asp:Content and then set up the ContentPlaceHolderID of master page.

 <%@ Page Title="Home Page" Language="C#"
 MasterPageFile="~/Site.Master" AutoEventWireup="true"
  
CodeBehind="Default.aspx.cs" Inherits="WTRWebForm._Default"%>

<asp:Content runat="server" ID="BodyContent"
ContentPlaceHolderID="MainContent">

In real time application development you may have requirement where you need to change the Master Page Dynamically at Runtime depending on user role, permission, region etc.

In below example we are changing master page based on user country

protected void Page_PreInit(object sender, EventArgs e)
        {
            if (usercontry == "India")  
                this.Page.MasterPageFile = "~/India.master";
            else if (usercontry == "USA") 
                this.Page.MasterPageFile = "~/USA.master";
            else
                this.Page.MasterPageFile = "~/general.master";
        }

When one master page references another master page as its master, that's called a nested master page. One master page can have multiple level of master page reference, though there is no architectural limitation but having too many levels of master page may be considered as bad design. Let’s understand with example.

Parent Master Page: Parent.master

<%@ Master Language="C#" %>
<asp:Content id="Content1" ContentPlaceholderID="MainContent"
 runat="server">
</asp:Content>

Child Master Page: child.master

Here is an example of child master page, means a master page under another master page

<%@ Master Language="C#" MasterPageFile="~/Parent.master"%> 
<asp:Content id="Content1" ContentPlaceholderID="MainContent" runat="server">
</asp:Content>

Web Page: Finally setting the above child master page as master page of any web page

<%@ Page Language="C#" MasterPageFile="~/child.master"%>