Introducing Mobile Site in MVC 5 and jQuery Mobile

Introduction

As you know there are various types of emulators available for viewing applications. We can use the iPhone and Windows Phone simulators for browsing the application. You can open the website on a phone that is so much more satisfying than a Desktop.

In that context, when you create the MVC 4 application you can use a Mobile template to design the application. Here, I am using Visual Studio 2013 and a MVC 5 project template to design the application. We'll use the jQuery Mobile application for displaying it in the phones and tablets.

Let's create an application on Visual Studio using MVC 5 Project template and perform some CRUD operations and add jQuery Mobile and ViewSwitcher. I am using the iPhone simulator to browse the application.

Creating CRUD Operations

Step 1: Add a model class named Cricketer and add the following code:

In the code above, we've created an Enum property and we'll add the Enum support to the View in this article later.

Step 2: Scaffold a New Controller

Step 3: Unfortunately scaffolding does not do the Enums in the Create.cshtml and Edit.cshtml pages. You can see in the following screenshot:

Step 4: So we need to update it using the following highlighted code: