Wednesday, August 19, 2015

[ ASP.Net ] - Designing Master and content pages using ContentPlaceHolder control

1. Introduction

Master pages helps in providing the consistently laid-out pages. When we switch between different pages constant look and feel is achieved throughout the websites.  Microsoft provides Master page support from 2.0 onwards. The master page is used to provide the outer skeleton structure of the web sites and this outer skeleton can be seen as web page header, footer and sidebars with Navigational elements. In this article I will show you creating a Master page along with the web pages.

2. Master Page and Content Page

The “Master Page” and “Content Page” together gives the complete page layout. Master page provides the constant outer shell and the navigable web pages are placed in the content page area. The mater page provides a content placeholder control, which can be used to hold the web page contents. To better explain this have a look at the below depiction:

Fig 1. Master Page Design

Now let us say that your web site contains 20 web pages. All these web pages are shown in the page content area and when you navigate to these 20 pages, the outer shell (Top, Bottom, sidebar) remains un-altered. This gives consistency when different pages of the website are navigated. The master page skeleton structures usually have the information common to all the web pages. For example in the above skeleton, the Navigation links can be provided in the sidebar, Site log and images can be placed in the header and copyright information in footer.

3. Creating a Master and Content Page

Have a look at the below depiction:

Fig 2. Adding Master and Content Pages

Using “Add New Item” option we can add master page to a web site and the item is marked as 1 in the above picture. Once the page is added to the project, it will define the outer shell. We can place html code, as part of the master page and that will act as common code to all the pages. While defining the common html content, we can also chose the place where the web page contents goes by making use of the “ContentPlaceHolder” control (Marked as 4). Note that the ContentPlaceHolder control will be visible in the toolbox when master page is opened, as this control is specific to master pages. While we add Web forms (Marked as 2) we have the option to specify the master page by selecting the check box “Select master Page”. The below video shows creating a simple master and content page:

Video 1: Creating a Master Page

4. The MasterPage Example

Have a look at the below screenshot:

In the below example the pale color defines the master page layout which consist of Header, Sidebar, Footer and Detail Area (In yellow background). In the header Page Title “Master Page Example” is written. In the side bar, site navigations are given. In the footer area the site name is given. The content is placed in the details area through a ContentPlaceHolder Control.
Fig 3. MasterPage  Example

Have a look at the below video to know how this example is created:

Video 2: Creating the Example

Source Code: Download

*** When a New Article posted, get Notification to the email that you give below: ***

Follow us on G+


The opinions expressed herein are my own personal opinions and do not represent my current or previous employer's view in anyway