How to Blend jQuery Mobile and .Net MVC

I’ve got an inkling that jQuery and .Net MVC together can produce some very powerful mobile web experiences.  So I’m setting up a Greenfield project at SwappedBooks.com.  The intent of the project is to build a site capable of running across multiple mobile devices and delivering a true e-commerce experience to users.

Here, I’ll be walking through the entire process for those developers interested in the “How” of what I’m doing.

First up a brief summary of the technologies I’ve employed:

  • .Net 4.0
  • Microsoft MVC 3.0
  • C#
  • jQuery 1.8.2
  • jQuery Mobile 1.1.1

Everything is Hosted with GoDaddy.com running on IIS with a SQL Server back end.  I’m developing in Visual Studio 2010.

 The Setup

Create a new Project

Create a Blank Solution

Add a new MVC 3 Project

New MVC 3 Project

Update Library Versions

At this point the versions of jQuery, EntityFramework installed with the template are out of date.  You’ll need to use the Package Manager console to remove the outdated versions and install the most current versions.

Un-Install Packages

Run these commands to uninstall the out dated versions:
uninstall-package jquery.ui.combined
uninstall-package jquery.validation
uninstall-package jquery.vsdoc
uninstall-package jquery
uninstall-package EntityFramework

Install New Packages

Run these commands to install the newest versions of the packages
install-package jquery
install-package jquery.mobile
install-package jquery.ui.combined
install-package jquery.validation
install-package jquery.vsdoc
install-package entityframework
install-package ninject

Setup Complete

There you go!  The project is now all set to begin work.  The next article in this series will demonstrate how to modify the shared views to present the site correctly on mobile devices.

[simple_series title=”Building a Mobile Site with jQuery and .Net MVC”]

Disclosure of Material Connection:

Some of the links in the post above are “affiliate links.”  This means if you click on the link and purchase the item, I will receive an affiliate commission.  Regardless, I only recommend products or services I use personally and believe will add value to my readers.  I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Leave a Reply