Master Pages in Visual Studio .NET 2005

In this article we will explore another new feature found in ASP.NET 2.0 called "Master Pages". Before we explore this feature let us go back down the lane and see what the factors are, that led to the implementation of "Master Pages".

The Web development process

In the beginning when Web sites were developed they all had the code written in a single page and this was repeated in all the other pages. This led to complexities for example if a particular fragment of code had to be modified in one page then it had to be applied to all the other pages. This was cumbersome and often led to errors because the fragment of code was forgotten to be applied in some of the pages and this led to the break down of the Web site when it went live. And it was difficult to change the layout of the pages because the code was not broken up into modules.

Then in the later days to come, as the development of Web sites improved a common standard was followed for Web sites as seen in Figure 1. This meant that all Web sites followed this common layout. At the top is the header, which displays the banner of the company. On the left hand side is the menu, which displays the navigation links to various pages that make up the Web site. At the bottom is the footer, which displays some links like contact us, about us, terms and conditions etc.... And in the center is the content, which varies from page to page. So each page that was a part of the Web site contained these 4 modules.

Figure 1. The common layout for Web sites.

Later the concept of include files came which enabled programmers to write the modules separately in other files and call them from the Web pages. So the code for this common modules were taken out from the pages and placed in separate files and then they were called from each and every page. Examples of include files were:-

And when a complete Web page was written these include files would be included in all the pages as shown below.

Website name

Figure 2. The layout of a Web page with include files.

But even after simplifying the process of taking out the common files and including a link to them, there were still problems with them. The common disadvantages were:-

Web development with ASP .NET 1.1

With ASP.NET 1.1 this was simplified with the concept of user controls. They were fragments of code compiled in separate pages and they could be modified outside of the Web page, which called them. But they still had the same disadvantages of the include files such as:-

Web development with ASP .NET 2.0

ASP.NET 2.0 introduces a feature called Master Pages, which is a flexible page-template based system that allows you to skin and control the layout of your entire Web site by modifying only one template.  Maintenance and overall complexity of your Web site is greatly reduced. So let us go into detail about "Master Pages".

What is a Master Page?

A Master Page is a special type of file that is a part of a Web project in ASP.NET 2.0. The Master Page can include all contents for example the header part, the menu part and the footer part.  Every page that includes the Master Page will automatically use the same controls inserted on the Master Page. The content of a child page is placed into a "ContentPlaceHolder" control. The contents of the master page can be seen at design time but cannot be edited.  The result is that the entire format and layout of your Web site can be maintained by changing a single file.

Menu

Content Place Holder

Footer

Figure 3. A view of Master page. Note the new control Content Placeholder.

This content placeholder can be a different page that is commonly found in Web pages and when these pages specify that they want to include the master page they automatically get inserted into the content placeholder.

Start Visual Studio 2005 Beta 1 and then click on File | New Web site. Select ASP.NET Website from the list of templates and choose the location to save this Web site and then click OK.

Figure 4. Creating a new ASP.NET Web site.

Right click on the Web site in Solution Explorer and then select "Add new item". Then select Master Page from the list of installed templates. Rename it to CIOLMasterPage.master and then click OK.

Note the new extension for the file name and it is a special file type and new to ASP.NET 2.0. Switch to the design mode and you will see a new control already placed on this master page. This control is called a ContentPlaceHolder control.  When other pages use this master page, their content will be placed within the ContentPlaceHolder control.

Now we will insert a table in the master page and design it so that it looks like Figure 1.

Click on Layout | Insert table and then a pop up window appears as seen below.

Figure 5. The "insert table" dialog. Note the new feature of specifying templates.

Now click on the Template radio button and you will see that there are several templates build in so that it makes our layout easier to develop.

Figure 6. The different styles available in the Template drop down list box.

Wow we have all the styles that are commonly found in all Web sites. Select the style "Header and side" and then a table will be placed on the page as seen below.

Figure 7. The style Header and Side table on the master page form.

Now we see that the content placeholder is outside the table and so we have to place it inside the table on the right hand side. Drag it and pull it so that it is placed inside the table as seen below.

Figure 8. The content placeholder inside the table.

Design the page so that it looks like this.

Figure 9. The designing of the master page.

Now we will see another feature that enables navigation and you guessed it right, it is new in ASP.NET 2.0 and is known as menu control.

Click on the Navigation tab in the Toolbox and then drag and drop the menu control into the left hand side of the table. The output is seen below.

Figure 10. The menu control on the master page.

Now we will configure the menu control so that it points to a valid data source and the navigation of the Web site will be possible. Click on Choose data source and then select New Data Source and then select the Site Map from the data source configuration dialog.

Figure 11. The various options for the data source configuration.

Now we will create the site map and then configure the menu to point to the site map so that navigation can be done.

Right click on the project in Solution Explorer and then select Add new item and then select Site Map and then click OK. The site maps is now added to the project and let us configure the file to point to some valid pages. 

Now when we configured this xml file it means that there will be 2 links in
the menu. One will be for the home page and the other will be for the About us page.

Now let us create the pages "Home.aspx" and "Aboutus.aspx" and then configure them to use the Master Page that we created just now.

Right click on the project in Solution explorer and then select New Item and then select Web Form. If you see the lower half of the screen you will see that there is an option to select a master page.

Figure 13. Selecting the master page when creating a new Web Form.

Name the page Home.aspx and then click ok. When you click Ok you will be prompted to select the Master page.

Figure 14. The master page dialog box.

You will see that the CIOLMasterPage.master file is selected by default. This is because this master page resides in the same project. Select it and then when the page is added the code shown below shows that the Master Page is now a part of this home.aspx file. 

Switch to the design view and you will see that the view is now completely different when compared to previous versions. The master page is now seen along with the home page but it is all disabled and editing cannot be done in the master page.

Figure 16. The home page in design mode.

This definitely gives an advantage over the include files and user controls in earlier versions. Viewing the header and menu parts are now possible when designing the content pages.

Now the data for the home page should be placed in the content control. Right click this and then select Create Custom Content from the menu and you will be able to insert the data in the content placeholder.

Figure 17. Creating the content for the home page.

Enter some text in this control and see the layout code how it is represented. 

Now let us run the Web site and see how it looks in the browser. Wow it has the header, menu and content all visible and the menu is visible.

Figure 19. The preview of the home Web page.

Let us create the "About Us" page in the same way as demonstrated earlier. And when we click on the menu link "About Us" we will be redirected to the new page. This is seen in Figure 20.

Figure 20. The preview of the "about us" Web page.

We just demonstrated a new feature available in ASP.NET 2.0 known as Master Pages. We were able to see the preview of the master page while designing the other pages.