Master Pages in Asp.Net 3.5

Introduction

The introduction of Master Pages was one of the very innovative feature in Asp.Net 2.0. It helped a lot in reusing the design and common logic throughout the application which was earlier very tedious task. Further the updation and modification of existing code and design became very easy and manageable. This task was previously done with the help of user controls in which the user control was used to reuse the existing design + code but the updation and management was still an issue. With the introduction of Master Pages it was like a dream come true.


Asp.Net 3.5 went a step further and introduced the nested Master Pages which in reality made OOPS available to the design part as well. Here we could do all the things we can do on design part in OOPS that we could only do with a code. Now we will look at the way Master Pages are made and used.


Master pages allow you to create a consistent look and behavior for all the pages (or group of pages) in your web application.
A master page provides a template for other pages, with shared layout and functionality. The master page defines placeholders for the content, which can be overridden by content pages. The output result is a combination of the master page and the content page.
The content pages contains the content you want to display.
When users request the content page, ASP.NET merges the pages to produce output that combines the layout of the master page with the content of the content page.

---

Master Page Example

The master page above is a normal HTML page designed as a template for other pages.
The @ Master directive defines it as a master page.
The master page contains a placeholder tag for individual content.
The id="CPH1" attribute identifies the placeholder, allowing many placeholders in the same master page.
This master page was saved with the name "master1.master".
Note: The master page can also contain code, allowing dynamic content.

---

Content Page Example

The content page above demonstrates how .NET controls can be inserted into the content page just like an into an ordinary page.

Nested Master Page Example

When one master page references another as its master, it is said to be a nested master page. A number of nested masters can be componentized into a single master. There is no architectural limitation to the number of child masters that can be created. This nested model is pretty cool and powerful, and allows arbitrary levels of nesting. The depth of nesting also does not impact on performance significantly. The advantage of this kind of structuring is that a number of child masters can be created to be subordinated to the overall look and feel of the site defined by the Parent master, while the child master give the child pages some uniqueness. While a parent master defines the overall layout of the pages—header, body and footer, the child master expands the body for a group of pages.

Just like the parent master page child masters have the extension .master too. It contains all the controls that are mapped to content place holders on the parent master page. The layout is similar to that of a content page in this respect. However, child masters also have content place holders of their own to display content of its child pages.

For example, you could define a top-level master-page called "MainMaster.master" that defines a common logo header and footer, and defines a content-placeholder for the page called "content". You could then define two sub-masters beneath it - one that provides a two-column layout model for the content ("TwoColumnMaster.master"), and one that provides a three-column layout model ("ThreeColumnMaster.master"). These two nested-master pages could then use the MainMaster.master file as the root master, and only adjust the layout within its content section (each would fill in the "content" placeholder and in turn add their own content-placeholders for sub-pages within it). The benefit of this approach is that if you ever want to change the logo or top-level design of the site, you only have to update one file (MainMaster.master) and then have every page on the site automatically pick it up regardless of what master file they were based on.

Note that different "contentplaceholders" on the main master can be used to load groups of content files loaded into the child masters which are in turn loaded into the main master. This implies that multiple child masters can load multiple content files into different "contentplaceholders" on the main master file.

ASP.NET 2.0 is not the first in support of "templating". However, the functionality provided by it goes beyond the frontiers of "templating" to make master pages components that can be reused. The mechanism is not based on class inheritance. The binding of the master and the content pages is defined statically and cannot be changed or set programmatically.

Below are a couple of sample codes which will help you in better understanding of the concept of Nested Master Pages and how to implement it?

Nested Master Pages - Example.

1. We have 2 master pages, "MainMaster.master" and "NestedMasterPage1.master".

2. "SubmasterPage.Master" is a child of "MainMaster.Master".

3. All .ASPX pages are inherited from "SubmasterPage.master".

As shown below:

Implementation Steps:

1. Below is the code for our MainMaster.master:

2. Add another Master page i.e. "NestedMasterPage1.master" from "Add New Item..."

3. Add Content page by right clicking the "SubMasterPage.Master" in solution explorer.

Now compile your application and view the result.    

Thus here we see that how the master pages work. By the use of Master Pages we can put the most common design and code in the main master page and according to requirement we can create sub-master pages or child master pages that would fulfill requirement of a set pages that need some common code.


Execution sequence of  events of master-content page

The execution sequence of events of master page and content page are as follows:

1. Content page PreInit event.
2. Master page controls Init event.
3. Content controls Init event.
4. Master page Init event.
5. Content page Init event.
6. Content page Load event.
7. Master page Load event.
8. Master page controls Load event.
9. Content page controls Load event.
10. Content page PreRender event.
11. Master page PreRender event.
12. Master page controls PreRender event.
13. Content page controls PreRender event.
14. Master page controls Unload event.
15. Content page controls Unload event.
16. Master page Unload event.
17. Content page Unload event.