Walkthrough: Creating a Basic ASP.NET MVC Project
This walkthrough shows you how to create an ASP.NET MVC application in Visual Studio. In this walkthrough, you will create and run the sample MVC application. Then you will customize the application by adding a controller and a view.
In addition, this walkthrough shows how to use test-driven development (TDD). In the walkthrough, you create a project that contains unit tests for the MVC application.
A Visual Studio project with source code is available to accompany this topic: Download.
In order to complete this walkthrough, you will need:
Microsoft Visual Studio 2008 Service Pack 1 or later.
Visual Studio Standard Edition and Visual Web Developer Express Edition do not do not support unit-test projects. You can use these versions of Visual Studio to run the parts of this walkthrough that pertain to creating and running an ASP.NET MVC project. However, you will not be able to work with unit tests as described in this walkthrough.
The ASP.NET MVC 2 framework. If you have installed Visual Studio 2010, the ASP.NET MVC 2 is already installed on your computer. To download the most up-to-date version of the framework, see the ASP.NET MVC download page.
To begin, you will create a new ASP.NET MVC project.
To create a new MVC project
On the File menu, click New Project.
The New Project dialog box is displayed.
In the upper-right corner, make sure that .NET Framework 3.5 is selected.
Under Project types, expand either Visual Basic or Visual C#, and then click Web.
Under Visual Studio installed templates, select ASP.NET MVC 2 Web Application.
In the Name box, enter MvcBasicWalkthrough.
In the Location box, enter a name for the project folder.
If you want the name of the solution to differ from the project name, enter a name in the Solution Name box.
Select Create directory for solution.
The Create Unit Test Project dialog box is displayed.
If you are using the Standard or Express editions of Visual Studio, the Create Unit Test Project dialog box is not displayed. Instead, the new MVC application project is generated without a test project.
Select Yes, create a unit test project.
By default, the name of the test project is the application project name with "Tests" added. However, you can change the name of the test project. By default, the test project will use the Visual Studio Unit Test framework. For information about how to use a third-party test framework, see Adding a Custom MVC Test Framework in Visual Studio.
The new MVC application project and a test project are generated. (If you are using the Standard or Express editions of Visual Studio, the test project is not created.)
The following illustration shows the folder structure of a newly created MVC solution.
The folder structure of an MVC project differs from that of an ASP.NET Web site project. The MVC project contains the following folders:
Content, which is for content support files. This folder contains the cascading style sheet (.css file) for the application.
Controllers, which is for controller files. This folder contains the application's sample controllers, which are named AccountController and HomeController. The AccountController class contains login logic for the application. The HomeController class contains logic that is called by default when the application starts.
Models, which is for data-model files such as LINQ-to-SQL .dbml files or data-entity files.
Scripts, which is for script files, such as those that support ASP.NET AJAX and jQuery.
Views, which is for view page files. This folder contains three subfolders: Account, Home, and Shared. The Account folder contains views that are used as UI for logging in and changing passwords. The Home folder contains an Index view (the default starting page for the application) and an About page view. The Shared folder contains the master-page view for the application.
If you are using an edition of Visual Studio other than Standard or Express, a test project was also generated. The test project has a Controllers folder that contains the HomeControllerTest class. This class has a unit test for each HomeController action method (Index and About).
The newly generated MVC project is a complete application that you can compile and run without change. The following illustration shows what the application looks like when it runs in a browser.
The unit-test project is also ready to compile and run. For this walkthrough, you will add a controller with an action method and a view, and you will add a unit test for the action method.
You will now add a controller that contains logic for downloading city maps from the Microsoft Virtual Earth Web service.
To add a controller to the MVC project
In Solution Explorer, right-click the Controllers folder, click Add, and then click Controller.
The Add Controller dialog box is displayed.
In the Name box, type MapsController.
The ASP.NET MVC framework requires controller names to end with "Controller", such as HomeController, GameController, or MapsController.
Clear the Add action methods for Create, Update, and Details scenarios check box.
Visual Studio adds the MapsController class to the project and opens it in the editor.
To apply test-driven development (TDD) techniques to this project, you should write the unit test for an action method before you write the action method itself. However, if you want your unit test to compile, you must have a stub for the planned action method, which in this walkthrough is ViewMaps.
To add an action-method stub
Open or switch to the MapsController class.
Replace the Index action method with the following code in order to create the ViewMaps action-method stub.
Function ViewMaps() ' Add action logic here Throw New NotImplementedException() End Function
Next, you will add a controller test class to the tests project. In the class, you will add a unit test for the ViewMaps action method. The unit test will fail, because the ViewMaps action-method stub throws an exception. When you finish the action method later in this walkthrough, the test will pass.
To add unit tests for the action methods
In the tests project, right-click the Controllers folder, click Add, and then click Class.
In the Name text box, type MapsControllerTest.
Visual Studio adds the MapsControllerTest class to the test project.
Open the MapsControllerTest class and enter the following code:
This code defines the unit tests for the action method that you will finish later.
In Solution Explorer, select the test project and then press CTRL+F5 to run the unit tests.
The test fails, because the ViewMaps action method currently throws an exception.
You will now add code to the MapsController class for the ViewMaps action method in order to render the Maps view.
To add code to the action method
Open the MapsController class and replace the ViewMaps action-method stub with the following code in order to render the Maps view:
Save and close the file.
Next, you will add a Maps view. To keep the views organized, you will first add a Maps folder under the Views folder.
To add a page-content view to the MVC project
Open the MapsController class, right-click inside the ViewMaps action method, and then click Add View.
The Add View dialog box is displayed.
In the View name box, enter ViewMaps.
Clear the Create a partial view (.ascx) check box and the Create a strongly-typed view check box.
Select the Select master page check box and set the master page to ~/Views/Shared/Site.Master.
Set ContentPlaceHolder ID to "MainContent".
The new view is added to the project in the Maps folder.
Next, you will add content to the new view.
To add content to the view
Open ViewMaps.aspx and add the following content inside the Content element:
Save and close the file.
You will now add an item to the master-page menu that calls the ViewMaps action method.
To add a tab to the master-page menu
In the Shared folder, open the Site.master file and locate the unordered list (ul element) in the div element whose ID is "menucontainer".
Add the following code to the list between the Index and About Us tabs:
The ActionLink method is a helper method that links to an action method. It takes the following parameters: the text for the link, the name of the action method, and the name of the controller.
Save and close the file.
You can now test the application.
To test the MVC application
On the Test menu, click Run, and then click All Tests in Solution.
The results are displayed in the Test Results window. This time the tests pass.
In Solution Explorer, select the walkthrough project and press CTRL+F5 to run the application.
The Index.aspx page is displayed, which includes the tabs that are defined in the master page.
Click the My City Maps tab.
The My City Maps page is displayed. Select any map to see it displayed.
This walkthrough gives you a first look at creating an MVC application and working with unit tests in ASP.NET MVC. From here, you might want to learn more about the ASP.NET MVC framework. The following list suggests topics for additional learning.
For more information about MVC controllers, see Controllers and Action Methods in ASP.NET MVC Applications.
For more information about MVC views, see Views and UI Rendering in ASP.NET MVC Applications.
For more information about MVC models, see Models and Validation in ASP.NET MVC.
For more information about URL routing, see ASP.NET Routing.