Interaction Between Content Page and Master Page

• Download source code - 6.19 KB

Introduction

One would hope that the interaction between a content page and its related master page could automatically occur since the content page and the master page are compiled together by the .NET framework before being rendered to a client browser. Unfortunately, additional programming work is required to make it happen. The .NET framework has made this relatively easy to implement with a few steps, as indicated below.

First of all, place a MasterType directive at the beginning of a content page to establish a communication link between the content page and its master page:

<%@ MasterType VirtualPath="~/MasterPage.master" %>

MasterPage.master is the file name of the master page. This directive enables a “Master object” on the content page that provides a programming interface for the interaction. Based on Microsoft documentation, the Master is a property of the Page class. Since it behaves like an object, for readability, let's call it the Master object.

Secondly, expose the server controls on the master page by means of public properties and methods. These properties and methods are presented as public members of the Master object on the content page. The content page communicates with the master page by accessing the properties and methods.

Thirdly, wire the events of the master page’s server controls on to the content page via the Master object. The master page communicates with the content page through the event handlers.

Communication scenario

The basic interaction between a content page and a master would be either the content page communicating with the master page or the master page talking to the content page. To illustrate how the interaction really works, a demo application is prepared for download.

As shown in the above screenshot, the top portion has two TextBoxes and two Buttons colored in blue, outlined by a blue rectangle. These are the server controls on the master page. Similarly, two TextBoxes and two Buttons are presented at the lower portion of the screenshot in maroon. These are the server controls on the content page.

In the master area, click MasterButton1, and the text in Master Box 1 is sent to Content Box 1. Click MasterButton2, and the master page retrieves the text from Content Box 2 and displays it in Master Box 2. In the content area, ContentButton1 sends text from the content page to the master page while ContentButton2 retrieves text from the master page to the content page.

This application, although relatively simple, illustrates the common interaction scenario between a content page and its related master page.

Content page interacts with master page

The server controls on a master page are local to the master page, which are not accessible by a content page. To make them accessible, the server controls need to be exposed as public properties or methods. The following code sample creates four public properties for the two TextBoxes and two Buttons on the master page and also exposes four methods that assign values or retrieve values for the TextBoxes. For clarity, the word “Property” is added to the front of each property name. Depending on project needs, the properties can be read only, write only, or read and write. More methods can also be implemented, if needed.

//expose controls on master page as public properties
public TextBox PropertyMasterTextBox1
{
    get { return txtMasterBox1; }
    set { txtMasterBox1 = value; }
}
public TextBox PropertyMasterTextBox2
{
    get { return txtMasterBox2; }
    set { txtMasterBox2 = value; }
}
public Button PropertyMasterButton1
{
    get { return btnMasterButton1; }
}
public Button PropertyMasterButton2
{
    get { return btnMasterButton2; }
}
//expose public methods on master page for content page to call
public void SetMasterBox1Value(string myText)
{
    txtMasterBox1.Text = myText;
}
public string GetMasterbox1Value()
{
    return txtMasterBox1.Text;
}
public void SetMasterBox2Value(string myText)
{
    txtMasterBox2.Text = myText;
}
public string GetMasterBox2Value()
{
    return txtMasterBox2.Text;
}

On the content page, the above properties and methods can be seen as public members of the Master object. The code listing below shows the content page’s btnContentButton1 click event handler that sends the text from Content Box 1 (in maroon) to Master Box 1 (in blue). Optionally, either a property or a method of the master page may be used to accomplish this. In option 1, the value of txtContentBox1 is assigned to Master Box 1 through the public property Master.PropertyMasterTextBox1, while in option 2, the public method Master.SetMasterBox1Value() is called to achieve the same goal.

//send text from Content Box 1 to Master Box 1
protected void btnContentButton1_Click(object sender, EventArgs e)
{
    //use one of the options below
    //option 1. use master page public property
    Master.PropertyMasterTextBox1.Text = txtContentBox1.Text;

    //option 2. alternativly, call Master page public method 
    //to assign a value to the control on master page
    Master.SetMasterBox1Value(txtContentBox1.Text);
}

The btnContentButton2’s click event handler retrieves the text from Master Box 2 (in blue) and displays it in Content Box 2 (in maroon). Look at the code listing below.

//Get text from Master Box 2 and display it in Content Box 2 
protected void btnContentButton2_Click(object sender, EventArgs e)
{
    ////use one of the options below
    //option 1. access master page's TextBox through
    //a public property exposed on mater page
    txtContentBox2.Text = Master.PropertyMasterTextBox2.Text;

    //option 2. Call master page public method
    txtContentBox2.Text = Master.GetMasterBox2Value();

    //option 3. use FindControl() method of Master object
    txtContentBox2.Text = ((TextBox)Master.FindControl("txtMasterBox2")).Text;
}

In addition to options 1 and 2 that call a master page’s property or method, one more option is available, that is the FindControl() method of the Master object. Please note that this method searches for a local server control directly on the master page. Therefore, it is not necessary to expose public properties or methods when being used. A server control found by this method has to be cast into a proper type. In option 3 above, the server control txtMasterBox2 is found, and is cast into a TextBox.

Master page interacts with content page

To make a master page interact with a content page, the event of a server control on the master page needs to be wired on to the content page. A corresponding event handler should also be implemented on the content page.

In our sample application, the button click events for btnMasterButton1 and btnMasterButton2 are wired, utilizing their public properties, PropertyMasterButton1 and PropertyMasterButton2. Their corresponding event handlers are PropertyMasterButton1_Click() and PropertyMasterButton2_Click(). It can be seen in the code listing below that the event wiring code is placed in the Page_Init event handler. This is because the events have to be raised on every postback. It is much cleaner to leave the code here than in Page_Load in order to avoid the complexity dealing with the PostBack() logic in Page_Load.

//raise button click events on content page for the buttons on master page
protected void Page_Init(object sender, EventArgs e)
{
    Master.PropertyMasterButton1.Click += new EventHandler(PropertyMasterButton1_Click);
    Master.PropertyMasterButton2.Click += new EventHandler(PropertyMasterButton2_Click);
}

//Send text from Master Box 1 to Content Box 1
protected void PropertyMasterButton1_Click(object sender, EventArgs e)
{
    //use one of the options below
    //option 1. use master page public property
    txtContentBox1.Text = Master.PropertyMasterTextBox1.Text;

    //option 2. Call master page method
    txtContentBox1.Text = Master.GetMasterbox1Value();

    //option 3. use FindControl() method of Master object
    txtContentBox1.Text = ((TextBox)Master.FindControl("txtMasterBox1")).Text;
}
//Get text from Content Box 2 to Master Box 2
protected void PropertyMasterButton2_Click(object sender, EventArgs e)
{
    //use one of the options below
    //option 1. User master page's property
    Master.PropertyMasterTextBox2.Text = txtContentBox2.Text;

    //option 2. call master page's method
    Master.SetMasterBox2Value(txtContentBox2.Text);
}

The event handler PropertyMasterbutton1_Click() sends data from the master page to the content page, and the handler PropertyMasterButton2_Click() retrieves data from the content page to the master page. Again, there are more than one option available for doing the work by either accessing a public property, or calling a public method of the master page, or utilizing the FindControl() method as explained in the earlier section.

Conclusion

With a little programming work, a content page and a master page can interact with each other as needed. The demo application provided in this article does simple data exchange between content and master pages. Since public properties and methods are exposed, and the events of the server controls on the master page are wired to the content page, more complicated interaction can be easily implemented. Although this article only touches TextBox and Button server controls, other types of controls can be dealt with in the same manner.

References

• Working with ASP.NET Master Pages Programmatically
• Passing Information Between Content and Master Pages
• Master Page, Child Pages: Dynamic Communication Flexibility