What's New in ASP.NET MVC 4

Version: 1.2.0

Description

ASP.NET MVC 4 puts its focus on making it easier to develop mobile web applications. In this hands-on lab, you will start with the MVC 4 Internet Application project template and create a Photo Gallery application. You will progressively enhance the application using jQuery Mobile together with MVC 4 new features, to make it work great across different mobile devices and desktop web browsers. You will also learn about new code recipes for code generation and how MVC 4 makes it easier to write asynchronous action methods by supporting ActionResult return types.

Overview

ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of the ASP.NET and the .NET framework. This new, fourth version of the framework focuses on making mobile web application development easier.

To begin with, when you create a new MVC 4 project there is now a mobile application project template you can use to build a standalone app specifically for mobile devices. Additionally, MVC 4 integrates with jQuery Mobile through a jQuery.Mobile.MVC NuGet package. jQuery Mobile is an HTML5-based framework for developing web apps that are compatible with all popular mobile device platforms, including Windows Phone, iPhone, Android and so on. However, if you need specialization, MVC 4 also enables you to serve different views for different devices and provide device-specific optimizations.

In this hands-on lab, you will start with the MVC 4 “Internet Application” project template to create a Photo Gallery application. You will progressively enhance the app using jQuery Mobile and MVC 4’s new features to make it compatible with different mobile devices and desktop web browsers. You will also learn about new code recipes for code generation and how MVC 4 makes it easier for you to write asynchronous action methods by supporting Task<ActionResult> return types.

Objectives

In this hands-on lab, you will learn how to:

  • Take advantage of the enhancements to the ASP.NET MVC project templates ― including the new mobile application project template
  • Use the HTML5 viewport attribute and CSS media queries to improve the display on mobile devices
  • Use jQuery Mobile for progressive enhancements and for building touch-optimized web UI
  • Create mobile-specific views
  • Use the view-switcher component to toggle between mobile and desktop views in the application
  • Create asynchronous controllers using task support

Prerequisites

Note:
By the time this lab was released, the required phone emulators were unsupported on Windows 8 Consumer Preview.

Setup

Throughout the lab document, you will be instructed to insert code blocks. For your convenience, most of that code is provided as Visual Studio Code Snippets, which you can use from within Visual Studio to avoid having to add it manually.

To install the code snippets:

  1. Open a Windows Explorer window and browse to the lab’s Source\Setup folder.
  2. Double-click the Setup.cmd file in this folder to install the Visual Studio code snippets.

If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the appendix from this document “Appendix: Using Code Snippets”.

Exercises

This hands-on lab includes the following exercises:

  1. New MVC 4 Project Templates
  2. Creating the Photo Gallery Web Application
  3. Adding Support for Mobile Devices
  4. Using Asynchronous Controllers
Note:
Each exercise is accompanied by a starting solution—located in the Begin folder of the exercise—that allows you to follow each exercise independently of the others. Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and that they will not necessarily work until you complete the exercise.

Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the resulting code from completing the steps in the corresponding exercise. You can use these solutions as guidance if you need additional help as you work through this hands-on lab.