RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Creating Web Sites with ASP.NET 2.0 : Page 4

If you're just starting to create ASP.NET web sites—or just switching to ASP.NET 2.0—you can get up to speed quickly with this handy guide.

Master Pages
Master pages provide the ability to define page templates on which you can base other pages, giving you—in effect—visual web page inheritance. Pages based on a master page, referred to as a content page, do not technically inherit the master page settings. Instead, ASP.NET combines the master page and the content page to form the resulting page (see Figure 14). The power lies in the fact that visual and program code changes made to the master page are immediately reflected in the content pages based on the revised master. Web site projects can contain more than one master page and you can embed a master page within another master page.

Figure 14: Master pages combine with content pages to form the rendered page.

A complete master page contains HTML, optional ASP.NET web controls, optional user controls, and one or more required ContentPlaceHolder controls. A ContentPlaceHolder control is a special ASP.NET web container control (<asp:contentplaceholder>) responsible for containing the controls placed on a content web page. You will find the ContentPlaceHolder control in the Standard section of the Toolbox. You can place one or more ContentPlaceHolder controls on a master page. All content on a content form is restricted to one of the ContentPlaceHolder controls defined on the content page's master page. The master page content on a content page is grayed out and not editable from within the content page. The only live areas available in the designer are the ContentPlaceHolder controls defined in the master page.

Figure 15: Select the Master Page item type to create a master page.
To create a master page you simply create a new page of type master page (see Figure 15). If you look at the HTML source for the master page you'll see the @Master directive, which defines the master page. The ASP.NET page parser uses the @Master tag attributes to create and compile the page:

   <%@ Master Language="VB" 
   Inherits="CoDeASPNET20" %>
The attributes for the @Master should look familiar. You typically see these same attributes on the @Page directive.

Figure 16: A master page is comprised of HTML, web controls, and one or more ContentPlaceHolders.
Just because creating the master page is easy that doesn't mean getting to the final layout is. This is where the talented graphics people come in handy. Unfortunately for this article you're stuck with my graphics skills. In Figure 16 and Listing 1 you can see that the page contains a table for layout, some simple background colors, a company logo, and some text. You should note the key item in the HTML code—the <asp:contentplaceholder>.

I have only one ContentPlaceHolder on my master page at the moment. I could have added more but one will do for now. With the master page created it's time to move on to creating the content Web Forms based on my master page.

To create a content page based on a master page you can simply click a checkbox and select the master page to use. I deleted the Default.aspx created when I created the project since I want to use Default.aspx as the name of my first content page. Go ahead and add a new Web Form by right-clicking on the project name to display the shortcut menu and select "Add New Item.' Select Web Form from the list of installed templates, enter the name of the form, Default.aspx in this case, and check the "Select master page" checkbox (see Figure 17). Click Add to display the "Select a Master Page" dialog box, which lets you select the master page to use with the new content page. The new content page will display, and the content inherited from the master page will appear grayed out and disabled (see Figure 18).

Figure 17: Check the "Select master page" checkbox to create a content page.
Figure 18: Master page content is disabled while designing the content page.

Click the Source tab on the bottom of the design surface to reveal the HTML source for the page:

   <%@ Page Language="VB" 
     AutoEventWireup="false" CodeFile="Default.aspx.vb"
     Inherits="_Default" title="Untitled Page" %>
   <asp:Content ID="Content1" 
The MasterPageFile attribute on the @Page directive signifies which master page the current page works with. As you can see, there isn't much there. Key elements are the MasterPageFile argument in the @Page reference and the <asp:Content> control. The <asp:Content> controls define where to display content for the page and are directly tied to the specific ContentPlaceHolder control on the master page through the ContentPlaceHolderID property.

You can add content to a <asp:Content> control by dragging and dropping controls into the control or manually via HTML coding. Launch the project to see how the master page will look when it renders.

Now that the fundamentals regarding how things look are out of the way, let me tackle a few coding issues you may run into. For example, master pages support the same events that a regular page supports, which means you can add code to the event handler for the Load event on the master page. Yes, you can add code to the same event handler in the master as well as the content page. Which code runs? The answer is both.

Event firing order becomes critically important when you add event handling code to master pages and the content forms based on them. The following events occur when ASP.NET renders a page. I've listed these events in the order in which they occur.

  • Content Page Pre Initializes
  • Master Page Child Controls Initialize
  • Content Page Child Controls Initialize
  • Master Page Initializes
  • Content Page Initializes
  • Content Page Initialize Complete
  • Content Page Pre Loads
  • Content Page Loads
  • Master Page Loads
  • Master Page Child Controls Load
  • Content Page Child Controls Load
  • Content Page Load Complete
Figure 19: The page event firing order determines when specific events will be raised.
In my example for this article I created the EventFiringOrder.aspx form containing a single label to help demonstrate when events occur. I added code to the appropriate event handlers in both the CoDeASPNET20 master page (see Listing 2) and the EventFiringOrder.aspx content page (see Listing 3). When you launch the form you can see the order in which the events occurred (see Figure 19).

Another issue related to working with master pages is: How do you programmatically access controls located on the master page from within a content page? The Master object provides a reference to the master page and is used to access master page attributes. Suppose you want to manipulate the value displayed in a textbox located on the master from within the content page. One approach would be to use the FindControls method on the Master object to locate a reference to the textbox:

   Protected Sub Page_LoadComplete( _
      ByVal sender As Object, _
      ByVal e As System.EventArgs) _
      Handles Me.LoadComplete
         "EventFiringOrder.aspx Load Complete<br>")
      Me.Label1.Text = _
   End Sub
While this approach works, it is late bound, meaning that you don't get IntelliSense assistance and it is not strongly typed. Alternatively, you can create a property on the master page that references the textbox and access the Text property from within the content page:

   Partial Class WhatsNewIn20
      Inherits System.Web.UI.MasterPage
      Public Property DateTextBox() As TextBox
            Return TextBox1
         End Get
         Set(ByVal value As TextBox)
            TextBox1 = value
         End Set
      End Property
To reference properties on the master page from the content page, you need to add the @MasterType directive to the content page:

   <%@ Page Language="VB" 
     title="Untitled Page" %>
   <%@ MasterType VirtualPath=
To access the public properties on the master page from the content page you just use the Master object and reference the property as you would any other property exposed by the Master object:

   Protected Sub Page_LoadComplete( _
      ByVal sender As Object, _
      ByVal e As System.EventArgs) _
      Handles Me.LoadComplete
         "EventFiringOrder.aspx Load Complete<br>")
      Me.Label1.Text = Master.DateTextBox.Text
   End Sub
So how do you specify the master page to use at run time? You can change the MasterPageFile attribute of the @Page directive at design time to specify which master page to use. That is great at design time but what if—based on some criteria only available at run time—you want to specify which master page to use? Knowing the content page events and their firing order comes into play here. The content page's PreInit event fires first, and at that point there will not yet have been any master page activity. Setting the content page's MasterPageFile property in the PreInit event gets the job done:

   Me.MasterPageFile = "MasterPage3.master"

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date