Creating separate views to target mobile devices in MS MVC

This is a small how-to on creating separate view files to target mobile phones in your MS MVC websites. By the end of the article, I will have shown how to create new directories within your view folders which target various mobile devices. The views make use of the same controller files to deliver content to specific devices.

The Mobile Device Browser File

First up, I am going to add the Mobile Device Browser file to my project:

Project Description
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.

To add the Mobile Device Browser File to your project, right click on your website project file in VS, and

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:

· Home

· Mobile

o iPhone

§ Index.aspx

o BlackBerry

§ Index.aspx

o Index.aspx

· Index.aspx

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

Inherits WebFormViewEngine

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)

End If

' Blackberry Detection

If request.UserAgent.IndexOf("BlackBerry", StringComparison.OrdinalIgnoreCase) > 0 Then

result = MyBase.FindView(controllerContext, "Mobile/BlackBerry/" & viewName, masterName, useCache)

End If

' Default Mobile

If request.Browser.IsMobileDevice Then

result = MyBase.FindView(controllerContext, "Mobile/" & viewName, masterName, useCache)

End If

' Desktop

If result Is Nothing OrElse result.View Is Nothing Then

result = MyBase.FindView(controllerContext, viewName, masterName, useCache)

End If

Return result

End Function

End Class

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

System.Web.Mvc.ViewEngines.Engines.Clear()

System.Web.Mvc.ViewEngines.Engines.Add(New CustomViewEngine())

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!