演练：在 Visual Studio 中创建一个带单元测试的基本 MVC2 项目

http://msdn.microsoft.com/zh-cn/library/dd410597(v=vs.100).aspx

 

在本演练中，您将创建并运行示例 MVC 应用程序。然后将通过添加控制器和视图来自定义该应用程序。

此外，本演练还演示如何使用测试驱动的开发 (TDD)。 在本演练中，您将创建一个包含 MVC 应用程序单元测试的项目。

Download（下载）主题附带含源代码的 Visual Studio 项目。

 

系统必备

Microsoft Visual Studio 2008 Service Pack 1 或更高版本。
ASP.NET MVC 2 框架。如果您已安装 Visual Studio 2010，则在您的计算机上已安装了 ASP.NET MVC 2。若要下载该框架的最新版本，请参见 ASP.NET MVC download（ASP.NET MVC 下载）页。
 

创建新的 MVC 项目

在“文件”菜单上，单击“新建项目”。

将显示“新建项目”对话框。



在右上角中，确保选择“.NET Framework 3.5”。

在“项目类型”下，展开“Visual Basic”或“Visual C#”，再单击“网站”。

在“Visual Studio 已安装的模板”下面，选择“ASP.NET MVC 2 Web 应用程序”。

在“名称”框中输入“MvcBasicWalkthrough”。

在“位置”框中，输入项目文件夹的名称。

如果希望解决方案的名称不同于项目名称，请在“解决方案名称”框中输入名称。

选择“创建解决方案的目录”。

单击“确定”。

随即显示“创建单元测试项目”对话框。




注意

如果使用的是 Visual Studio 的标准版或学习版，则不会显示“创建单元测试项目”对话框。而是会生成不含测试项目的新 MVC 应用程序项目。

选择“是，创建单元测试项目”。

默认情况下，该测试项目的名称为添加了“Tests”的应用程序项目名称。不过，您可以更改该测试项目的名称。默认情况下，该测试项目将使用 Visual Studio 单元测试框架。有关如何使用第三方测试框架的信息，请参见如何：在 Visual Studio 中添加自定义的 ASP.NET MVC 测试框架。

单击“确定”。

此时将生成新的 MVC 应用程序项目和测试项目。

 

检查MVC项目

 

下图演示新创建的 MVC 解决方案的文件夹结构。





MVC 项目的文件夹结构不同于 ASP.NET 网站项目的文件夹结构。MVC 项目包含以下文件夹：

Content，用于存储内容支持文件。此文件夹包含应用程序的级联样式表（.css 文件）。
Controllers，用于存储控制器文件。此文件夹包含应用程序的名为 AccountController 和 HomeController 的示例控制器。 AccountController 类包含应用程序登录逻辑。 HomeController 类包含应用程序启动时默认情况下调用的逻辑。
Models，用于存储数据模型文件，如 LINQ-to-SQL .dbml 文件或数据实体文件。
Scripts，用于存储脚本文件，如支持 ASP.NET AJAX 和 jQuery 的脚本文件。
Views，用于存储视图页文件。此文件夹包含以下三个子文件夹：Account、Home 和 Shared。Account 文件夹包含用作 UI 的视图，该 UI 用于登录和更改密码。Home 文件夹包含“Index”视图（应用程序的默认起始页）和“About”页视图。Shared 文件夹包含应用程序的母版页视图。
如果使用的是 Visual Studio 标准版或学习版以外的版本，则也会生成测试项目。该测试项目具有包含 HomeControllerTest 类的 Controllers 文件夹。此类具有每个HomeController 操作方法（Index 和 About）的单元测试。

新生成的 MVC 项目是一个可以编译的完整应用程序，无需更改就可以运行。下图演示了在浏览器中运行应用程序时应用程序的外观。





单元测试项目也准备就绪，可以编译和运行。对于本演练，您将添加一个具有操作方法和视图的控制器，并且将为该操作方法添加单元测试。

 

 

添加控制器

您现在将添加一个控制器，该控制器包含用于从 Microsoft Virtual Earth Web 服务下载城市地图的逻辑。

向 MVC 项目添加控制器

1. 在“解决方案资源管理器”中，右击“Controllers”文件夹，再单击“添加”，然后单击“控制器”。

随即显示“添加控制器”对话框。





2. 在“名称”框中键入 MapsController。

ASP.NET MVC 框架要求控制器名称以“Controller”结尾，如 HomeController、GameController 或 MapsController。

3. 清除“为‘创建’、‘更新’和‘详细信息’方案添加操作方法”复选框。

4. 单击“添加”。

Visual Studio 会将 MapsController 类添加到项目中，并在编辑器中打开该类。

 

创建操作方法存根

若要将测试驱动的开发 (TDD) 技术应用于此项目，在编写操作方法本身之前，您应该为其编写单元测试。但是，如果希望编译单元测试，则必须具有计划的操作方法的存根，在本演练中，此存根为 ViewMaps。

创建操作方法存根

1. 打开或切换到 MapsController 类。

2. 用以下代码替换 Index 操作方法，以便创建 ViewMaps 操作方法存根。

VB

Function ViewMaps()

' Add action logic here

Throw New NotImplementedException()

End Function

C#

public ActionResult ViewMaps()

{

// Add action logic here

throw new NotImplementedException();

}

 

 

为操作方法添加单元测试

接下来，您将向测试项目添加控制器测试类。在此类中，您将为 ViewMaps 操作方法添加单元测试。单元测试将会失败，因为 ViewMaps 操作方法存根引发异常。在本演练后面部分中完成操作方法时，将会通过测试。

为操作方法添加单元测试

1. 在测试项目中，右击“Controllers”文件夹，单击“添加”，然后单击“类”。

2. 在“名称”文本框中，键入 MapsControllerTest。

3. 单击“添加”。

Visual Studio 会将 MapsControllerTest 类添加到测试项目中。

4. 打开 MapsControllerTest 类并输入以下代码：

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using Microsoft.VisualStudio.TestTools.UnitTesting;

using System.Web.Mvc;

using MvcBasicWalkthrough;

using MvcBasicWalkthrough.Controllers;

namespace MvcBasicWalkthrough.Tests.Controllers

{

[TestClass]

public class MapsControllerTest

{

[TestMethod]

public void ViewMaps()

{

// Arrange

MapsController controller = new MapsController();

// Act

ViewResult result = controller.ViewMaps() as ViewResult;

// Assert

Assert.IsNotNull(result);

}

}

}

此代码为稍后将完成的操作方法定义单元测试。

5. 在“解决方案资源管理器”中，选择该测试项目，然后按 Ctrl+F5 运行单元测试。

测试将会失败，因为 ViewMaps 操作方法当前引发异常。

 

添加视图

接下来，您将添加 Maps 视图。为了使视图井井有条，您将首先在 Views 文件夹下面添加 Maps 文件夹。

向 MVC 项目添加页面内容视图

1. 打开 MapsController 类，在 ViewMaps 操作方法内右击，然后单击“添加视图”。

随即显示“添加视图”对话框。





2. 在“视图名称”框中输入 ViewMaps。

3. 清除“创建分部视图(.ascx)”和“创建强类型视图”复选框。

4. 选中“选择母版页”复选框，并将母版页设置为 ~/Views/Shared/Site.Master。

5. 将“ContentPlaceHolder ID”设置为“MainContent”。

6. 单击“添加”。

该新视图将添加到项目内的 Maps 文件夹中。

 

向视图添加内容

接下来，您将向新视图添加内容。

向视图添加内容

1. 打开 ViewMaps.aspx 并在 Content 元素内添加以下内容：

<h2>My City Maps</h2>

Select map:

<select onclick="GetMap(value);">

<option value="Seattle">Seattle, WA</option>

<option value="LasVegas">Las Vegas, NV</option>

<option value="SaltLake">Salt Lake City, UT</option>

<option value="Dallas">Dallas, TX</option>

<option value="Chicago">Chicago, IL</option>

<option value="NewYork">New York, NY</option>

<option value="Rio">Rio de Janeiro, Brazil</option>

<option value="Paris">Paris, France</option>

<option value="Naples">Naples, Italy</option>

<option value="Keta">Keta, Ghana</option>

<option value="Beijing">Beijing, China</option>

<option value="Sydney">Sydney, Australia</option>

</select>

<br />

<br />

<div id='earthMap' style="position:relative; width:400px; height:400px;">

</div>

<script charset="UTF-8" type="text/javascript"

src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">

</script>

<script type="text/javascript">

var map = null;

var mapID = '';

function GetMap(mapID)

{

switch (mapID)

{

case 'Seattle':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'i', true);

break;

case 'LasVegas':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(36.17, -115.14), 10 ,'i' ,true);

break;

case 'SaltLake':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(40.75, -111.89), 10 ,'i' ,true);

break;

case 'Dallas':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(32.78, -96.8), 10 ,'i' ,true);

break;

case 'Chicago':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(41.88, -87.62), 10 ,'i' ,true);

break;

case 'NewYork':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(40.7, -74), 10 ,'i' ,true);

break;

case 'Rio':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(-22.91, -43.18), 10 ,'i' ,true);

break;

case 'Paris':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(48.87, 2.33), 10 ,'i' ,true);

break;

case 'Naples':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(40.83, 14.25), 10 ,'i' ,true);

break;

case 'Keta':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(5.92, 0.983), 10 ,'i' ,true);

break;

case 'Beijing':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(39.91, 116.39), 10 ,'i' ,true);

break;

case 'Sydney':

map = new VEMap('earthMap');

map.LoadMap(new VELatLong(-33.86, 151.21), 10 ,'i' ,true);

}

}

</script>

此标记定义用于选择地图的下拉列表，以及用于从 Microsoft Virtual Earth Web 服务中检索选定的地图的 JavaScript 逻辑。

2. 保存并关闭文件。

 

向母版页菜单添加选项卡

您现在将向母版页菜单添加一个调用 ViewMaps 操作方法的项。

向母版页菜单添加选项卡

1. 在 Shared 文件夹中，打开 Site.master 文件，找到 ID 为“menucontainer”的 div 元素中未排序的列表（ul 元素）。

2. 向列表中“Index”和“About Us”选项卡之间添加以下代码：

<li><%= Html.ActionLink("My City Maps", "ViewMaps", "Maps")%></li>

ActionLink 方法是链接到操作方法的帮助器方法。它采用以下参数：链接文本、操作方法的名称以及控制器的名称。

3. 保存并关闭文件。

 

测试 MVC 应用程序

您现在可以测试应用程序。

1. 在“测试”菜单上，单击“运行”，然后单击“解决方案中的所有测试”。

结果将显示在“测试结果”窗口中。这次通过了测试。

2. 在“解决方案资源管理器”中，选择演练项目，然后按 Ctrl+F5 运行应用程序。

此时将显示 Index.aspx 页，它包括母版页中定义的选项卡。

3. 单击“My City Maps”选项卡。

此时将显示“My City Maps”页。选择任意地图以进行查看。





 

 

后续步骤

通过本演练，您可以预先了解如何在 ASP.NET MVC 中创建 MVC 应用程序以及使用单元测试。您可能希望从中了解有关 ASP.NET MVC 框架的更多信息。下面列出了建议的主题，以供进一步了解。

有关 MVC 控制器的更多信息，请参见 ASP.NET MVC 应用程序中的控制器和操作方法。
有关 MVC 视图的更多信息，请参见 ASP.NET MVC 应用程序中的视图和 UI 呈现。
有关 MVC 模型的更多信息，请参见 ASP.NET MVC 中的模型和验证。
有关 URL 路由的更多信息，请参见 ASP.NET 路由。