Anexinet Applications: How to create a custom, mobile version of your MVC website

Step 1 – Get a mobile emulator

Before you can start building a custom, mobile version of your MVC website you need a testing tool that emulates exactly how your website will look and behave on different mobile devices – iPhone 5, Samsung Galaxy, Kindle Fire, etc. Here’s a mobile browser emulator I like and it’s FREE:

Keystone Systems MITE (Mobile Internet Testing Environment) - http://mite.keynote.com/

Step 2 – Get jQuery mobile

jQuery Mobile is a library that adds an elegant mobile UI framework to your MVC project. jQuery Mobile allows all mobile browsers to display the basic content of a web page, while allowing more powerful browsers and devices to have a richer display. This ability is known as progressive enhancement.

Step 2a – Open your MVC 4 project in Visual Studio 2012

Step 2b – In the Package Manager Console, enter Install-Package jQuery.Mobile.MVC

Step 3b – Add the following line as the last line in the Application_Start method in Global.asax.cs:

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

Step 3 – Identify which views have a bad mobile experience

To identify which issues exist with your MVC website, open MITE, click “browse website” and select a mobile device. Browse each MVC view, try different devices, and make a list of issues.

Here are some common issues with displaying MVC views on mobile devices:

-- Menus or result sets that are too wide

-- Too much content on a mobile view

Here’s an existing MVC view with a wide result set. This view looks fine on a desktop browser, but not on a mobile browser. We will show how to improve this view in the next section.

Step 4 – Enhance your views to create a great mobile experience

MVC 4 provides an easy way to add mobile specific views to your project – just create a copy of an existing MVC view and add the extension “.Mobile.cshtml”. For example, if you have an existing view called “Student.cshtml”, copy Student.cshtml to a new file called “Student.Mobile.cshtml”.

jQuery Mobile provides a set of mobile-friendly UI widgets. These widgets can be used to create custom views with an improved UI for mobile browsers.

Here’s an example of the jQuery Mobile listview widget “data-role="listview"”:

<li>@Html.ActionLink("Students", "Index", "Student")</li>

<li>@Html.ActionLink("Courses", "Index", "Course")</li>

<li>@Html.ActionLink("Instructors", "Index", "Instructor")</li>

<li>@Html.ActionLink("Departments", "Index", "Department")</li>

<li>@Html.ActionLink("Activities", "Index", "Student")</li>

<li>@Html.ActionLink("Campus", "Index", "Student")</li>

<li>@Html.ActionLink("Cafeteria", "Index", "Student")</li>

<li>@Html.ActionLink("Library", "Index", "Student")</li>

</ul>

Use MITE to display the updated mobile view:

We can also use the listview widget to solve the wide result set issue:

@foreach(var student in Model) {

<li>

<h3>@student.Name</h3>

<p>@string.Join(", ", student.Grade), @student.Major</p>

<p>DOB: @student.Birthdate.ToShortDateString()</p>

</a>

</li>

}

</ul>

Here’s the updated view, “Student.Mobile.cshtml”:

Conclusion

If you’re already familiar with creating ASP.NET MVC websites it’s not too difficult to create a custom, mobile version of your MVC website using MVC 4 and jQuery Mobile. I hope this article helps get you started. If you have additional suggestions or recommendations for creating a great mobile experience please leave a comment.