Redirecting to a Mobile Area in ASP.NET MVC
05 Jul 2010

asp.net c# mobile mvc


I have found that the best way to serve both standard web and mobile content within an ASP.NET MVC project is to create a separate "Mobile" MVC area for the mobile content. This can be done by right clicking on the project within the Visual Studio Solution Explorer and selecting Add -> Area. This means the site's mobile content is accessible by appending /Mobile to the default URL and allows for both the main website and the mobile website to share resources such as images and library classes.

Visual Studio Solution Explorer

Visual Studio Solution Explorer

All that remains is to redirect any requests to the default MVC area made by mobile devices to the new "Mobile" area. This can be achieved by creating a new Authorization Attribute that handles these steps and can be applied to any controller classes or actions that have corresponding mobile content.

The detection of the user's browser type is encapsulated in a method "IsMobile". The method simply inspects the current controller's Request.UserAgent property for common mobile browser signatures.

If a mobile browser is detected the user is redirected to the mobile area. Instead of just redirecting to the default page of the mobile area I have tried to be clever by maintaining the URL parameters originally specified by the user when redirecting. This means that, for example, if the user is trying to access content at the URL /Home/News?item=1 they will be redirected to /Mobile/Home/News?item=1.

All controller classes and actions marked with the new attribute "MobileRedirectAttribute" will now execute the mobile detection and redirect code each time they are accessed.

An example Visual Studio 2010 solution demonstrating the above code can be downloaded here.