Preparing for ASP.NET MVC 4 Mobile Development

ASP.NET MVC 4 will include a neat little feature allowing you to create mobile views very easily. All you will have to do to mobile-enable a view is add ‘mobile’ to its name and then customize it for mobiles. How you customize it is up to you – but the built in Visual Studio MVC 4 templating will be using jQuery mobile (hurray!).

If you have a file called “index.cshtml”, you would copy it and create the new file “index.mobile.cshtml”. If you have “index.aspx” then you would create “index.mobile.aspx”. These then sit side-by-side with your standard views. Internally, ASP.NET MVC will detect that a mobile device is being used and direct the request to the appropriate view.

Sounds good, doesn’t it?

Wouldn’t it be nice if you could get a head start on developing your apps this way using the ASP.NET MVC3? Well, thanks to Scott Hanselman, you can. He’s created a NuGet that works the same way, and made it available for you to download and integrate into your projects. It includes both C# and VB code,

vb and csharp files

so after you’ve installed it, you need to go in and remove whichever you’re not using:

Csharp files

But once you’re done that, you have a mechanism for developing mobile apps in a forwards-compatible way. In the example below, I created a separate mobile master using jQuery mobile, which I then tied into the mobile version of the page using the Layout property:

code sample

Then I ran the application in Internet Explorer, and also in Firefox using the User Agent Switcher add on. The application automatically delivered the appropriate views:

Here is IE acting as a normal browser:

Web site

And here is Firefox pretending to be iPhone 3:

mobile web site

All in all, a useful little NuGet which sets you up for developing mobile apps in ASP.NET MVC 4.

Kevin Rattan

For other related information, check out these courses from Learning Tree:

Building Web Applications with ASP.NET MVC

jQuery: A Comprehensive Hands-On Introduction

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.