第一章 ASP.NET MVC 2 概述-用Asp.net MVC 15分钟创建电影资料库应用程序（1）

 这一节的教程的目的就是让你知道怎么创建一个ASP.NET MVC应用程序。在这次教程中我将通过从开始到结束创建一个完整的ASP.NET MVC

 

应用程序。我将给你展示如果创建一个数据库驱动的应用程序，以及如何显示列表，创建和编辑数据库记录。

 

     为了简化创建应用的过程，我们将充分利用到 Visual Studio 2008 快速创建应用程序的优点。我们将用Visual Studio 生成最初的代码和

 

内容controllers（控制器）, models(数据模型), and views(视图)。如果你以前使用过ASP或是ASP.NET ，那么你会觉得ASP.NET MVC和

 

他们有很多相似之处。 ASP.NET MVC 的views(视图)非常像ASP中的页面，也类似于传统的 ASP.NET Web Forms 页面。ASP.NET MVC

 

通过 .NET framework 向你提供了一整套多语言和抽象类的访问方式。

 

     我希望通过这一教程能给予你不同与创建ASP应用程序或ASP.NET  Web Forms应用程序的体验，那就是创建ASP.NET MVC 应用程序的

 

体验我们将在这一节中给予你的。

 

 

电影资料库应用程序

 

     因为我的目标是使事情简单，所以我们创建一个非常简单的电影资料库应用程序。我们的电影资料库将实现以下功能:

 

1. 显示电影资料库记录列表
2. 创建新的电影资料记录
3. 编辑已存在的电影资料库记录

 

     再次我们要保持事情的简单，我们将利用 ASP.NET MVC framework提供给我们的优点特征来创建我们的应用程序。为了完成我们的应用程序，我们需要完成以下几步。

1. 创建 ASP.NET MVC Web应用程序工程 
2. 创建数据库
3. 创建数据模型
4. 创建 ASP.NET MVC 控制器
5. 创建 ASP.NET MVC 视图

 

准备工作

       你首先需要 Visual Studio 2008 或 Visual Web Developer 2008 Express来创建ASP.NET MVC应用程序，当然你必须要下

 

载  ASP.NET MVC framework,如果你现在没有Visual Studio 2008(2010),那么你可以从以下地址下载有90天试用期的VS 2008

 

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

 

       做为另一种选择你也可以使用Visual Web Developer Express 2008(2010)来创建SP.NET MVC来创建应用程序。如果你决定要使

 

用Visual Web Developer Express来开发，那么你需要下载Service Pack 1并安装，以下链接地址提供了Service Pack 1的下载地址。

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

      当你安装了Visual Studio 2008(2010) 或Visual Web Developer 2008(2010)后，你还需要下载ASP.NET MVC framework.你

 

可以通过以下链接获得ASP.NET MVC framework

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

 

 

 

创建 ASP.NET MVC Web 应用程序工程

         让我们使用 Visual Studio 2008开始创建一个新的ASP.NET MVC Web 应用程序工程. 选择菜单中和文件选项，

 

新建工程然后你能看到弹出的新建工程的对话框如图1。选择C#做为程序开发语言并且选择 ASP.NET MVC Web Application

 

project 模板，给你的工程取名为MovieApp ,然后确定完成。

 

 

 

图1

 

      你无论什么时候创建一个新的 MVC Web Application 工程,VS 都会提示你创建一个分开的单元测试工程。如图2中的对话框中所示选

 

择。因为这节教程中我们将不需要创建单元测试环境。选择Nooption并且确认完成即可.

 

 

图2

 

       一个ASP.NET MVC 应用程序中的文件夹有标准的设置：一个Models文件夹，一个Views文件夹和一个Controllers 文件夹

 

你能通过解决方案视图查看到这些标准文件夹目录结构。为了要创建我们的电影资料库应用程，我们需要向Models, Views, 以及

 

Controllers 中添加文件。

 

 

      当你通过VS创建了一个新的MVC 应用程序的同时，你就获得了一个示例程序。因为我们希望一切都自己来做。所以我们需要删除示例程

 

序，你需要删除以下文件和文件夹。

• omeController.cs
• Views/Home

 

 

 

创建数据库

      我们需要创建一个数据库来存储我们的电影资料库记录。幸运的是，VS 中已经集成了一个 免费的数据库它就是SQL Server Express

 

请按照以下步骤创建数据库。

1. 在解决方案视图里选择App_Data右击选择Add,New Item
2. 见图3 选择数据类型并且选择SQL Server Database模板。
3. 将你的数据库名命名为MoviesDB.mdf，确定添加完成

     当你创建数据库成功后，你就能双击位于 App_Data文件夹下面的MoviesDB.mdf来连接数据库。双击 MoviesDB.mdf打开服务浏览

 

窗口。

 

图 3

 

       接着，我们需要创建一张新的数据表，从服务器浏览窗口中双击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 设置为自动增长列.如图 4所示

 

 

图 4

 

 

这最后一步就是保存新创建的数据表，并且将新表命名为Movies

   创建新表后就该添加一些电影资料记录到数据表里面了。在服务器浏览窗口中右击Movies数据表选择功能菜单 ShowTable，然后输入

 

一些你感举的电影吧。(见图 5)

 

图 5

 

 

创建数据模型

      下一步我们需要创建一些类来表现我们的数据库。我们需要创建一个数据库模型。我们将利用到Microsoft EntityFramework

自动创建的优点来生成这些类。值得注意的是ASP.NETMVC framework并不依赖于MicrosoftEntity Framework。你可以创建

自己的数据库模型，通过多样的Object Relational Mapping (OR/M)对象关系映射工具来创建数据库模型类如LINQ to SQL, Subsonic

和Nhibernate。

 

按照以下的步骤开始Entity Data Model的创建:

1.   在解决方案管理器视图中右击Models 文件夹选择菜单选项Add, New Item.

2.   在解决方案管理器视图中右击Models 文件夹选择菜单选项选择数据类型并且选择ADO.NET Entity DataModel  模板

3.   给你的数据模型取名为MoviesDBModel.edmx  点击Add  按钮。

当你保存后，数据模型为出现以下向导（见 图 6）按照以下步骤完成向导。

1.   在 Choose Model Contents 这步, 选择 Generate fromdatabase选项.

2.   在 Choose Your Data Connection 这步, 用 MoviesDB.mdf 数据来连接, 并将连接设置命名为  MoviesDBEntities.选择Next 按钮进行下一步操作.

3.   在 Choose Your Database Objects  这步, 展开Tables 节点, 选择 Movies table. 输入命空间MovieApp.Models 点击 Finish完成操作.

 

图 6

 

 

       当你完成Entity Data Model 创建向导后,  EntityData Model Designer 自选打开.  Designer(设计器) 应该展示 Movies 数据表 (见 图 7).

 

图 7

 

 

       在我们继续进行之前我们需要做一点小小的改动。实体数据向导生成的模型类名称为Movies 这样就和数据库表的Movies 表重复了。

因为我们将要使用Movies类来表示单一的movie，所以我们需要修改将Movies 类修改为Movies类双击designer 类名

并且将名称修改为Movie ,修改后保存便生成Movie 类了。

 

创建 ASP.NET MVC Controller

下一步我们将创建 ASP.NET MVC controller(控制器). 一个controller主要负责for controlling ASP.NETMVC 应用程序的用户交互。

按照以下步骤创建：

1.   在解决方案管理器视图中右击 Controllers 文件夹并选择菜单选项 Add, Controller.

2.   在选择添加 Controller 对话框中, 输入名称 HomeController 并勾选 Add action methods for Create, Update, andDetails scenarios (见 图 8).

3.   点击 Add 按钮添加新的 controller到你的工程中.

当你完成这些步骤后，controller 已经创建好了代码如列表 1. 提示 这个类中包含方法 Index, Details,Create, and Edit. 在接下来的工作中,我们将添加必要的代码让这法方法被执行。

 

图 8

Listing 1 – Controllers/HomeController.cs

[c-sharp] view plain copy

1. Listing 1 – Controllers/HomeController.cs  
2. using System;  
3.     using System.Collections.Generic;  
4.     using System.Linq;  
5.     using System.Web;  
6.     using System.Web.Mvc;  
7.     using System.Web.Mvc.Ajax;   
8.     namespace MovieApp.Controllers  
9.     {  
10.         public class HomeController : Controller  
11.         {  
12.             //  
13.             // GET: /Home/   
14.             public ActionResult Index()  
15.             {  
16.                 return View();  
17.             }   
18.             //  
19.             // GET: /Home/Details/5   
20.             public ActionResult Details(int id)  
21.             {  
22.                 return View();  
23.             }   
24.             //  
25.             // GET: /Home/Create   
26.             public ActionResult Create()  
27.             {  
28.                 return View();  
29.             }    
30.             //  
31.             // POST: /Home/Create   
32.             [AcceptVerbs(HttpVerbs.Post)]  
33.             public ActionResult Create(FormCollection collection)  
34.             {  
35.                 try  
36.                 {  
37.                     // TODO: Add insert logic here   
38.                     return RedirectToAction("Index");  
39.                 }  
40.                 catch  
41.                 {  
42.                     return View();  
43.                 }  
44.             }   
45.             //  
46.             // GET: /Home/Edit/5  
47.             public ActionResult Edit(int id)  
48.             {  
49.                 return View();  
50.             }   
51.             //  
52.             // POST: /Home/Edit/5   
53.             [AcceptVerbs(HttpVerbs.Post)]  
54.             public ActionResult Edit(int id, FormCollection collection)  
55.             {  
56.                 try  
57.                 {  
58.                     // TODO: Add update logic here  
59.                     return RedirectToAction("Index");  
60.                 }  
61.                 catch  
62.                 {  
63.                     return View();  
64.                 }  
65.             }  
66.         }  
67.     }   

 

 

 

数据库记录列表

        在Home controller 中的 Index() 方法是 ASP.NET MVC 应用程序中的默认执行方法 。当你运行 ASP.NET MVC 应用程序时,

 

 Index()方法是controller中第一个被 调用的方法。我们将使用Index()方法来展示Movies数据表中的记录列表。我们将用数据模型类来提

 

供数据给Index() 方法。我将修改HomeController 中的代码如列表2 所示。其中包括一个新的私用字named_db。

MoviesDBEntities 类将表示我们的数据模型并且我们将用这个类与数据库进行交互。

          在列表达式2中我也修改了Index()方法.  Index() method 使用了 MoviesDBEntities 类来展示来自数据库表Movies的所有记录.

 

 expression _db.MovieSet.ToList() 返加了来自数据库表Movies所有的记录的列表。这电影列表将传递给视图。 任何通过View()方法的

 

数据都将被通过view data传递给视图

列表 2 –Controllers/HomeController.cs (修改 Index 方法)

 

[c-sharp] view plain copy

1. using System.Linq;  
2.     using System.Web.Mvc;  
3.     using MovieApp.Models;   
4.     namespace MovieApp.Controllers  
5.     {  
6.         public class HomeController : Controller  
7.         {  
8.             private MoviesDBEntities _db = new MoviesDBEntities();   
9.             public ActionResult Index()  
10.             {  
11.                 return View(_db.MovieSet.ToList());  
12.             }  
13.         }  
14.     }   

 

 

 

       Index() 方法返回一个Index 的视图。所以我们需要创建这个视图来展示电影资料库的列表，请按照以下步骤操作:

1.    在添加视图之前你需要重新生成你的解决方案 。右击Index() 方法在代码编辑器里面选择菜单选项 iAdd View (如 图 9).

2.   在添加视图的对话框中, 勾选Create astrongly-typed view 选项.

3.   从View content 下拉列表中选择 List选项。

4.   从 View data class 下拉列表中,选择 valueMovieApp.Models.Movie

5.   点击Add 按扭确认添加新视图(见 图 10).

当你完成以上步骤后，将新的视图命名为 Index.aspx F�p�pan>并被添加到 Views/Home 文件夹中. Index view 代码包含在 列表 3中。

 

 

图 9

 

图 10

 

 

Listing 3 – Views/Home/Index.aspx

 

[c-sharp] view plaincopy

1. <%@ Page Title="" Language="C#" MasterPageFile="/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MovieApp.Models.Movie>>" %>   
2.    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">  
3.       Index  
4.    </asp:Content>   
5.    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   
6.        <h2>Index</h2>   
7.        <table>  
8.            <tr>  
9.                <th></th>  
10.                <th>  
11.                    Id  
12.                </th>  
13.                <th>  
14.                    Title  
15.                </th>  
16.                <th>  
17.                    Director  
18.                </th>  
19.                <th>  
20.                    DateReleased  
21.                </th>  
22.            </tr>   
23.        <% foreach (var item in Model) { %>  
24.          
25.            <tr>  
26.                <td>  
27.                    <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |  
28.                    <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>  
29.                </td>  
30.                <td>  
31.                    <%= Html.Encode(item.Id) %>  
32.                </td>  
33.                <td>  
34.                    <%= Html.Encode(item.Title) %>  
35.                </td>  
36.                <td>  
37.                    <%= Html.Encode(item.Director) %>  
38.                </td>  
39.                <td>  
40.                    <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>  
41.                </td>  
42.            </tr>  
43.          
44.        <% } %>   
45.        </table>   
46.        <p>  
47.            <%= Html.ActionLink("Create New", "Create") %>  
48.        </p>   
49.    </asp:Content>   
50.       

 

 

 

 

       Index 视图通过HTMLtable展示从数据表Movies中的所有记录。视图通过对ViewData Model属性进行迭代用 foreach语句展示出

 

来。如果你要运行此应用程序请按F5键，你就可以看到页面了（如图11）

图 11

 

 

创建新的数据记录

         Index 视图创建的时候包含了一个创建新的数据记录的链接。让我们从头再来，创建一个能新建的数据记录的视图 。

Home controller 中有两个名称为 Create()的方法。第一个 Create() 方法没有参数。

这个Create() 方法将用来显示创建新的电影资料库的 HTML form 。

第二个Create() 方法拥有一个 FormCollection 参数. 这个 Create() 方法是在创建新的电影提交到服务器上的时候被调用的。

第二个 Create() 已经修改了HomeController的代码 如列4所示。新的Create() 接收  Movie参数并且包含插入新的电影到Movies 数据

 

表中的逻辑代码。

列表 4 –Controllers/HomeController.cs (修改 Create 方法代码) 

 

[c-sharp] view plain copy

1. //  
2.             // GET: /Home/Create   
3.             public ActionResult Create()  
4.             {  
5.                 return View();  
6.             }    
7.             //  
8.             // POST: /Home/Create   
9.             [AcceptVerbs(HttpVerbs.Post)]  
10.             public ActionResult Create([Bind(Exclude="Id")] Movie movieToCreate)  
11.             {  
12.                  if (!ModelState.IsValid)  
13.                     return View();   
14.                 _db.AddToMovieSet(movieToCreate);  
15.                 _db.SaveChanges();   
16.                 return RedirectToAction("Index");  
17.             }   

 

 

 

VS 能够很容易的创建一条电影数据记录 (如图 12)。请按以下步骤操作:

1.   在代码编辑器里右击Create()选择菜单选项Add View.

2.   勾选 Create astrongly-typed view

3.   从 View content 下拉列表中选择 Create项.

4.   从 View data class 下拉列表中选择 valueMovieApp.Models.Movie项.

5.   点击 Add按钮创建新的视图

 

图 12

 

 

VS自动生成了视图列表 5中的代码。视图包含的 HTML form 包含了每个Movie的属性。

列表 5 – Views/Home/Create.aspx

[c-sharp] view plaincopy

1. VS自动生成了视图列表 5中的代码。视图包含的 HTML form 包含了每个Movie的属性。  
2. 列表 5 – Views/Home/Create.aspx  

 

 

       当你完成了添加视图后，你就可以添加新的电影数据到数据库中了。按 F5 运行应用程序点击创建新记录的链接如图13所示。

如果你完成了新的新数据的提交，那么一条新的电影数据记录就产生了。

 

图 13

 

 

编辑数据库记录

         在前两的章节中我们讨论了如何列出和创建数据库记录，在最后一节中我们将讨论如何编辑数据库记录。

首先，我们需要生成编辑表单。这一步很简单VS会我们自动生成编辑表单的代码。

在代码编辑器里打开HomeController.cs 文件按如下步骤操作。

1.   在代码编辑器里右击 Edit() 方法选择菜单选项 Add View (如 图 14).

2.   勾选 Create astrongly-typed view.

3.   从 View content 下拉列表中选择 Edit项。

4.   从 View data class下拉列表中选择MovieApp.Models.Movie项

5.   点击 Add 添加新的视图

完成以上步骤后就有一个名称为Edit.aspx页面文件在 Views/Home 文件夹下。 这个视图包含有一个编辑电影记录的  HTML 表单。 

 

 

 

图 14

 

 

最后我们需要修改Home controller 中的代码来完成我们编辑数据库记录的功能。更新的HomeController 中编辑功能的代码如列表6。

列表 6 –Controllers/HomeController.cs (Edit methods) 

 

[c-sharp] view plain copy

1. //  
2.    // GET: /Home/Edit/5   
3.    public ActionResult Edit(int id)  
4.    {  
5.        var movieToEdit = (from m in _db.MovieSet  
6.                           where m.Id == id  
7.                           select m).First();   
8.        return View(movieToEdit);  
9.    }   
10.    //  
11.    // POST: /Home/Edit/5   
12.    [AcceptVerbs(HttpVerbs.Post)]  
13.    public ActionResult Edit(Movie movieToEdit)  
14.    {   
15.        var originalMovie = (from m in _db.MovieSet  
16.                             where m.Id == movieToEdit.Id  
17.                             select m).First();   
18.        if (!ModelState.IsValid)  
19.            return View(originalMovie);  
20.            _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit);  
21.            _db.SaveChanges();   
22.            return RedirectToAction("Index");  

 

 

 

 

综述

         这个教程的目的就是要让你拥有创建一个 ASP.NETMVC应用程序的经验。我希望你能发现创建一个ASP.NET MVC应用程序比起创

 

建ASP和ASP.NET 应用程序来说是如何的简单。在这次教程中我们只用到了ASP.NET MVC framework提供给我们的最基本的功能物征。

 

在以后的教程中我们将深入的学习如controllers,controller actions, views, view data, 和 HTML helpers等。

 

 

 

翻译原文地址:http://www.asp.net/mvc/tutorials/create-a-movie-database-application-in-15-minutes-with-asp-net-mvc-cs