Master pages in ASP.NET – Programmatically change master page

Read my other posts on Master pages in ASP.NET

• Nested master pages
• Accessing master page properties, methods and controls

If you use a master page in you website (most of us do), and also want to let the users select different themes or maybe you want a iPhone, iPad, Android or Windows Phone 7 (maybe not Win Phone 7), but the rest, version of your site. One way of doing this is to change the master page based on some external input, may it be a user selected theme from a drop down list or the User-Agent from the request.

Change the master page please! – Said the user

This is really simple to do, just do the following.

First create two master pages, in this example I have Light and Dark. Edit each master page to fit your needs, i.e the background or layout.

Light.Master is the the default master page for all pages.

Then create a drop down list with two options, light and dark, this is the themes (a.k.a master pages) of the site the user can choose between, the light version is the default master page.

The ASPX file looks like this, where the drpMaster_SelectedIndexChanged is the method that will execute after the selection of the “theme”.

To catch the post back event created by the drop down list, use this code in the code-behind file of the page.

The reason why we do not change the Page.MasterPageFile property in this method is that it will generate a error, telling us  that the MasterPageFile property can only be set in or before the Page_PreInit event. Therefor we need to store the value in a Session object and use it later. So we store it and redirect the browser to the current URL.

In the Page_PreInit event we just checks that the Session object is not null and if it is not, we set the Page.MasterPageFile property accordingly.

When dark is selected the page changes to this.

 

Change the master page please! /Mobile device

If you instead want to redirect the user to a mobile device automatically you can check the Request.Browser.IsMobileDevice property to see if the user is viewing your site with a mobile device.

 

You would also want to check the Session["master"] and only do a redirect if it is not set to Mobile otherwise you would get a endless redirect loop. (Thanks Jeremy)

You can also use the Browser object to further fine grain the redirection, i.e a version for iPhone and a version for Andriod.

Master pages in ASP.NET – Accessing master page properties, methods and controls from the content page

Read my other posts on Master pages in ASP.NET

• Master pages in ASP.NET – Nested master pages

 

Accessing a master pages properties

So you have a master page, with a lot of content pages using it, and you need the same data, i.e. UserId on all those content pages?

A good way of doing this without breaking the DRY principle is to let content pages access master pages properties.

To do so you need to create a public property in the masters code-behind file like this.

Then you add a @ MasterType directive in all the content pages, where you need to access this property.

This is placed right under @ Page directive. When you have done this, all you need to do to access the MyMasterProperty is to write the following:

Master.MyMasterProperty  = “This is a new text.”;

And to read it:

Response.Write(Master.MyMasterProperty)

The same can be done with methods also.

 

Accessing a master page controls

Say you want to access the controls of a master page, then you can do it in the following way.

We have the following control in the master page.

<asp:Label runat=”server” id=”MasterLabel”></asp:Label>

To programmatically access this control from a content page we need to use the FindControl method in the Master object and cast it to the right type. To do this just use the following code in the code-behind file in the content page.

Label MasterLabel = (Label)Master.FindControl(“MasterLabel”);

MasterLabel.Text = “This text will be displayed in the MasterLabel control in the master page”;

Because we are actually using a string to pass in the control id to the FindControl method, this is not strongly typed, witch I personally prefer (miss typing of the ID wont be found until runtime otherwise). You can expose the control as a property.

Then use the same technic described in the beginning of the post to access the master pages control.

Master pages in ASP.NET – Nested master pages

Sometimes you want to use a generic layout to the entire website, and in 2 “sub sites” like forum and admin you want to have another master file to dictate layout for that specific section.

What you need to do is create a parent master file and two sub master files. Like the image below.

The Parent.Master file have two ContentPlaceHolder controls.

<asp:ContentPlaceHolder ID=”HeadContent” runat=”server”></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID=”MainContent” runat=”server”/>

This two must exist in the child master files also.

You also have to reference the Parent.Master file in both Admin.Master and Forum.Master like the image below (showing Forum.Master)

Now when all master pages is created and configured all you need to do to use them is to add a Web Form using Master Page, click Add. And select the master page you want.

The @ Page directives will look like the following line of code, for pages using the Admin.Master.

<%@ Page Title=”" Language=”C#” MasterPageFile=”~/Admin.Master” AutoEventWireup=”true” CodeBehind=”Admin.aspx.cs” Inherits=”Prototype_Master_Pages.Admin1″ %>

And to round up this post a image of the actual ASPX page using the Admin.Master file.

The text Admin is rendered from the Admin.Master.