使用 ASP.NET MVC 创建一个任务列表应用程序

youhaoxinqin

使用 ASP.NET MVC 创建一个任务列表应用程序

本教程旨在让您了解构建 ASP.NET MVC 应用程序的过程。在本教程中，我将从头到尾构建整个 ASP.NET MVC 应用程序。我将介绍如何构建简单的任务列表应用程序。

如果使用过 Active Server Pages 或 ASP.NET，则会发现 ASP.NET MVC 与其非常类似。ASP.NET MVC 视图非常类似于 Active Server Pages 应用程序中的页面。并且，与传统的 ASP.NET Web Forms 应用程序相同，ASP.NET MVC 可以完全访问 .NET Framework 提供的丰富的语言和类。

希望您能够通过本教程了解构建 ASP.NET MVC 应用程序的过程与构建 Active Server Pages 或 ASP.NET Web Forms 应用程序的相同和不同之处。

任务列表应用程序

由于目标是让事情尽量简单，因此我们将创建一个非常简单的任务列表应用程序。这一简单的任务列表应用程序将执行以下三项任务：

• 列出一系列任务
• 创建新任务
• 标记某项任务已完成
  

为了尽量简单，我们将利用极少几项 ASP.NET MVC Framework 功能来构建应用程序。例如，我们不会使用 Test-Driven Development 或 HTML Helper 方法。

入门

需要安装 Visual Studio 2008 或 Visual Web Developer 2008 Express 来构建 ASP.NET MVC 应用程序。还需要下载 ASP.NET MVC Framework。

如果没有 Visual Studio 2008，可以从下面的网址下载 90 天试用版：

http://msdn.microsoft.com/en-us/vs2008/products/cc268305.aspx

另外，也可以使用 Visual Web Developer Express 2008 创建 ASP.NET MVC 应用程序。如果决定使用 Visual Web Developer Express，则必须安装 Service Pack 1。可以从以下网址下载带有 Service Pack 1 的 Visual Web Developer 2008 Express：

http://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=en

安装 Visual Studio 2008 或 Visual Web Developer 2008 后，需要安装 ASP.NET MVC Framework。可以从以下网址下载 ASP.NET MVC Framework：

http://www.asp.net/mvc/

创建 ASP.NET MVC Web Application 项目

我们首先在 Visual Studio 2008 中创建一个新的 ASP.NET MVC Web Application 项目。选择菜单选项 File, New Project，然后将看到如图 1 所示的 New Project 对话框。选择偏爱的编程语言（Visual Basic 或 Visual C#）并选择 ASP.NET MVC Web Application 项目。将项目命名为 TaskList 并单击 OK 按钮。

图 1：New Project 对话框（ 单击查看大图）

每当创建新的 ASP.NET MVC Web Application 项目时，Visual Studio 都会提示您创建单独的单元测试项目。将出现如图 2 所示的对话框。在本教程中，由于时间关系我们将不创建测试（对此表示遗憾），因此选择 No 选项并单击 OK 按钮。

ASP.NET MVC 应用程序有一系列标准文件夹：Models、Views 和 Controllers 文件夹。可以在 Solution Explorer 窗口中看到这一系列文件夹。我们需要向 Models、Views 和 Controllers 文件夹添加文件以构建任务列表应用程序。

当使用Visual Studio 创建新的ASP.NET MVC 应用程序时，可以使用示例应用程序。因为我们想要从头开始，所以需要删除示例应用程序的一些内容。需要删除以下文件和文件夹：

• Controllers\HomeController.cs
• Views\Home
  

创建控制器

通常，在构建 ASP.NET MVC 应用程序时，将首先构建控制器。每个对应于 ASP.NET MVC 应用程序发出的浏览器请求都由控制器处理。控制器包含负责响应请求的应用程序逻辑。

通过右键单击 Controllers 文件夹并选择菜单项 Add, New Item，向 Visual Studio 项目添加控制器。选择 MVC Controller Class 模板。将新的控制器命名为 HomeController.cs，然后单击 Add 按钮。

对于 TaskList 应用程序，我们将修改 HomeController 类，在其中添加程序清单 1 中的代码。修改后的控制器包含 4 个函数，分别为Index()、Create()、CreateNew() 和 Complete()。每个函数对应一个控制器操作。

程序清单 1 HomeController.cs

• Public Class HomeController
•      Inherits System.Web.Mvc.Controller
•      ' Display a list of tasks
•      Function Index() As ActionResult
•           Return View()
•      End Function
•      ' Display a form for creating a new task
•      Function Create() As ActionResult
•           Return View()
•      End Function
•      ' Add a new task to the database
•      Function CreateNew() As ActionResult
•      ' Add the new task to database
•           Return RedirectToAction("Index")
•      End Function
•      ' Mark a task as complete
•      Function Complete() As ActionResult
•           Return RedirectToAction("Index")
•      End Function
• End Class
  

下面是每个控制器操作的目的：

• Index() 要显示任务列表时调用此函数。
• Create() 要显示用于添加新任务的表单时调用此函数。
• CreateNew() 提交添加新任务的表单时调用此函数。控制器操作实际上是将新任务添加到数据库。
• Complete() 任务标记为完成时调用此函数。
  

我们需要向控制器添加其他逻辑以使其按希望的方式工作。

控制器中的任何公共函数都公开为控制器操作。请注意这一点。控制器操作是公开的。通过向 Web 浏览器地址栏键入正确的 URL，任何人都可以调用控制器操作。所以，在不需要调用函数时，不要意外地在控制器中创建公共函数。

请注意，控制器操作返回 ActionResult。ActionResult 代表操作将要执行的内容。前两个控制器操作 Index() 和 Create() 返回 MVC 视图。第三和第四个操作将用户重定向到另一个控制器操作。

下面是这些控制器操作的工作方式。在请求 Create() 控制器操作时，返回一个包含用于创建新任务的表单的视图。当提交此表单时，调用CreateNew() 控制器操作。CreateNew() 控制器操作将新任务添加到数据库并将用户重定向到 Index() 控制器操作。Index() 控制器操作返回一个视图，显示整个任务列表。最后，如果完成一项任务，则调用 Complete() 控制器操作并更新数据库。Complete() 操作将用户重定向到 Index() 操作并更新显示的任务列表。

创建视图

视图包括发送到浏览器的 HTML 标记和内容。视图是 ASP.NET MVC 应用程序中最接近页面的内容。通过创建扩展名为 .aspx 的文件创建视图。

必须将视图放在正确的位置。如果正在为 HomeController 的 Index() 操作方法创建视图，则必须将视图置于具有以下路径的文件夹内：

\Views\Home\Index.aspx

如果为 ProductController 的 Index() 操作方法创建视图，那么必须将视图放到以下文件夹中：

\Views\Product\Price.aspx

默认情况下，视图应该与其对应的控制器操作的名称相同。视图必须放置在与其控制器名称相对应的文件夹中。

在 Views 文件夹中右键单击子文件夹并选择菜单项 Add, New Item 可创建视图。选择 MVC View Page 模板以添加新视图。我们需要在下面的路径下创建两个视图：

\Views\Home\Index.aspx

\Views\Home\Create.aspx

创建这两个视图后，Solution Explorer 窗口应该包含如图 3 所示的文件。

视图包括 HTML 内容和脚本。Index.aspx 视图将用于显示所有任务的列表。为了说明视图的用途，请将程序清单 2 中的内容添加到 Index.aspx 视图中。

程序清单 2 Index.aspx

• <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="TaskList.Index" %>
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml" >
•      <head runat="server">
•           <title></title>
•      </head>
•      <body>
•           <div>
•                <h1>My Tasks</h1>
•                ... displaying all tasks
•                <a href="/Home/Create">Add new Task</a>>
•           </div>
•      </body>
• </html>
  

Index.aspx 视图现在不显示任何任务 – 只是声明它将显示任务。稍后，在本教程中我们会将用于显示任务列表的脚本添加到 Index.aspx 页。

请注意，Index.aspx 视图包含标签为 Add new Task 的链接。此链接指向路径 /Home/Create。单击此链接时，将调用 HomeController 类的Create() 操作。Create() 方法返回 Create 视图。

Create.aspx 视图包含用于创建新任务的表单。此视图的内容包含在程序清单 3 中。

程序清单 3 Index.aspx

• <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Create.aspx.vb" Inherits="TaskList.Create" %>
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml" >
•      <head runat="server">
•           <title></title>
•      </head>
•      <body>
•           <div>
•                <h1>Add New Task</h1>
•                <form method="post" action="/Home/CreateNew">
•                     <label for="task">Task:</label>
•                     <input type="text" name="task" />
•                     <br />
•                     <input type="submit" value="Add Task" />
•                </form>
•           </div>
•      </body>
• </html>
  

请注意，程序清单 3 中的表单发布到下面的 URL：

/Home/CreateNew.aspx

此 URL 对应于HomeController控制器上的CreateNew()操作。表单数据表示新任务将发布到此操作。

创建数据库

下一步是创建包含任务的数据库。可以通过右键单击App_Data 文件夹并选择菜单选项Add, New Item 创建数据库。选择 SQL Server Database 模板项，将数据库命名为TaskListDB.mdf，然后单击 Add 按钮。

接下来，需要向数据库添加用于包含任务的表。双击 Solution Explorer 窗口中的TaskListDB.mdf以打开 Server Explorer 窗口。右键单击 Tables 文件夹并选择Add New Table菜单项。选择此菜单项以打开数据库表设计器。创建以下数据库列：

列名称	数据类型	允许空值
Id	Int	False
Task	Nvarchar(300)	False
IsCompleted	Bit	False
EntryDate	DateTime	False

第一列，ID 列，有两个特殊的属性。首先，需要将 ID 列标记为主关键字列。选择 ID 列后，单击 Set Primary Key按钮（像钥匙的图标）。第二，需要将 ID 列标记为 Identity 列。在 Column Properties 窗口，向下滚动到 Identity Specification 部分并展开。将 Is Identity属性的值更改为 Yes。完成后的表如图 4 所示。

图 4：Tasks 表（ 单击查看大图）

最后一步是保存新表。单击 Save 按钮（软盘图标）并将新表命名为 Tasks。

创建模型

MVC 模型包含大量的应用程序和数据库访问逻辑。通常，将 MVC 应用程序包含的大多数类放在 Models 文件夹中。所有未包含在视图或控制器中的应用程序逻辑，都放在 Models 文件夹中。

在本教程中，我们将使用 LINQ to SQL 与上一节创建的数据库通信。我个人很喜欢 LINQ to SQL。但是，不是必须在 ASP.NET MVC 应用程序中使用 LINQ to SQL。如果愿意，也可以使用其他技术（如 NHibernate 或 Entity Framework）与数据库通信。

要使用 LINQ to SQL，必须首先在 Models 文件夹中创建自己的 LINQ to SQL 类。右键单击 Models 文件夹，选择 Add, New Item菜单项，然后选择LINQ to SQL Classes模板项。将 LINQ to SQL 类命名为 TaskList.dbml 并单击 Add 按钮。完成此步骤后，将出现 Object Relational Designer。

我们需要创建表示 Tasks 数据库表的单个 LINQ to SQL 实体类。将 Tasks 数据库表从 Solution Explorer 窗口拖放到 Object Relational Designer 上。执行最后一步操作将创建新的名称为 Task 的 LINQ to SQL 实体类，如图 5 所示。单击 Save 按钮（软盘图标）保存新的实体。

图 5：Task 实体（ 单击查看大图）

将数据库逻辑添加到控制器方法

由于我们已经有了一个数据库，就可以修改控制器操作以便从数据库保存和检索任务。更改后的HomeController 如程序清单 4 所示。

程序清单4 HomeController.vb

• Public Class HomeController
•      Inherits System.Web.Mvc.Controller
•      Private db As New TaskListDataContext()
•      ' Display a list of tasks
•      Function Index() As ActionResult
•           Dim tasks = From t In db.Tasks Order By t.EntryDate Descending
•           Return View(tasks.ToList())
•      End Function
•      ' Display a form for creating a new task
•      Function Create() As ActionResult
•           Return View()
•      End Function
•      ' Adding a new task to the database
•      Function CreateNew(ByVal task As String) As ActionResult
•           ' Add the new task to database
•           Dim newTask As New Task()
•           newTask.Task = task
•           newTask.IsCompleted = False
•           newTask.EntryDate = DateTime.Now
•           db.Tasks.InsertOnSubmit(newTask)
•           db.SubmitChanges()
•           Return RedirectToAction("Index")
•      End Function
•      ' Mark a task as complete
•      Function Complete(ByVal Id As Integer) As ActionResult
•           ' database logic
•           Dim tasks = From t In db.Tasks Where t.Id = Id
•           For Each Match In tasks
•                Match.IsCompleted = True
•           Next
•           db.SubmitChanges()
•           Return RedirectToAction("Index")
•      End Function
• End Class
  

注意，程序清单 4 中的 HomeController 类包含类级别的私有字段，名称为 db。db 字段是 TaskListDataContext 类的一个实例。HomeController 类使用 db 字段代表 TaskListDB 数据库。

Index() 控制器操作已被修改为从 Tasks 数据库表检索所有记录。任务被传递给 Index 视图。

CreateNew() 方法已被修改为在 Tasks 数据库表中创建新的任务。注意 CreateNew() 方法已被修改为接受一个 String 参数，名为 description。此参数表示从 Create 视图传递的文本表单字段 description。ASP.NET MVC Framework 将表单字段作为参数自动传递给控制器操作。

最后，Complete() 方法被修改为更改 Tasks 数据库表的 IsComplete 列的值。将任务标记为完成后，任务的 ID 被传递给 Complete() 操作，数据库被更新。

修改 Index 视图

要完成任务列表应用程序，我们必须做最后一件事。我们必须修改 Index 视图，以使其显示所有任务的列表，并允许将任务标记为完成。修改后的 Index 视图如程序清单 5 所示。

程序清单 5 Index.aspx

• <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="TaskList.Index" %>
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml" >
•      <head id="Head1" runat="server">
•           <title>Index</title>
•      </head>
•      <body>
•           <div>
•                <h1>My Tasks</h1>
•                <ul>
•                     <% For Each task As TaskList.Task In ViewData.Model%>
•                          <li>
•                               <% If task.IsCompleted Then%>
•                                    <del>
•                                         <%= task.EntryDate.ToShortDateString() %>
•                                         -- <%=task.Task%>
•                                    </del>
•                               <% Else%>
•                                    <a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>
•                                    <%= task.EntryDate.ToShortDateString() %>
•                                    -- <%=task.Task%>
•                               <% End If%>
•                          </li>
•                     <% Next%>
•                </ul>
•                <br /><br />
•                <a href="/Home/Create">Add new Task</a>
•           </div>
•      </body>
• </html>
  

程序清单 5 中的 Index 视图包含循环访问所有任务的 C# foreach 循环。任务以 ViewData.Model 属性表示。总之，使用 ViewData 将数据从控制器操作传递到视图。

在循环中，设置一个条件检查任务是否完成。完成的任务上显示有删除线（删去）。HTML <del> 标记用于创建标记已完成任务的删除线。如果任务尚未完成，则链接标签 Complete 将显示在任务一侧。链接由下面的脚本构成：

• <a href="/Home/Complete/<%= task.Id.ToString() %>">Complete</a>
  

请注意，任务的 ID 包含在由链接表示的 URL 中。单击某个链接时，任务 Id 被传递给HomeController 类的 Complete()操作。通过这种方式，单击 Complete 链接时可更新正确的数据库记录。

显示页面的 Index 视图的最终版本如图 6 所示。

图 6：Index 视图（ 单击查看大图）

总结

本教程旨在让读者了解 ASP.NET MVC 应用程序的构建过程。希望您能发现构建 ASP.NET MVC Web 应用程序与构建 Active Server Pages 或 ASP.NET 应用程序的方式的相似之处。

在本教程中，我们只使用了 ASP.NET MVC framework 最基本的功能。在以后的教程中，我们将深入了解控制器、控制器操作、视图、视图数据和 HTML Helper 等主题。

//*********代码创 建 人：youhaoxinqin                                ********//
//*********联 系  方式：QQ:417643479 邮箱:youhaoxinqin@sina.com     ********//