Walkthrough: Creating a Basic MVC Project in Visual Studio

Introduction

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 two views.

In order to complete this walkthrough, you will need:

  • Microsoft Visual Studio 2008. You cannot use Visual Web Developer Express Edition for this walkthrough.

  • ASP.NET MVC Preview 2. You can download this release from the Microsoft Download site.

Creating a New MVC Project

To begin, you will create a new project for an MVC Web application. Note that even through you are creating a Web application, you will not create a Web site project.

To create a new MVC project

  1. On the File menu, click New Project.

    The New Project dialog box is displayed.

  2. In the upper-right corner, make sure that .NET Framework 3.5 selected.

  3. Under Project types, expand either Visual Basic or Visual C# and then click Web.

  4. Under Templates, select ASP.NET MVC Web Application.

  5. In the Name box, type a name for the project, such as "MVCProject". For this walkthrough, it is not important what you name the project.

  6. In the Location box, enter the name for the project folder.

  7. If you want the name of the solution to differ from the project name, type a name for the solution in the Solution Name box.

  8. Select Create directory for solution.

  9. Click OK.

    The Testing Framework Options dialog box is displayed.

    Note

    If you are using Visual Studio 2008 Standard Edition, the Testing Framework Options dialog box is not displayed. Instead, the new MVC application project is generated without a test project.

  10. Select Generate a unit test project for my application.

    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 if you want. In addition, 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 Test Framework.

  11. Click OK.

    The new MVC application project and a test project are generated. (In Standard edition, no test project is generated.)

Examining the MVC Project

The newly generated MVC project is a complete application that you can compile and start without change.

The folder structure of an MVC project differs from an ASP.NET Web site project. The MVC project contains the following folders:

  • Content folder – For content support files. This folder contains the cascading style sheet for the application.

  • Controllers folder – For controller files. This folder contains the application's sample controller, which is named HomeController.

  • Models folder – For data model files (such as LINQ to SQL DBML files) and data entity files.

  • Views folder – For view page files. This folder contains two subfolders: Home and Shared. The Home folder contains two example page views that are related to the home controller. The Shared folder contains the master page view for the application.

If you are using an edition of Visual Studio other than Standard, a test project was also generated. The test project contains a Controllers folder that has a class stubbed out for testing the default HomeController class.

Adding a Controller

You will now add a controller to provide user-login functionality.

To add a controller to the MVC project

  1. In Solution Explorer, right-click the Controllers folder, click Add, and then click New Item.

    The Add New Item dialog box is displayed.

  2. Under Categories, expand either Visual Basic or Visual C# (depending on your project), expand Web, and then click MVC.

  3. Under Templates, select MVC Controller Class.

  4. In the Name box, type LoginController.

    Note

    The ASP.NET MVC framework expects controller names to end with "Controller", such as HomeController, GameController, or LoginController.

  5. Click Add.

    Visual Studio adds the LoginController class to the project.

Adding Views

Next, you will add two new views: a Login view and a Welcome view. To keep the views organized, you will first add a Login folder under the Views folder.

To add page-content views to the MVC project

  1. In Solution Explorer, right-click the Views folder, click Add, and then click New Folder.

  2. Name the new folder Login.

    Note

    Views must be put in a folder that is named after the related controller. For example, views that relate to LoginController must be in the Login folder.

  3. Right-click the Login folder, click Add, and then click New Item.

  4. Under Categories, expand either Visual Basic or Visual C# (depending on your project), expand Web, and then click MVC.

  5. Under Templates, select MVC View Content Page.

  6. In the Name box, type Login.aspx.

  7. Click Add.

    The Select a Master Page dialog box is displayed.

  8. Under Project folders, under Views, select Shared.

  9. Under Contents of folder, click Site.Master, and then click OK.

  10. Repeat steps 3-9, but name the page Welcome.aspx.

Adding Action Methods to a Controller

You will now add code for two action methods. The first action method renders the Login view. The second method obtains submitted data from a form and renders the Welcome view. To keep this example simple, the example does not implement code for user authentication.

To add action methods to the controller

  1. Open the LoginController class and replace the Index action method with the following code, which renders the Login view:

    [Visual Basic]
Public Sub Login()
    RenderView("Login")
End Sub

    [C#]
public void Login()
{
    RenderView("Login");
}

  2. After the Login method, enter the following code, which obtains data from a form and renders the Welcome view:

    [Visual Basic]
Public Sub FormSubmit(name As String, password As String)
  ' TODO: Authenticate user
  ViewData("Name") = name
  RenderView("Welcome")
End Sub

    [C#]
public void FormSubmit(string name, string password)
{
    // TODO: Authenticate user
    ViewData["Name"] = name;
    RenderView("Welcome");
}

  3. Save and close the file.

Adding Content to the Views

Next, you will add content to the new views.

To add content to the page-content views

  1. Open the Login.aspx view and add the following content inside the Content element:

    <h2>Log In Please</h2>
<form action="/Login/FormSubmit">
  Login Name: <input type="text" name="name" /><br />
  Password: <input type="password" name="password" /><br />
  <input type="submit" value="Submit" />
</form>

  2. Open the Welcome.aspx view and add the following content inside the Content element:

    <h2>Welcome</h2>
<p>Welcome, <%= ViewData["Name"] %>.</p>

  3. Save and close the file.

Calling the Login View from the Master-Page Menu

You will now add an item to the master-page menu that calls the Login action method.

To call the Login action method from the master-page menu

  1. In the Shared folder, open the Site.Master file and locate the unordered list in the menu div element.

  2. Add the following code to the end of the list:

    <li><%= Html.ActionLink("Login", "Login", "Login") %></li>

  3. Save and close the file.

Testing the MVC Application

Finally, you can test the application.

To test the MVC application

  1. Press CTRL+F5 to run the application.

    The Default.aspx page is displayed, which includes the menu that is defined in the master page.

  2. Click the Login menu item.

  3. Enter your name and a password in the form, and then click Submit.

    The Welcome page is displayed.

This walkthrough gives you a first peek at working with an MVC application. From here, you might want to learn more about the ASP.NET MVC framework. The following list suggests topics for additional learning.

See Also

This topic is ASP.NET 3.5 Extensions pre-release documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases. To provide feedback or ask questions about the release, please go to the ASP.NET 3.5 Extensions forums.