August 19, 2015

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

1. Introduction

Master pages help 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 websites 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 master 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 website 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 unaltered. 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 the 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 a 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 a common code to all the pages. While defining the common HTML content, we can also choose the place where the web page contents go by making use of the “ContentPlaceHolder” control (Marked as 4). Note that the ContentPlaceHolder control will be visible in the toolbox when the 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 checkbox “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 colour defines the master page layout which consists of Header, Sidebar, Footer and Detail Area (In yellow background). In the header Page Title “Master Page Example” is written. In the sidebar, 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

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)