March 26, 2012 07:51 by
Scott
In this post, I will show you three new functionalities brought by MVC4 for mobile websites.
- The mobile Application Template
- The View Switcher
- The Display mode by Browser type
Smartphone and tablet are able to read websites not optimized for tiny screen but if a user can jump automatically on an optimized version of the website, it’s better for everyone!
One interesting feature of this new version of the ASP.NET MVC framework 4 is the new Mobile Application template. With this template you’ll be able to develop quickly a website especially for mobile and tablet.
1 – Create a full-mobile Website
In Visual Studio, Create a new MVC4 project and select the “Mobile Application” template.
I consider that you’ve already develop a classic MVC application. If true, you will not be surprised by the generated project. It’s almost the same as a classic MVC desktop website.
So what the difference?
In the “content” folder you will find another JavaScript library: jQuery Mobile. ASP.NET MVC4 Mobile Template is based on the famous JavaScript framework for mobile application. You can learn a lot if you visit the jQuery mobile website.
Models and Controller are similar to a classic MVC Application.
In the view, you just have to add some tag to tell how jQuery mobile needs to display the page.
If we take a look at this code (Menu of the website generated by MVC4), you will probably recognize the Razor syntax. Nothing change when you want to develop Mobile Application with MVC4. You just have to use special attribute in your HTML.
Here, we declare a classic HTML list….and jQuery Mobile will transform it into an accessible list for mobile devices user.
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>