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

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

 

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

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

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

 

系统必备

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

 

创建新的 MVC 项目

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

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

   

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

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

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

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

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

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

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

9. 单击“确定”。

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

   

   注意

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

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

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

11. 单击“确定”。

    此时将生成新的 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 路由。