1. Introduction to Master Pages
Master Pages help in providing the consistently laid-out pages. When we switch between other pages, we can note the steady look and feel throughout the websites. Microsoft provides Master Page support from ASP.Net 2.0 onward. The Master Page is used to making the outer skeleton structure of the websites and we can see this outer skeleton as web page header, footer and sidebars with navigational elements. In this example, we will explore how to create a Master page along with other web pages.
2. Master Page & Content Pages
The ‘Master Page’ and ‘Content Page’ together give the complete page layout. Master Page provides the constant outer shell and the navigable web pages are placed in the Content Page area. It also provides a Content Placeholder Control, which we can use to hold the web page contents. To better explain this, have a look at the depiction below:
Now let us say that a website with the above layout contains 20 web pages. It shows all these web pages in the Page Content area and when you navigate to these 20 pages, the outer shell (Header, Footer, Sidebar) remains unaltered. This gives consistency when we navigate between different pages of the website. The Master Page skeleton structures usually have the data common to all the web pages. For example, in the above picture, we can keep the Navigation links in the sidebar, site logo and images in the header and copyright information in the footer.
3. ContentPlaceHolder Control
Have a look at the below depiction:
Using ‘Add New Item’ option, we can add a Master Page to a website (marked as 1). 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 get an option to specify the Master Page by selecting the checkbox ‘Select Master Page’ (Marked as 3). The below video shows creating a simple Master and Content Page:
Video 1: Creating a Master Page
4. Master Page Example
Have a look at the below screenshot. In the below example the pale colour shows the Master Page layout which comprises Header, Sidebar, Footer. The Detail Area is in a yellow background. In the header Page Title, we have a heading ‘Master Page Example’. The sidebar contains site navigation links. In the footer area, we have site name (Well. That’s our old website name before shifting to coding-examples.com). We place the content pages in the details area through a ContentPlaceHolder Control.
Have a look at the below video to know how this example is created:
Video 2: Creating the Example
Source Code: Download Asp.net Master Page Example From Google Drive
Categories: Asp 2.0
Tags: Content Page, ContentPlaceHolder, Master Page
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.