ASP.NET MVC 3 Fundamentals

This Hands-On Lab is based on MVC (Model View Controller) Music Store, a tutorial application that introduces and explains step-by-step how to use ASP.NET MVC and Visual Web Developer 2010 Express (which is free). Throughout the lab you will learn the simplicity, yet power of using these technologies together. You will start with a simple application and will build it until you have a fully functional MVC Web Application.

Overview

This Hands-On Lab is based on MVC (Model View Controller) Music Store, a tutorial application that introduces and explains step-by-step how to use ASP.NET MVC and Visual Web Developer 2010 Express (which is free). Throughout the lab you will learn the simplicity, yet power of using these technologies together. You will start with a simple application and will build it until you have a fully functional MVC Web Application.

This Lab will work with ASP.NET MVC 3 and it uses new features as dynamic properties in views.

If you wish to explore the ASP.NET MVC 2 version of the tutorial application, you will find it in https://mvcmusicstore.codeplex.com/.

The Music Store application

The Music Store web application to be built throughout this Lab comprises three main parts: shopping, checkout, and administration. Visitors will be able to browse albums by genre, add albums to their cart, review their selection and finally proceed to checkout to login and complete the order. Additionally, store administrators will be able to manage the store’s available albums as well as their main properties.

MVC Essentials

Music Store application will be built using Model View Controller (MVC), an architectural pattern that separates an application into three main components:

• Models: Model objects are the parts of the application that implement the domain logic. Often, model objects also retrieve and store model state in a database.
• Views: Views are the components that display the application's user interface (UI). Typically, this UI is created from the model data. An example would be the edit view of Albums that displays text boxes and a drop-down list based on the current state of an Album object.
• Controllers: Controllers are the components that handle user interaction, manipulate the model, and ultimately select a view to render the UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

The MVC pattern helps you to create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. This separation helps you manage complexity when you build an application, because it enables you to focus on one aspect of the implementation at a time. In addition to managing complexity, the MVC pattern makes it easier to test applications than it is to test a traditional ASP.NET Web application, encouraging the use of test-driven development (TDD) for creating an applications.

Then, the ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating MVC-based Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web-forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication so you get all the power of the core .NET framework. This is useful if you are already familiar with ASP.NET Web Forms because all of the libraries that you already use are available to you in ASP.NET MVC as well.

In addition, the loose coupling between the three main components of an MVC application also promotes parallel development. For instance, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.

Objectives

In this Hands-On Lab, you will learn how to:

• Create an ASP.NET MVC application from scratch based on the Music Store Application tutorial
• Add Controllers to handle URLs to the Home page of the site and for browsing its main functionality
• Add a View to customize the content displayed along with its style
• Add Model classes to contain and manage data and domain logic
• Use View Model pattern to pass information from controller actions to the view templates

System Requirements

You must have the following items to complete this lab:

• ASP.NET and ASP.NET MVC 3
• Visual Studio 2010 Express

Setup

Installing Code Snippets

For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. To install the code snippets run .\Source\Assets\CodeSnippets.vsi file.

Installing Web Platform Installer

This section assumes that you don’t have some or all the system requirements installed. In case you do, you can simply skip this section.

Microsoft Web Platform Installer (WebPI) is a tool that manages the installation of the prerequisites for this Lab.

Please follow these steps to downloads and install Microsoft Visual Studio 2010 Express Edition and SQL Server 2008 Express Edition:

1. Install the Web Platform Installer 3.0. To do this, Navigate to https://go.microsoft.com/fwlink/?LinkID=194638 using a web browser. Click Run in the File Download Security Warning.

   Figure 2

   File download pop up

2. Allow the program to make changes to your computer by clicking Yes in the User Account Control pop up.

Running Web Platform Installer to install Lab prerequisites

1. The Web Platform Installer launches and shows a list of downloads.

2. Choose the Products category at the top side of the window, then click the All folder at the left, and then clik Add for the following items:

   • ASP.NET MVC 3
   • Visual Web Developer 2010 Express
   Figure 3

   Web Platform Installer window

3. Click on Install. The Web Platform Installer displays the list of software to be installed. Accept by clicking I Accept.

   Figure 4

   Web Platform Installation

4. The SQL Server Express Edition could be configured to run with Windows Integrated Authentication or Mixed Mode Authentication. To simplify this Lab, select Windows Integrated Authentication and click on Continue. SQL Server will then use your Windows credentials to connect to the databases.

   Figure 5

   Web Platform Installation – SQL Server Express Authentication mode

5. The appropriate components will be downloaded and installed.

   Figure 6

   Web Platform Installation – Download progress

6. If your computer doesn’t have the Microsoft.NET Framework 4.0, a pop up will ask you to restart the computer. Click Yes.

   Figure 7

   Web Platform Installation – Microsoft.NET Framework 4 installation

7. After rebooting your PC, restart the Web Platform Installer by selecting it from the Start menu | All Programs | MicrosoftWeb Platform Installer.

   Figure 8

   Starting Web Platform Installer

8. The Web Platform Installer will resume downloading and installing the products. When this process is finished, the Installer will show the list of all the software installed. Click Finish.

   Figure 9

   Web Platform Installer

   Note:

   If you get an error with SQL Server Express 2008 R2 installation like the following, please dismiss it. You will be able to work-around it in ASP.NET MVC 2.0 Models and Data Access Hands-on lab.

   Figure 10

   SQL Server Express 2008 R2 installation error

9. Finally the Web Platform Installer shows the installed products. Click Exit to finish the setup process.

Exercises

This Hands-On Lab is comprised by the following exercises:

1. Exercise 1: Creating MusicStore ASP.NET MVC Web Application Project
2. Exercise 2: Creating a Controller
3. Exercise 3: Passing parameters to a Controller
4. Exercise 4: Adding Ajax for Searching Activities
5. Exercise 5: Creating a View Model
6. Exercise 6: Using parameters in View

Estimated time to complete this lab: 45 minutes.

Next Step

Exercise 1: Creating MusicStore ASP.NET MVC Web Application Project