Sample Mobile Web Site design using ASP.NET MVC4 Mobile Framework

ASP.NET MVC4 Mobile Framework

How to work with mobile features in an ASP.NET MVC 4 developer preview Web application. For this tutorial, you can use Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer"), which is a free version of Microsoft Visual Studio. Or you can use Visual Studio 2010 SP1 if you already have that.

Before you start, make sure you've installed the prerequisites listed below. 

·         Visual Studio Web Developer Express SP1 prerequisites

·         ASP.NET MVC 4 Developer Preview

 

You will also need a mobile browser emulator. Any of the following will work:

·         Windows 7 Phone Emulator. (This is the emulator that's used in most of the screen shots in this tutorial.)

·         Opera Mobile Emulator

·         Apple Safari with the user agent set to iPhone. For instructions on how to set the user agent in Safari to "iPhone", see How to let Safari pretend it's IE on David Alison's blog.

·         FireFox with the FireFox User Agent Switcher.

In this post, I will show you three new functionalists brought by MVC4 for mobile websites.

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.

Mobile Application Template - MVC4

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.

Install Windows 7 Emulator/Simulator and open the site as http://localhost:8987.

Top Links

What's New in ASP.NET MVC 4

·         ASP.NET Web API

·         ASP.NET Single Page Application

·         Tutorial: ASP.NET MVC 4 Mobile Features

·         Release Notes for ASP.NET MVC 4

·         New ASP.NET MVC 4 tutorial series

·         ASP.NET MVC 4 Roadmap

Installation

·         ASP.NET MVC 4 Beta for Visual Studio 2010:

·         ASP.NET MVC 4 Web Platform Installer for Visual Studio 2010

·         Download the standalone ASP.NET MVC 4 Beta installer executable

·         Visual Studio 11 Beta (includes ASP.NET MVC 4 Beta):

·         Visual Studio 11 Ultimate Beta

·         Visual Studio 11 Express Beta