The Mobile Device Browser File
First up, I am going to add the Mobile Device Browser file to my project:
The Mobile Browser Definition File contains definitions for individual mobile devices and browsers. At run time, ASP.NET uses the information in the request header to determine what type of device/browser has made the request.
This open source file takes care of doing the work of figuring out what kind of device is accessing the website. It allows you to target many different mobile devices, and takes out a lot of the hard work of for targeting specific devices.
Add > Add ASP.NET Folder > App_Browsers
Create another folder insider App_Browsers called devices
Drop the mobile.browser file from the Mobile Device Browser File Download in the newly created devices directory.
Using this file I can target the devices I want to support without having to know the specifics of what those devices send in their headers. I can just use the Request.Browser property to tailor which view I want to return.
Now I am going to put together the directory structure I will be using to target different devices. I have decided to use the following directory structure within my views section:
Basically, a standard request from a desktop computer will be served up the Home > index.aspx file. A request from an iPhone will be served up Home > Mobile > iPhone > Index.aspx.
A mobile device which does not have a specific directory in the mobile directory will be served the Home > Mobile > index.aspx view.
The Custom View Engine
Next up we are going to create a Custom View Engine, to override the standard MVC view Engine.
Our custom view engine will take care of routing request from mobile devices to the correct views.
Public Class CustomViewEngine
Public Overloads Overrides Function FindView(ByVal controllerContext As ControllerContext, ByVal viewName As String, ByVal masterName As String, ByVal useCache As Boolean) As ViewEngineResult
' Logic for finding views in your project using your strategy for organizing your views under the Views folder.
Dim result As ViewEngineResult = Nothing
Dim request = controllerContext.HttpContext.Request
' iPhone Detection
If request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0 Then
result = MyBase.FindView(controllerContext, "Mobile/iPhone/" & viewName, masterName, useCache)
' Blackberry Detection
If request.UserAgent.IndexOf("BlackBerry", StringComparison.OrdinalIgnoreCase) > 0 Then
result = MyBase.FindView(controllerContext, "Mobile/BlackBerry/" & viewName, masterName, useCache)
' Default Mobile
If request.Browser.IsMobileDevice Then
result = MyBase.FindView(controllerContext, "Mobile/" & viewName, masterName, useCache)
If result Is Nothing OrElse result.View Is Nothing Then
result = MyBase.FindView(controllerContext, viewName, masterName, useCache)
Applying the Custom ViewEngine
Now that I have my Mobile View folders and mobile views created, and have implemented a Custom ViewEngine, I can go ahead and apply the custom view engine.
To do this we’ll need to clear any existing ViewEngines and add a new instance of the ‘CustomViewEngine”. This needs to be done within the Application_Start method in the Global.asax.
' Replace the Default WebFormViewEngine with CustomViewEngine
And we're done!
And we're done!
That's everything you need to do... Hit the site with your mobile phone, and IIS will serve up your customised mobile views. Got to love the MS MVC Framework!
This post was inspired by a stackoverflow answer given by Dale Ragan. Cheers Dale!