Last year I wrote an article that expressed the importance of developing not only desktop solutions but mobile ones as well. Since then it has become increasingly important to present not only to a desktop market, but to a mobile one as well.
That said, this article isn’t about convincing you to move to a desktop-mobile solution. The metrics in my previous article speak for themselves and have only gotten stronger in favor of mobile solutions as time has gone on. This article is going to center on how you can easily achieve a mobile solution by leveraging your existing MVC 4 website and making a few configuration changes to automatically render mobile views when a mobile device is detected.
NOTE: If you have a MVC 3 solution you can convert it to a MVC 4 solution by following the steps outlined in the following page: Upgrading an ASP.NET MVC 3 Project to ASP.NET MVC 4
NOTE: The MVC 4 project template does include a Mobile solution template as well as a standard project template. For the purposes of this article we are going to use the standard project template and make some quick configuration changes to have a single solution instead of having multiple URLs to signify a mobile site or worse, multiple solutions.
To begin, I have a standard MVC 4 solution with a single controller, model and view.
The index action merely loads some data to the model and returns it to the view, which displays as follows.
Pretty standard. Now, what we can do is using NuGet we can install the mobile view engine inside this standard solution and instantly enhance our solution to include mobile views. NOTE: This article assumes a knowledge of the NuGet package manager; visit the Microsoft informational page to learn about and install NuGet for Visual Studio
Right-click on the solution and select Manage NuGet Packages. From here you can search for jQuery.Mobile.MVC and the installer for the package should appear in your search results. Install it.
Here you’ll notice a few things have happened to your solution. First, in your scripts folder you now have the jQuery mobile library at your disposal. Second, you have added a controller called ViewSwitcherController.cs which will handle requests to switch between a mobile and desktop view. Finally, you now have a _Layout.Mobile.cshtml file as well as a ViewSwitcher.cshtml file which you can implement on any page and navigate to the corresponding desktop view.
Before you start up your application and view your site on your favorite mobile emulator you have to make a configuration change in your Global.asax file. Find the line that reads:
BundleConfig.RegisterBundles(BundleTable.Bundles);
and include the following line:
BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
Now fire up your application and you can witness the fruits of your labor. We go from the image listed above, which would have been crushed down into a barley readable view like we’ve seen so many times before, to the mobile friendly view below.
You now have the flexibility to use your _Layout.Mobile.cshtml file and configure your site layout how you see fit on a mobile device.
This isn’t the end however. Even with the ability to layout your site in a mobile friendly view, most desktop sites don’t translate well to mobile. In many cases you require a completely different View. Luckily, the MVC4 framework allows us create a view of the same name as the desktop View and append a “.Mobile” to it. This tells the view engine that if the requesting device has a mobile user agent to use this view instead.
In this case I created an Index.Mobile.cshtml view and decorated it with the jQuery mobile library. Now we have a true mobile site without creating a special controller action and copying code to load the same data being rendered on the desktop version of the page.
So as you can see, with a minimal amount of effort and little to no code duplication, you can take your already robust desktop solution and create a rich mobile solution that ranks up there with the best of them.
Cheers,
Karl
