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,
so after you’ve installed it, you need to go in and remove whichever you’re not using:
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:
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:
And here is Firefox pretending to be iPhone 3:
All in all, a useful little NuGet which sets you up for developing mobile apps in ASP.NET MVC 4.
For other related information, check out these courses from Learning Tree: