Master and Content Pages in Whidbeyby Wei-Meng Lee
Most web sites you see today have a consistent look and feel, containing a company logo and perhaps a navigational menu. A good example is O'Reilly's web site, where every page has a consistent look with a navigational menu on the left side of the page (see Figure 1):
|Figure 1. Most web sites employ a common header and navigational menu|
As an ASP.NET web developer, you can use user controls to encapsulate all of the headers and navigational menus and embed them onto every web page. However, if there are modifications to the user controls, it usually involves manually editing every single page to modify its layout.
In ASP.NET Whidbey, there is a new feature known as Master and Content Pages. This feature addresses the limitations of using user controls for headers and navigational menu information. In Whidbey, you can simply construct a Master page to include your page header information. You then build your page normally using Content pages, which will automatically include the header information defined by the Master page. To really understand how Master pages and Content pages work, let's build a simple web site using O'Reilly as an example.
Creating the Master Page
Let's first create a Master page containing some header information and a navigational menu. Launch Visual Studio .NET Whidbey and create a new web site project. In the Solution Explorer, right-click on the web site name and select Add New Item.... Select the Master Page Using Code Separation template and click Open (see Figure 2).
|Figure 2. Creating a new Master page|
Drag and drop the following controls to the Master Page (see Figure 3):
For this article, name the image control containing the O'Reilly logo "imgTitle". Set the NavigateUrl property of the HyperLink control to "default2.aspx" (I will illustrate how the navigational menu can be changed when the Conferences menu item is clicked).
|Figure 3. Populating the Master page|
I have saved all the of images that I will use for this article in the Image folder (see Figure 4).
|Figure 4. The image folder for storing all of the images|
Creating the Content Page
Once the Master page has been created, I will now create the content page that will make use of the Master page representing the header. In Solution Explorer, right click on the web site name and select Add New Item.... Select the Content Page Using Code Separation template and click Open. You will be asked to choose the Master page to use. Select MasterPage.master (see Figure 5). Click Open.
|Figure 5. Choosing a Master page for a Content page|
You should see your Content page as shown in Figure 6:
|Figure 6. The content page with the Master page content embedded|
The Content page consists of the header (as specified in the Master Page) and a Content control. The Content control is the placeholder for all other controls on the page. Essentially, this is where your content of the page is located. In our case, I will create two Content pages: one for the main page (see Figure 7) and one for the Conference page (see Figure 8).
|Figure 7. The main page (main.aspx)|
|Figure 8. The Conference page (default2.aspx)|
Pages: 1, 2