June 7, 2010 in ASP.Net by Alan Holmes

Browser Detection using ASP.Net

No Ratings Yet

 Loading ...

This tutorial will look at using ASP.Net’s HttpBrowserCapabilities to detect the browser name and version.

Tags: ASP.Net, Browser Detection, HttpBrowserCapabilities, Server-Side

About the Author: Alan Holmes

Hi I'm Alan Holmes, the owner of AHdevelopment. I have been doing web development for many years, and I created this site so that I can finally start archiving my development solutions in one central place, as well as making them available for others to find.

Alan Holmes has written 8 article(s).

The Idea

There are numerous scripts out there for detecting the browser via JavaScript, however, what about when you want to know the browser in your server-side code? You may ask why? The reasons are many, including page stats, browser based dynamic content, etc.

My personal reason for looking into this, is displaying an unsupported browser message (such as YouTube does for older browsers), within a website Content Management System (CMS), so that you can ensure users are using a browser that will allow them to use the full functionality of the CMS. Again, this could be done by JavaScript, but I required a server-side solution.

The Solution

In this tutorial, we will be creating a demo that will display message to users telling them if there browser is supported, and if it is not, then it will display a list of browsers that are, you can view a demo here.

In this example, only Firefox 3+ and IE8+ will be accepted as supported browsers (just to make it possible to see the result for unsupported browsers in Google Chrome, Safari and Opera), but it can be easily changed to allow other browsers.

The Code

For this tutorial we will be using ASP.Net’s HttpBrowserCapabilities facility to get the browser details. Let me start out by saying, I know that this has some limits, one being that it cannot differentiate Google Chrome from Safari, but it does my needs which is why I am using it.

Firstly, lest set the variables that we will be using to store the Browser details

Dim httpRequest As HttpBrowserCapabilities = Request.Browser 'Gets the browser details

Dim strBrowserName as string = "" 'Browser Name
Dim strBrowserVersion as string = httpRequest.Version 'Version Number
Dim intMajorVersion as integer = httpRequest.MajorVersion 'Major Version Number
Dim boolSupportedBrowser as boolean = false 'Is this a supported browser

Next, I wanted to have some better names, than provided by httpRequest.Browser, so I used a select case statement to get these names. In this process we will also be setting the value for boolSupportedBrowser.

'Set the name, and whether the browser is supported
Select Case lcase(httpRequest.Browser)

	Case "ie"
		strBrowserName = "Internet Explorer"
		if intMajorVersion >= 8 then
			boolSupportedBrowser = true
		end if 'if intMajorVersion >= 8 then

	Case "firefox", "mozilla"
		strBrowserName = "Mozilla Firefox"
		if intMajorVersion >= 3 then
			boolSupportedBrowser = true
		end if 'if intMajorVersion >= 3 then

	Case "applemac-safari"
		strBrowserName = "Safari/Google Chrome"
		boolSupportedBrowser = false

	Case "opera"
		strBrowserName = "Opera"
		boolSupportedBrowser = false

	Case Else
	   strBrowserName = "Unknown Browser"
	   boolSupportedBrowser = false

End Select 'Select Case lcase(httpRequest.Browser)

You will notice that under IE and Firefox, we only set boolSupportedBrowser to true if the Major version matches the criteria.

The Message

Now that we have all the settings that we need, we can display the message. By using the ASP.Net code tags <% %> we can include the variables set above, to include the browser name, and what content to display.

<div id="BrowserSupport"<% if not boolSupportedBrowser then %>class="Unsupported"<% end if %>>
	<div class="Message">
	<% if boolSupportedBrowser then %>
		<strong>Congratulations</strong> your browser, <em><%=strBrowserName & " " & strBrowserVersion%></em>, is supported
	<% else 'if boolSupportedBrowser then %>
		<strong><%=strBrowserName & " " & strBrowserVersion%></strong> is not a supported browser

		<br />Please upgrade to one of the following:
	<% end if 'if boolSupportedBrowser then %>
	</div>
	<% if not boolSupportedBrowser then %>
	<div class="Supported">
		<div class="Browser IE"><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_blank" title="Get Internet Explorer 8">Internet Explorer 8</a></div>

		<div class="Browser Firefox"><a href="http://www.mozilla.com" target="_blank" title="Get Mozilla Firefox">Mozilla Firefox</a></div>
		<div class="clear"></div>
	</div>
	<% end if 'if not boolSupportedBrowser then %>
</div>

Finally

And finally, the CSS used for this demo.

#BrowserSupport{
	background: #D2FFD3;
	border:1px solid #00CC00;
	color:#00CC00;
	font:10pt Arial, Helvetica, sans-serif;
	padding:10px;
	text-align:center;
	width:505px;
}

#BrowserSupport.Unsupported{
	background: #FFDFDF;
	border-color: #FF0000;
	color:#FF0000;
}

.Supported{
	padding-top:10px;
}

.Supported .Browser{
	float:left;
	margin-left:5px;
}

.Supported .Browser.IE{
	margin-left:0px;
}

.Supported .Browser a{
	background:#FFFFFF;
	border:1px solid #999999;
	color:#000000;
	display:block;
	font-size:7pt;
	font-weight:bold;
	height:15px;
	padding-top:80px;
	text-decoration:none;
	width:95px;
}

.Supported .Browser.IE a{
	background:#FFFFFF url(../images/IE.png) top center no-repeat;
}

.Supported .Browser.Firefox a{
	background:#FFFFFF url(../images/Firefox.png) top center no-repeat;
}

#BrowserSupport, .Supported .Browser a{
	-moz-border-radius :6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
}

.clear{
	clear:both;
	font-size:0px;
	height:0px;
	overflow:hidden;
}

Your messages should look something Like (if you are viewing in IE or Opera, then you will not have curved borders, as they do not support the border-radius css):

Message for a supported browser.

Message for a unsupported browser.

Compatibility, Conclusion and Download

This script has been tested in IE7, Firefox 3.5.3, Google Chrome 4.1.2, Safari 4.0.5 and Opera 10.53, all on a windows platform. This technique will allow you to do a number of things, either to display a message for unsupported browser, as in this demo, or to show different content based on browser.

The only drawback at present, is that Google Chrome is not recognised as a separate browser, it is recognised as Safari.

Also, please be aware that httpRequest.Version and httpRequest.MajorVersion may not return the value you expect. For example, I use Opera 10.53, but it returns 9.80 as the version number.

Any feedback or improvements are welcome.