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

In this exercise, you will learn how to create an ASP.NET MVC application in Visual Studio 2010 as well as its main folder organization. Additionally, you’ll learn how to add a new Controller and have it display a simple string at the Application screen.

Task 1 – Creating the ASP.NET MVC Web Application Project

In this task, you will create an empty ASP.NET MVC application project using the MVC Visual Studio template.

1. Start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
2. On the File menu, click New Project.
3. In the New Project dialog box select the ASP.NET MVC 3 Web Application project type, located under Visual [C#|Basic],Web template list.
4. Change the Name to MvcMusicStore.

5. Set the location of the solution inside a new Begin folder in this Exercise’s installation folder, for example C:\WebCampsTrainingKit\Labs\Beginner-ASP.NET-MVC-Fundamentals MVC3\Source\Ex01-CreatingMusicStoreProject\Begin. Click OK.

   Figure 11

   Create New Project Dialog Box - C#

   Figure 12

   Create New Project Dialog Box - VB

6. In the New ASP.NET MVC 3 Project dialog box select the Empty template and make sure that the View engine selected is ASPX. Click OK.

   Figure 13

   New ASP.NET MVC 3 Project Dialog Box - C#

   Figure 14

   New ASP.NET MVC 3 Project Dialog Box - VB

Task 2 – Exploring the Solution Structure

The ASP.NET MVC framework includes a Visual Studio project template that helps you create Web applications that are structured to support the MVC pattern. This template creates a new MVC Web application that is configured to have the required folders, item templates, and configuration-file entries.

In this task, you will examine the solution structure to understand the involved elements and its relationships. The following folders are included even in an Empty ASP.NET MVC application because the ASP.NET MVC framework by default uses a “convention over configuration” approach and makes some default assumptions based on folder naming conventions.

1. Once the project is created, review the folder structure that has been created in the Solution Explorer on the right side:

   Figure 15

   ASP.NET MVC Folder structure in Solution Explorer

   1. Content. This folder is the recommended location to add content files such as cascading style sheet files, images, and so on. In general, the Content folder is used for static files.

   2. Controllers. This folder will contain the controller classes. In an MVC based application, controllers are responsible for handling end user interaction, manipulating the model, and ultimately choosing a view to render to display UI.

      Note:

      The MVC framework requires the names of all controllers to end with "Controller"—for example, HomeController, LoginController, or ProductController.

   3. Models. This folder is provided for classes that represent the application model for the MVC Web application. This usually includes code that defines objects and the logic for interacting with the data store. Typically, the actual model objects will be in separate class libraries. However, when you create a new application, you might include classes and then move them into separate class libraries at a later point in the development cycle.
   4. Scripts. This is the recommended folder to store JavaScript files in your application.
   5. Views. This folder is the recommended location for views, the components responsible for displaying the application's user interface. Views use .aspx, .ascx, .cshtml and .master files, in addition to any other files that are related to rendering views. Views folder contains a folder for each controller; the folder is named with the controller-name prefix. For example, if you have a controller named HomeController, the Views folder will contain a folder named Home. By default, when the ASP.NET MVC framework loads a view, it looks for an .aspx file with the requested view name in the Views\controllerName folder (Views\[ControllerName]\[Action].aspx) or (Views\[ControllerName]\[Action].cshtml) for Razor Views.

   6. Views\Shared. By default, there is also a folder named Shared in the Views folder, which does not correspond to any controller. The Shared folder is used for views that are shared across multiple controllers. For example, you can put the Web application's master page in the Shared folder.

      Note:

      In addition to the folders listed previously, an MVC Web application uses the Global.asax file to set global URL routing defaults, and it uses the Web.config file to configure the application.

Task 3 – Adding a HomeController

In ASP.NET applications that do not use the MVC framework, user interaction is organized around pages, and around raising and handling events from those pages. In contrast, user interaction with ASP.NET MVC applications is organized around controllers and their action methods.

On the other hand, ASP.NET MVC framework maps URLs to classes that are referred to as controllers. Controllers process incoming requests, handle user input and interactions, execute appropriate application logic and determine the response to send back to the client (display HTML, download a file, redirect to a different URL, etc.). In the case of displaying HTML, a controller class typically calls a separate view component to generate the HTML markup for the request. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

In this task, you will add a Controller class that will handle URLs to the Home page of the Music Store site.

1. Right-click the Controllers folder within the Solution Explorer, select Add and then the Controller command:

   Figure 16

   Add a Controller Command

2. The Add Controller dialog appears. Name the controller HomeController and press Add.

   Figure 17

   Add Controller Dialog

3. The file HomeController.[cs|vb] is created in the Controllers folder. In order to have the HomeController return a string on its Index action, replace the Index method with the following code:

   (Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex1 HomeController Index – CSharp)

   C#

   public string Index() { return "Hello from Home"; }

   (Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex1 HomeController Index – VB)

   Visual Basic

   Public Function Index() As String Return "Hello from Home" End Function

   FakePre-bb55ff700ffd4488b9ceb26dec0b93b7-195bb5e3f0b94e6daa815b7b0a89a530
   

Task 4 – Running the Application

In this task, you will try out the Application in a web browser.

1. Press F5 to run the Application. The project gets compiled and the ASP.NET Web Server that is built-into Visual Web Developer starts. Visual Web Developer will automatically open a web browser pointing to the web-server URL. This will allow you to try out the web application.

   Figure 18

   Application running in a web browser

   Note:

   Note: ASP.NET Development Server will run the website on a random free port number. In the figure above, the site is running at https://localhost:49161/, so it’s using port 49161. Your port number may vary.

2. Close the browser.

Next Step

Exercise 2: Creating a Controller