In an earlier blog, I mentioned how through the use of Dynamic MasterPages, I could have my web site change its format based on some arbitrary condition such as the browser type. Here, I have assembled an example to illustrate Dynamic MasterPages in action.
For this sample, I have created a single web form that contains our page content. This form (childPage.aspx) gets its layout from a master page (masterpage1.master) but when a particular condition is encountered (query parameter “foo” provided), the child will use the layout from a different master page (masterpage2.master).
Since we might have dozens of pages that need to dynamically change their layout, I have created a class called “WebFormBase” that inherits from System.Web.UI.Form and as I add each new web form, I will have it inherit from my custom base class rather than from the default System.Web.UI.Form. Now when I add code into “WebFormBase”, my child form (and any other forms that derive from “WebFormBase”) will enjoy that code.
This is a good practice, especially in large web sites, for many obvious reasons.
To load our “childPage” with different query parameters, I created “default.aspx” with two hyperlinks.
- The first hyperlink loads “childPage.aspx” with no query parameters.
- The second hyperlink loads “childPage.aspx” with the query parameter, “foo”.
This figure illustrates how the same child page looks when different (dynamic) master pages are applied:
Here is my custom base class, WebFormBase, into which I have added a single event handler to check for the “foo” querystring parameter.
public class WebFormBase : System.Web.UI.Page
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
if (Request.QueryString.Get("foo") == null){
this.MasterPageFile="~/MasterPage1.master";
}
else{
this.MasterPageFile="~/MasterPage2.master";
}
}
}
The following code is for “ChildPage.aspx”, the web page whose layout is controlled by the two master pages. Notice that the MasterPageFile attribute is initially defined as “MasterPage1.master” and also that Inherits=”WebFormBase” causes the web form to inherit from our custom class rather than the built in webforms base class.
<%@ Page Language="C#" MasterPageFile="~/MasterPage1.master" Title="Variable Page" Inherits="WebFormBase" %>
<asp:Content ID="foo" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div style="background-color:White;padding:10px 10px 10px 10px">
This is the content that is embedded in the child page. Depending on the dynamically selected master page, my surroundings may differ.
</div>
</asp:Content>
One final note is that since I have defined that ContentPlaceHolderID=”ContentPlaceHolder1”, the alternate master page must have a content place holder named “ContentPlaceHolder1” or the page will erupt at runtime.
Feel free to download and run the sample web site which is available as a Zip file near the bottom of this post. As always, any comments and opinions are appreciated.