MVC Now Stands for Mobile Views Conquered

Say hello to my little friend. Always wanted to say that. But seriously, say hello to jQuery Mobile. It’s pretty obvious what its all about so I’ll get straight to it. Here’s a little look at how pages of ASP.Net MVC applications can be hosted to work with mobile devices et with amazing interfaces.

Link ’em.

We’ll need to link the resources either from the CDN that’s mentioned on jQMobile’s download page. Or you can… download them. As I have.

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.mobile-1.0a4.1.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jqmobile/jquery.mobile-1.0a4.1.min.css")" rel="stylesheet" type="text/css" />

Give it structure.

I gave this MVC3 project’s _Layout.cshtml the following layout so that I can use it throughout my other views and modify those as required.

<div data-role="page">
   <div data-role="header">
       <h1>@ViewBag.Title</h1>
   </div>
   <div data-role="content">@RenderBody()</div>
   <div data-role="footer">
       <h4>Footer here</h4>
   </div>
</div>

Using the data-role attribute, we can specify different parts of the page as we like. And as you might guess RenderBody() will be the mode of transaction for all your data. Data transactions can also happen through the jQMobile framework itself (using JavaScript that is). As you might imagine, each page can have be strongly typed to a model.

From there on it’s just good old MVC with jQMobile doing all the neat work, preparing the application for mobile platforms.

Advertisements

2 Comments on “MVC Now Stands for Mobile Views Conquered”

  1. pretty interesting title :) jQMobile is real invention and will gonna change the way how mobile application gets build in future let’s see.

  2. […] my previous post about jQuery Mobile and ASP.Net MVC, I found myself using jQM in a project. Now, it would be a […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s