翻译：使用 Asp.net mvc 15 分钟创建 Movie 数据库应用程序

英文原文 

Create a Movie Database Application in 15 Minutes with ASP.NET MVC (C#)

本教程是要让你了解创建ASP.NET MVC 应用程序的过程。I blast through building an entire ASP.NET MVC application from start to finish（这句不会翻，大意是：我从头至尾 XXX 创建一个完整的 ASP.NET MVC 应用程序）。演示如何创建一个简单的数据驱动应用程序，通过它说明怎样列出，创建和编辑数据库记录。

为简化创建应用程序的过程，我们利用 Visual Studio 2008 的 scaffolding features。我们让 Visual Studio 生成初始代码，并生成控制器，模型和视图的内容。

如果用过 Active Server Pages 或 ASP.NET，那么会对 ASP.NET MVC 感到很熟悉。ASP.NET MVC views 很像 Active Server Pages 应用程序中的页。而且，和传统的 ASP.NET Web Forms 应用程序一样，ASP.NET MVC 提供了对 .NET 框架的语言和类的完全访问。

我希望这篇教程能让你了解创建 ASP.NET MVC 应用程序与创建 Active Server Pages 或 ASP.NET Web Forms 之间的同与不同。

Movie 数据库应用程序概述

目标是保持简单。我们将创建一个非常简单的 Movie 数据库应用程序，这个程序允许我们做三件事：

1. 列出电影数据库记录的集合
2. 创建新的电影数据库记录
3. 编辑现存 movie 数据库记录

另外，因为要保持简单，创建应用程序时使用了尽量少的 Asp.net mvc 框架的特性。例如，不使用测试驱动开发。

为创建应用程序，我们需要完成以下步骤：

1. 创建 asp.net mvc web 应用程序项目
2. 创建数据库
3. 创建数据库模型
4. 创建 asp.net mvc 控制器
5. 创建 asp.net mvc 视图

先决条件

为创建 asp.net mvc 应用程序，需要 Visual Studio 2008 或 Visual Web Developer 2008 Express. 还需要下载 asp.net mvc 框架。

如果没有 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 Express 2008：

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 框架，可以从这里下载 asp.net mvc 框架：

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

除了单独下载 ASP.NET 框架和 ASP.NET MVC 框架，还可以使用 Web Platform Installer. Web Platform Installer 可以简化对电脑上安装的应用程序的管理。

http://www.microsoft.com/web/gallery/Install.aspx

创建 asp.net mvc web 应用程序项目

首先在 visual studio 2008 中创建一个新的 asp.net mvc 应用程序项目。选择菜单选项，File, New Project , 出现图1中的新建项目对话框。选择 C# 作为编程语言，asp.net mvc web application 项目模板。将项目命名为 MovieApp，点击 OK 按钮。

Figure 01: The New Project dialog box (Click to view full-size image)

新建项目对话框的顶部有一个下拉列表，确保选择的是 .NET Framework 3.5，不然ASP.NET MVC Web Application 项目模板不会出现。

当创建一个 mvc web 应用程序项目时，Visual Studio 会提示创建一个独立的单元测试项目，弹出图2中的对话框。由于时间紧迫，这篇教程不创建测试，（我们对此有些内疚），所以，选择 No，然后单击OK按钮。

Visual Web Developer does 不支持测试项目。

Figure 02: The Create Unit Test Project dialog (Click to view full-size image)

ASP.NET MVC 应用程序具有标准的文件夹集合：Models，Views, 和 Controllers 文件夹。可以在解决方案资源管理器窗口查看标准文件夹集合。为创建 Movie 数据库应用程序，我们将向 Models, Views 和 Controllers 文件夹添加文件。

 

创建新的 MVC 应用程序时，Visual Studio 会创建一个示例程序。因为我们要从头开始，需要把这个示例程序的内容删掉。请删除以下文件和文件夹。

• Controllers\HomeController.cs
• Views\Home

创建数据库

需要创建数据库来保存电影记录。很幸运，Visual Studio 包含一个免费的数据库，SQL Server Express，按以下步骤创建数据库：

1. 在解决方案资源管理器中，右键单击 App_Data 文件夹，选择 Add, New Item 菜单选项。
2. 选择 Data 类别，选择 SQL Server Database 模板（见图3）。
3. 将数据库命名为 MoviesDB.mdf，单击 Add 按钮。

创建好数据库后，可以双击 App_Data 中的 MoviesDB.mdf 文件，连接到数据库。双击这个文件会打开 Server Explorer 窗口。

Server Explorer 窗口在 Visual Web Developer 中名为 Database Explorer 窗口。

Figure 03: Creating a Microsoft SQL Server Database (Click to view full-size image)

接下来创建一个表，在 Sever Explorer 窗口中，右键单击 Tables 文件夹，选择菜单 Add New Table，打开数据库表设计器。创建以下数据库列：

Column Name	Data Type	Allow Nulls
Id	Int	False
Title	Nvarchar(100)	False
Director	Nvarchar(100)	False
DateReleased	DateTime	False

 

第一个列 Id 有两个特别属性。一，要把 Id 列标记为主键列，选择 Id 列，单击 Set Primary Key 按钮（像钥匙的图标）。二，要把 Id 标记为标识列。在 Column Properties 窗口中，滚动到  Identity Specification，展开，将 Is Identity 属性更改为 Yes。完成后，表看起来应该像图4.

Figure 04: The Movies database table (Click to view full-size image)

最后保存表。点击 Save 按钮(软盘图标)，将表命名为 Movies.

创建好表后，添加一些电影记录。在 Server Explorer 窗口中右键点击 Movies 表，选择 Show Table Data 菜单选项。输入一些你最喜欢的电影（见图5）。

Figure 05: Entering movie records (Click to view full-size image)

创建模型（Model）

接下来需要创建一组表示数据库的类，也就是数据库模型。利用 Microsoft Entity Framework 自动为数据库模型生成类。

asp.net mvc 框架不依赖于 Microsoft Entity Framework。可以使用多种对象关系映射工具创建数据库模型类，包括 LINQ to SQL，Subsonic, 和 NHibernate.

按以下步骤启动 Entity Data Model Wizard：

1. 在 Solution Explorer 窗口中右键单击 Models 文件夹，选择 Add, New Item 菜单选项。
2. 选择 Data 类别，然后选择 ADO.NET Entity Data Model 模板。
3. 将数据模型命名为 MoviesDBModel.edmx，点击 Add 按钮。

点击 Add 按钮后，出现Entity Data Model Wizard（见图6）。按以下步骤完成向导：

1. 在 Choose Model Contents 这一步，选择 Generate from database 选项。
2. 在 Choose Your Data Connection 这一步，使用 MoviesDB.mdf 数据连接，选择 MoviesDBEntities 作为连接设置。点击 Next 按钮。
3. 在 Choose Your Database Objects 这一步，展开 Tables 结点，选择 Movies 表。输入命名空间 MovieApp.Models，然后点击 Finish 按钮。

Figure 06: Generating a database model with the Entity Data Model Wizard (Click to view full-size image)

完成 Entity Data Model Wizard 后，将打开 Entity Data Model Designer，设计器应该显示 Movies 数据库表。（见图7）

Figure 07: The Entity Data Model Designer (Click to view full-size image)

 

在继续之前还要做一点更改。Entity Data Wizard 生成名为 Movies 的模型类，这个类表示 Movies 数据库表。因为要用 Movies 类表示特定的电影，应当将类名修改为 Movie，来代替从 Movies（单数而不是复数）。

在设计器中双击类名，将名字从 Movies 改为 Movie。改好之后，点击 Save 按钮（软盘图标），生成 Movie 类。

创建 ASP.NET MVC 控制器（Controller）

下一步创建 ASP.NET MVC 控制器。控制器负责控制用户如何与 ASP.NET MVC 应用程序交互。

按以下步骤操作：

1. 在 Solution Explorer 窗口，右键点击 Controllers 文件夹，选择 Add, Controller 菜单选项。
2. 在 Add Controller 对话框中，输入名称 HomeController，然后选中 Add action methods for Create, Update, and Details scenarios 复选框。（见图8）
3. 点击 Add 按钮，向项目添加新的 controller

完成这些步骤后，清单1中的 contoller 就创建好了。注意，它包含了名为 Index, Detailes, Create 和 Edit 的方法。接下来的几节中，我们将向这些方法添加必要的代码，使它们能够工作起来。

Figure 08: Adding a new ASP.NET MVC Controller (Click to view full-size image)

Listing 1 – Controllers\HomeController.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax; 
    namespace MovieApp.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/ 
            public ActionResult Index()
            {
                return View();
            } 

            //
            // GET: /Home/Details/5 
            public ActionResult Details(int id)
            {
                return View();
            } 
            //
            // GET: /Home/Create 
            public ActionResult Create()
            {
                return View();
            }  

            //
            // POST: /Home/Create 
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult Create(FormCollection collection)
            {
                try
                {
                    // TODO: Add insert logic here 
                    return RedirectToAction("Index");
                }
                catch
                {
                    return View();
                }
            } 

            //
            // GET: /Home/Edit/5
            public ActionResult Edit(int id)
            {
                return View();
            } 

            //
            // POST: /Home/Edit/5 
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult Edit(int id, FormCollection collection)
            {
                try
                {
                    // TODO: Add update logic here
                    return RedirectToAction("Index");
                }
                catch
                {
                    return View();
                }
            }
        }
    } 

 

列出数据库记录

Home controller 的 Index() 方法是 asp.net mvc 应用程序的默认方法。当运行 asp.net mvc 应用程序时，Index() 方法是被调用的第一个 controller 方法。

我们用 Index() 方法显示 Movies 数据库表的记录列表，用前面创建的数据库模型类来获取电影数据库记录。

清单2中的 HomeController 类已被修改，它包含一个 private 字段，名为 _db。MoviesDBEntities 类表示数据库模型，这个类用于与数据库通信。

清单2 中的 Index() 方法也作了修改。Index() 方法使用 MoviesDBEntities 类从 Movies 数据库表获取所有电影记录。表达式  _db.MovieSet.ToList() 返回 Movies 数据库表的全部记录。

电影记录列表会被传递给视图。传给 View() 方法的东西都将作为 view data 传递。

Listing 2 – Controllers/HomeController.cs (modified Index method)

    using System.Linq;
    using System.Web.Mvc;
    using MovieApp.Models; 
    namespace MovieApp.Controllers
    {
        public class HomeController : Controller
        {
            private MoviesDBEntities _db = new MoviesDBEntities(); 

            public ActionResult Index()
            {
                return View(_db.MovieSet.ToList());
            }
        }
    } 

 

Index()方法返回一个名为 Index 的视图。这个视图显示电影数据库记录列表。按以下步骤操作：

打开 Add View 对话框之前应当先生成项目（选择 Build, Build Solution 菜单选项)，否则 View data class 下拉列表里不会显示类。

1. 在代码编辑器中右键点击 Index() 方法，选择 Add View 菜单选项（见图9）。
2. 在 Add View 对话框中，确认选中了 Create a strongly-typed view 复选框。
3. 在 View content 下拉列表中选择 List.
4. 在 View data class 下拉列表中选择 MovieApp.Models.Movie.
5. 点击 Add 按钮，创建新视图（见图10）。

完成这些步骤后，一个名为 Index.aspx 的视图就添加到了 Views\Home 文件夹。Index视图的内容见清单3。

Figure 09: Adding a view from a controller action (Click to view full-size image)

Figure 10: Creating a new view with the Add View dialog (Click to view full-size image)

Listing 3 – Views\Home\Index.aspx

   <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MovieApp.Models.Movie>>" %> 



    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

       Index

    </asp:Content> 

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

        <h2>Index</h2> 

        <table>

            <tr>

                <th></th>

                <th>

                    Id

                </th>

                <th>

                    Title

                </th>

                <th>

                    Director

                </th>

                <th>

                    DateReleased

                </th>

            </tr> 

        <% foreach (var item in Model) { %>

            <tr>

                <td>

                    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |



                    <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>

                </td>

                <td>

                    <%= Html.Encode(item.Id) %>

                </td>

                <td>

                    <%= Html.Encode(item.Title) %>

                </td>

                <td>

                    <%= Html.Encode(item.Director) %>

                </td>

                <td>

                    <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

                </td>

            </tr>

        <% } %> 

        </table> 



        <p>

            <%= Html.ActionLink("Create New", "Create") %>



        </p> 



    </asp:Content> 

   

 

Index 视图在一个 HTML table 中显示 Movies 数据库表中的全部记录。它包含一个 foreach 循环，迭代访问由 ViewData.Model 属性表示的每个电影。如果按下 F5 键运行程序，可以看到图11中的网页。

Figure 11: The Index view (Click to view full-size image)

创建新的数据库记录

上一节中创建的 Index view 中有一个创建新数据库记录的链接。接下来我们实现这个逻辑，并且创建新的视图，这个视图是创建新记录所必须的。

Home 控制器包含两个名为 Create() 的方法。第一个 Create() 方法没有参数。此重载用于展示创建新记录的 HTML 表单。

第二个 Create() 方法有一个 FormCollection 参数。当提交创建新电影记录的HTML时，此重载会被调用。注意，第二个 Create() 方法有一个 AcceptVerbs 特性，这样，只有当 HTTP POST 请求时，才会调用这个方法。

清单4中更新了 HomeController 类的第二个 Create() 方法。新版本接受一个 Movie 参数，包含向 Movies 数据库表插入记录的逻辑。

注意 Bind 特性。因为不想按照 HTML 更新 Movie Id 属性，所以要显式地排除此属性。

Listing 4 – Controllers\HomeController.cs (modified Create method)

 

            //
            // GET: /Home/Create 
            public ActionResult Create()
            {
                return View();
            }  

            //
            // POST: /Home/Create 
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult Create([Bind(Exclude="Id")] Movie movieToCreate)
            {
                 if (!ModelState.IsValid)
                    return View(); 
                _db.AddToMovieSet(movieToCreate);
                _db.SaveChanges(); 
                return RedirectToAction("Index");
            } 

Visual Studio 使创建添加记录的表单变得很容易（见图12），遵循以下步骤：

1. 在代码编辑器里右键单击 Create() 方法，选择 Add View 菜单选项。
2. 确认选中 Create a strongly-typed view 复选框。
3. From the View content dropdown list, select the value Create.
   在 View Content 下拉列表中选择 Create.
4. 在 View data class 下拉列表中选择 MovieApp.Models.Movie。
5. 单击 Add 按钮，创建新视图。

Figure 12: Adding the Create view (Click to view full-size image)

Visual Studio 会自动生成清单 5 中的视图。这个视图包含一个 HTML 表单，表单中的域与 Movie 类的属性是对应的。

Listing 5 – Views\Home\Create.aspx

Code

   <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %> 



    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

       Create

    </asp:Content> 



    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

        <h2>Create</h2> 

        <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

        <% using (Html.BeginForm()) {%> 

            <fieldset>

                <legend>Fields</legend>

                <p>

                    <label for="Id">Id:</label>

                    <%= Html.TextBox("Id") %>

                    <%= Html.ValidationMessage("Id", "*") %>

                </p>

                <p>

                    <label for="Title">Title:</label>

                    <%= Html.TextBox("Title") %>

                    <%= Html.ValidationMessage("Title", "*") %>

                </p>

                <p>

                    <label for="Director">Director:</label>

                    <%= Html.TextBox("Director") %>

                    <%= Html.ValidationMessage("Director", "*") %>

                </p>

                <p>

                    <label for="DateReleased">DateReleased:</label>

                    <%= Html.TextBox("DateReleased") %>

                    <%= Html.ValidationMessage("DateReleased", "*") %>

                </p>

                <p>

                    <input type="submit" value="Create" />

                </p>

            </fieldset> 

        <% } %> 

        <div>

            <%=Html.ActionLink("Back to List", "Index") %>

        </div> 

    </asp:Content> 

Add View 对话框生成的 HTML 有一个 Id 表单域。因为 Id 列是标识列，不需要这个表单域，可以安全地移除它。

添加 Create 视图后，就可以向数据库添加新 Movie 记录。按 F5 运行应用程序，点击 Create New 链接，查看图13中的表单。如果填写并提交表单，新的电影记录会被创建。

表单验证是自动的。如果你不填写，或填写了无效的发布日期，那么表单会重新显示，发布日期字段会高亮显示。

Figure 13: Creating a new movie database record (Click to view full-size image)

编辑现存数据库记录

上一节讨论了如何列出和创建数据库记录。最后一节讨论如何编辑现存的数据库记录。

首先需要生成编辑表单。这个步骤很简单，因为 Visual Studio 会自动生成编辑表单。在 Visual Studio 代码编辑器中打开 Homecontroller.cs 类，遵循以下步骤：

1. 在代码编辑器中右键点击 Edit() 方法，选择 Add View 菜单选项（图14）。
2. 选中 Create a strongly-typed view 复选框。
3. 从 View content 下拉列表中选择 Edit.
4. 从 View data class 下拉列表选择 MovieApp.Models.Movie。
5. 单击 Add 按钮，创建新视图。

完成这些步骤后，会在 View\Home 文件夹添加名为 Edit.aspx 的新视图，这个视图包含编辑电影记录的 HTML 表单。

Figure 14: Adding the Edit view (Click to view full-size image)

Edit 视图包含一个与 Movie 属性对应的 HTML 表单域，因为不应当编辑 Id 属性的值，所以要移除这个表单域。

最后，需要修改 Home 控制器，使它支持编辑数据库记录。更新后的 HomeController 类在表单6中。

Listing 6 – Controllers\HomeController.cs (Edit methods)

    //
    // GET: /Home/Edit/5 
    public ActionResult Edit(int id)
    {
        var movieToEdit = (from m in _db.MovieSet
                           where m.Id == id
                           select m).First(); 
        return View(movieToEdit);
    } 

    //
    // POST: /Home/Edit/5 
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(Movie movieToEdit)
    { 
        var originalMovie = (from m in _db.MovieSet
                             where m.Id == movieToEdit.Id
                             select m).First(); 
        if (!ModelState.IsValid)
            return View(originalMovie);
            _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit);
            _db.SaveChanges(); 
            return RedirectToAction("Index");
    } 

 

清单6中，向Edit()方法的两个重载添加了额外的逻辑。第一个方法返回与 Id 参数对应的电影数据库记录。第二个重载执行更新数据库中电影记录的操作。

注意必须获取原来的电影，然后调用 ApplyPropertyChanges(), 更新数据库中现存的电影。

小结

本教程的目的是帮你了解创建 ASP.NET MVC 的创建过程。希望你发现创建 ASP.NET MVC web 应用程序和创建 Active Server Pages 或 ASP.NET application 是差不多的。

教程中只考察了ASP.NET MVC 框架最基本的特性。后面的教程，我们将深入一些主题，例如，控制器（controllers），控制器动作（controller actions），视图（views），（视图数据（view data），和 HTML 辅助工具（HTML helpers）。