.browser Files in ASP.NET 2.0

It seems that with every new iteration of Microsoft s .NETFramework we get tools that make development and deployment of applicationseven easier and more powerful. Of course, sometimes these technologies arethere, but lightly documented. I found this true of the browser configurationfiles, hence the reason for this tutorial. For more on web application development with ASP.NET, see "HTML5 for the ASP.NET Developer" and "Create a Single-Page Application in ASP.NET MVC 4."

What Are Browser Configuration Files?

If you wanted to deploy your Web application to mobiledevices in ASP.NET 1.x, you had to: a) try to figure out how the mobile toolkitreally worked; b) possibly modify your machine.config and its associated xml (which wasn t well documented), and; c) cross your fingers and hopedevelopment doesn t go out of hand with the myriad custom controls you had forall the different devices to which you deploy.

Microsoft has greatly simplified this task with ASP.NET2.0 with master pages and their associated Browser Definition files. ASP.NET2.0 can properly render itself on around two-dozen browsers right out of thebox. Each of these browsers definitions are defined in fairly straightforwardXML files with a .browser file extension. By combining their definitions with masterpages, you can tell your Web form to use a different master page based on whichbrowser is being used.

Consider my page header example for a Sony PSP (see Figure1). The PSP is far from a standard browser. It runs 474x280 pixels, can t loadJava applets, and has marginal JavaScript support and limited text-entrycapabilities. I need optimized layouts for such a device, with fewer links morereadily laid out so visitors on PSPs can quickly find what they want using thenavigation capabilities of their device. So I created one master page for fullpower browsers like Firefox and Internet Explorer, and another master page forPSPs. Because of ASP.NET 2.0 s master pages capability, it s very easy to tellmy application which to use when it builds the page. Figure 1 shows the headerI used on Home.aspx to define the master page to use for each browser type thatrequests the page.

<%@ Page Language="VB" MasterPageFile="~/HackingPSP_RegularBrowsers.master" SonyPSP:MasterPageFile="~/HackingPSP_PSPOptimized.master" AutoEventWireup="false" CodeFile="Home.aspx.vb" Inherits="Home" Title="Hacking the PSP by Auri Rahimzadeh - Home Page" %> 

Figure 1: Themaster page s header.

Note that I have a standard MasterPageFile for allbrowsers other than PSP (I really don t care if someone browses the site with aphone; that s not my audience and I won t spend time optimizing for them) andmy specific SonyPSP:MasterPageFile designation for users who come to me with aSony PSP. That s almost all there is to it to get ASP.NET 2.0 to show yourdevice-optimized content (in this case, PSP-optimized) once you re done withthis tutorial, of course.

Browser designations aren t limited to selecting masterpages. Individual controls in ASP.NET are browser-aware, as well. Consider thisLabel control:

As you can see, you can define control values for specificbrowsers. Check Microsoft s Web site for more details on which controls arebrowser-aware. (WARNING: Do not develop this on a production server until you resure it works! Constantly recompiling the browser cache file may cause IIS torecycle or restart, which is a bad thing in production!)

Step 1: Build Your Optimized Master Pages

Obviously you want content to test. In my case, it was myentire Hacking the PSP Web site, which is for my book, Hacking the PSP (go figure). In Figure 2 you can see where I vebuilt a master page for regular browsers and a master page for PSPs.

Figure 2: A master page for regularbrowsers and a master page for PSPs (circled in red).

Recall that master pages are meant to separate contentfrom page templates, so you can re-use your content by plugging it into contentplaceholders in master pages, which are basically template files. This way,you can use that same content on regular browsers and the PSP by keeping thesame placeholder names in your content files, and they ll automaticallypopulate in the appropriate places in the templates. There are some great booksfrom Wrox, O Reilly, and others on how all this works, plus tons of online helpfrom Microsoft and third-parties. If you haven t tried ASP.NET 2.0 s master pagescapability yet, try it now you ll love it!

NOTE: When you build master page files, make sure theContent Placeholder controls have matching names across master pages that willbe used to service different browsers. The mapping of which content goes whereis contingent upon knowing where placeholders are; if a placeholder can t befound, an error may be thrown.

Figure 3 shows the master page for regular browsers;Figure 4 shows the PSP version. Because the PSP has limited screen real estate,I needed to limit the navigation to only include items that would be ofinterest to PSP Web surfers (and not require a lot of scrolling). This meanteliminating my AdRotator control, Google AdSense ads, the Buy the Book link, andother items. I also had to use a slightly different version of my CSS file toaccommodate the PSP s unique characteristics. Note that on the PSP master pageI call out the fact that it is PSP-optimized, both to inform the reader thereis a full version of the site available and to show off a little bit.

<%@ Master Language="VB"CodeFile="HackingPSP_RegularBrowsers.master.vb"Inherits="HackingPSP_RegularBrowsers" %>...removed for brevity...   ...removed for brevity...  
Copyright (c) 2005-2006 Auri Rahimzadeh.

...removed for brevity...Figure 3: Theregular browser master page file. <%@ Master Language="VB"CodeFile="HackingPSP_PSPOptimized.master.vb"Inherits="HackingPSP_PSPOptimized" %>... removed for brevity ... ...removed for brevity...HACKING THE PSP - OFFICIAL WEB SITE blogforumspsp linkshomebrew centralthe bookcontact...removed for brevity......removed for brevity... 

Figure 4: ThePSP-optimized master page file.

Figure 5 shows the Web form for my home page, which hasthe content for use on both the regular browser s master page and the PSPmaster page (separated by panels). The PSP version of my home page s contentdoesn t need to include the Flash component, and I may want separate contentfor PSP users, hence the two panels.

<%@ Page Language="VB"MasterPageFile="~/HackingPSP_RegularBrowsers.master"SonyPSP:MasterPageFile="~/HackingPSP_PSPOptimized.master"AutoEventWireup="false" CodeFile="Home.aspx.vb"Inherits="Home"Title="Hacking the PSP by Auri Rahimzadeh - Home Page" %>...removed for brevity...