Today, developing a mobile application is easy, but running it on multiple mobile devices with adaptive UI is a bit challenging. But jQuery mobile framework has made life easy for us to develop a single web site or application that can work on all popular Smartphones, Tablets and Desktop platforms.
In this introductory tutorial, I will give you an overview on how to use jQuery mobile with MVC 4 to build a modular mobile application that looks and feels very similar to a native app running on a device. You will find it useful as a starting point for a list-type application using jQuery Mobile.
To start with mobile application development using MVC 4 and jQuery mobile, first we create new MVC 4 web application project in Visual Studio 2012 as below –
Select ‘Mobile Application’ as a project template
This will build a sample mobile application using a default template. Here I have updated Home and created a new List View for illustration purpose.
I have shown navigation links on home page using list view. You can see some snap shots below for complete html
To display list of hotels, use ‘listview’ again.
Once you are done with your views, run the application and you will see the highly branded web application that looks like a native application.
Benefits of mobile application using jQuery mobile framework and MVC 4
- HTML5 and CSS3 based user interface with minimal scripting
- Lightweight code
- Theme based design
- Easy to use
- No expertise required, if you know HTML, you can start building mobile applications right away
This is a very basic and simple application. To build a more real application, you can learn more on jQuery mobile -
http://view.jquerymobile.com/1.3.2/dist/demos/
http://www.w3schools.com/jquerymobile/
Thank you for taking out time to read this tutorial!
