jump to navigation

Change the master page depending on the client’s browser August 24, 2010

Posted by fofo in asp.net.
Tags: ,
trackback

In one of my seminars on ASP.Net, I was asked a question from a student regarding master pages and the various browser appications.

He basically asked if it was possible to have a different master page depending on the client’s browser.

My initial answer was to find the browser’s version programmatically and according to this value to have a particular master page dynamically assigned during the PreInit stage of the Page lifecycle.

But there is a simpler way.At first we need to create a website using Visual Studio 2008/2010.

Then copy the original Site.master page to the root directory of the website and rename it to AnotherSite.master.

Then we need to copy and paste in the root direcotory the Site.css and rename it to NewSite.css.

So we have now two master pages and two .css files.

Edit the AnotherSite.master and change the css reference

from

<link href=”~/Styles/Site.css” rel=”stylesheet” type=”text/css” />

to

<link href=”~/Styles/NewSite.css” rel=”stylesheet” type=”text/css” />
Now we do need to make some changes to the Newsite.css file.
you can change the background color, for example

body
{
background:#efefef;
….

The page layout

.page
{
width: 1200px;

Now we can go add a new web form to our page. We will call it “Anotherpage.aspx”.

Select as a master page the AnotherSite.master.

Then go to the “Source” of the newly created page and edit the Page directive according to the following line.

<%@ Page Title=”” Language=”C#” mozilla:MasterPageFile=”~/AnotherSite.master”
ie:MasterPageFile=”~/Site.master” AutoEventWireup=”true”
CodeFile=”MyNewPage.aspx.cs” Inherits=”MyNewPage” %>

Run your application with IE and Firefox and notice the respective masterpages
being applied to the web page.
Hope it helps!!!

About these ads

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,794 other followers

%d bloggers like this: