- A Story with a Moral
- What Is Good Software?
- What Is ASP.NET MVC?
- The Architecture of an ASP.NET MVC Application
- Understanding the Sample ASP.NET MVC Application
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Understanding the Sample ASP.NET MVC Application
A good way to get a firmer grasp on the three logical parts of an MVC application is to take a look at the sample application that is created automatically when you create a new ASP.NET MVC project with Visual Studio.
Follow these steps:
- Launch Visual Studio.
- Select the menu option File, New Project.
- In the New Project dialog, select your favorite programming language (C# or VB.NET) and select the ASP.NET MVC Web Application template. Give your project the name MyFirstMvcApp and click the OK button (see Figure 1.2).
)
Figure 1.2 Creating a new ASP.NET MVC project
Immediately after you click the OK button to create a new ASP.NET MVC project, you see the Create Unit Test Project dialog in Figure 1.3. Leave the default option selected—Yes, Create a Unit Test Project—and click the OK button.
)
Figure 1.3 Creating a unit test project
Your computer hard drive will churn for a few seconds while Visual Studio creates the default files for a new ASP.NET MVC project. After all the files are created, the Solution Explorer window should contain the files in Figure 1.4.
)
Figure 1.4 Files in a new ASP.NET MVC project
The Solution Explorer window in Figure 1.4 contains two separate projects: the ASP.NET MVC project and the Test project. The Test project contains all the unit tests for your application.
ASP.NET MVC Folder Conventions
The ASP.NET MVC framework emphasizes convention over configuration. There are standard locations for each type of file in an ASP.NET MVC project. The ASP.NET MVC application project contains the following folders:
- App_Data—Contains database files. For example, the App_Data folder might contain a local instance of a SQL Server Express database.
- Content—Contains static content such as images and Cascading Style Sheet files.
- Controllers—Contains ASP.NET MVC controller classes.
- Models—Contains ASP.NET MVC model classes.
- Scripts—Contains JavaScript files including the ASP.NET AJAX Library and jQuery.
- Views—Contains ASP.NET MVC views.
When building an ASP.NET MVC application, you should place controllers only in the Controllers folder, JavaScript scripts only in the Scripts folder, ASP.NET MVC views only in the Views folder, and so on. By following these conventions, your application is more easily maintained, and it can be more easily understood by others.
Running the Sample ASP.NET MVC Application
When you create a new ASP.NET MVC application, you get a simple sample application. You can run this sample application by selecting the menu option Debug, Start Debugging (or press the F5 key).
The first time that you run a new ASP.NET MVC application in Visual Studio, you receive a dialog asking if you want to enable debugging. Simply click the OK button.
When you run the application, your browser opens with the page in Figure 1.5.
)
Figure 1.5 The sample application
You can use the tabs that appear at the top of the page to navigate to either the Home or the About page. You also can click the Login link to register or log in to the application. And, that is all you can do with the application.
This sample application is implemented with one ASP.NET MVC controller and two ASP.NET MVC views. The sample application does not contain any business or data access logic, so it does not contain any ASP.NET MVC model classes.
The controller is located in the Controllers folder:
(C#)
\Controllers\HomeController.cs
If you open the HomeController in the Code Editor window, you see the file in Listing 1.1.
Listing 1.1. Controllers\HomeController.cs (C#)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyFirstMvcApp.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
}
}
Listing 1.1. Controllers\HomeController.vb (VB)
<HandleError()> _
Public Class HomeController
Inherits System.Web.Mvc.Controller
Function Index() As ActionResult
ViewData("Message") = "Welcome to ASP.NET MVC!"
Return View()
End Function
Function About() As ActionResult
Return View()
End Function
End Class
The file in Listing 1.1 contains a class with two methods named Index() and About(). Methods exposed by a controller are called actions. Both the Index() and About() actions return a view.
When you first run the sample application, the Index() action is invoked and this action returns the Index view. If you click the About tab, the About() action is invoked and this action returns the About view.
The two views can be found in the Views folder at the following location:
\Views\Home\About.aspx
\Views\Home\Index.aspx
The content of the Index view is contained in Listing 1.2.
Listing 1.2. Views\Home\Index.aspx (C#)
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</asp:Content>
Listing 1.2. Views\Home\Index.aspx (VB)
<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%= Html.Encode(ViewData("Message")) %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</asp:Content>
Notice that a view consists mostly of standard HTML content. For example, the view contains standard <h2> and <p> tags. A view generates a page that is sent to the browser.