Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

How to change the master page depending on the client's browser

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

Snippet

 <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
to
Snippet
 <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
Snippet
Snippet
body   
{
 background:#efefef;
 ....

 The page layout

Snippet

.page
{
    width1200px;

 

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.

 Snippet

<%@ 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!!! 
Posted: Jul 26 2010, 10:11 PM by nikolaosk | with 3 comment(s) |
Filed under: ,

Comments

Gopi said:

That's really awesome. Thanks for the tips.

How to switch for other browsers, like Safari, chrome and Opera.?

Thanks,

Gopi

# July 26, 2010 9:33 PM

Arun Mahendrakar said:

Really interesting, is there a listing somewhere that shows all the other browsers that are supported this way?

Arun

# July 27, 2010 12:39 AM