Dynamic Site Layout and Style Personalization with ASP.NET

Hi,

 

This blog post summarizes a approach to dynamically customizing the UI experience of a web-site. We'll demonstrate two things as below:

 

·          Dynamically defining page layouts using a feature called "Master Pages

·          Dynamically defining a page's style look and feel via a feature called "Themes"

 

Here, I have demonstrated the first one. To achieve this you can follow below steps.

 

·          Define a page which allows to choose different master pages. Let say DynamicMaster.aspx

 

<%@ Page Language="C#" MasterPageFile="~/MasterPageOne.master" AutoEventWireup="true" CodeFile="DynamicMaster.aspx.cs" Inherits="DynamicMaster" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">

<div style="border:dashed 1px green">

    Select a Master Page:

    <ul>

        <li><a href="DynamicMaster.aspx?master=MasterPageOne">Dynamic Master 1</a>

        </li>

        <li><a href="DynamicMaster.aspx?master=MasterPageTwo">Dynamic Master 2</a> </li>

    </ul>

   </div>

</asp:Content>

 

Write the code behind as:

 

protected void Page_PreInit(object sender, EventArgs e)

    {

        if (Session["Master"] == null)

        {

            Session["Master"] = "MasterPageOne.master";

        }

        if (Request.QueryString["master"] != null)

        {

            switch (Request.QueryString["master"])

            {

                case "MasterPageOne":

                    Session["Master"] = "MasterPageOne.master";

                    break;

                case "MasterPageTwo":

                    Session["Master"] = "MasterPageTwo.master";                   

                    break;

            }

        }

        MasterPageFile = Session["Master"].ToString();

    }

 

• Provide a link on to this page to go to any page of the site where you can see the actual effect of the changed master page.
• Design this page as below.

 

 

public partial class Page1 : BasePage

{

   

}

 

public class BasePage : System.Web.UI.Page

{

    protected override void OnPreInit(EventArgs e)

    {

        base.OnPreInit(e);

        if (Session["Master"] == null)

        {

            Session["Master"] = "MasterPageOne.master";

        }

 

        MasterPageFile = Session["Master"].ToString();

 

    }

}  

 

 

MasterType TypeName="BaseMaster":

 

As mentoioned above, we can change the Master Page at runtime. To achieve, required is to use the <%@ MasterType TypeName="BaseMaster" %> directive. Here we can't use the Virtual Path property i.e              <%@ MasterType VirtualPath="~/MasterPageOne.master" %>.

 

Reason behind is -  the VirtualPath attribute supports only a single master page. Hence if we use VirtualPath and change the Master Pages dynamically by assigning value to MasterPageFile, the MasterType does not mathces and the runtime will throw an exception as 'Unable to cast object of type 'ASP.master2_master' to type 'ASP.master1_master'.

 

To use the 'TypeName' property, required is to create a class say, BaseMaster and inherit all the Master Pages with this class.

 

public partial class MasterPageOne : BaseMaster

{

}

 

public class BaseMaster : System.Web.UI.MasterPage

{

       public BaseMaster()

       {

              //

              // TODO: Add constructor logic here

              //

       }   

}

 

 

Hope this helps.

 

 

Arun Manglick