MVC3.0 快速入门教程.doc

系列将演示如何通过ASP.NET MVC framework结合单元测试、TDD、Ajax、软件设计原则及设计模式创建一个完整的Contact Manager应用。本系列共七个章节，也是七次迭代过程。我是在紫色永恒的博客看到文章后开始实践这个系列的。开发环境是ASP.NET MVC 3.0（Razor），Visual Studio 2010SP1，SQL2008。由于和上面两文里的环境不同，代码相对来说有部分变化，所以我也对照上两文记录一下我的实践过程。疏漏之处请拍砖迭代一 - 创建应用程序Iteration #1 - Create the Application在这个系列中，我们将从头至尾的创建一个Contact Management应用程序。我们可以通过它来管理联系信息，如名字、电话号码、电子邮件地址等等。我们将通过迭代的方式开发这个应用，并在每次迭代的过程中逐渐的扩展和改善该应用程序。本次迭代在第一次迭代中，我们先建立最基本最简单的应用程序，然后在接下来的迭代中，逐渐改善程序的设计。Contact Manager是一个基本的数据库驱动的应用程序。你可以使用它建立新的联系人，编辑已存在的联系人亦或者删除这些联系人。本次迭代我们将完成如下步骤：1 ASP.NET MVC应用程序。2 建立数据库来存储Contacts。3 用Microsoft Entity Framework为数据库生成一个实体模型。4 建立一个controller action以及一个view来列出数据库中的所有联系人。5 建立controller action以及view向数据库添加新的联系人。6 建立controller action以及view 实现修改数据库中现有的联系人记录。7 建立controller action以及view实现对数据库中已存在的联系人的删除操作。开发环境开发环境是ASP.NET MVC 3.0（Razor），Visual Studio 2010SP1，SQL2008。如果没有ASP.NET MVC 3.0请通过web平台安装程序安装：建立ASP.NET MVC 项目运行vs2010然后选择新建项目。在新建项目窗口选择c# web模板里的ASP.NET MVC 3 Web应用程序。项目名称输入ContactManager后按确定建立（如图1）。图1.新建项目点击确定后，跳转到图2。在这个界面可以选择模板的具体类型是空模板还是示例应用程序，我们选Internet应用程序。接下来是视图引擎选择，传统的ASPX还是新发布的Razor，这里我们选择Razor引擎。这里我们还要创建单元测试项目ContactManager.Tests，因为在以后的迭代里我们计划加入单元测试。在创建mvc项目时添加测试项目要比完成时再添加要简单多了。图2.创建单元测试及选择Razor引擎点击确定我们就创建了一个MVC3.0的应用程序。可以在解决方案资源管理器中看到图3。如果看不到解决方案资源管理器窗口请到视图里打开（或者按CTRL+W打开）。注意：解决方案里包括了两个项目：ASP.NET MVC项目和测试项目。名字分别为ContactManager、ContactManager.图3.解决方案资源管理器删除项目里的sample文件创建的实例项目里包含很多的controllers 和views的sample文件。在我们往下做之前先删除掉没用的文件。（实际项目里可以在创建的项目模板里图2选择空）在图3的窗口中点击右键并选择删除。删除的列表如下：ControllersHomeController.csViewsHomeAbout.cshtmlViewsHomeIndex.cshtml同时测试项目里删除如下:ControllersHomeControllerTest.cs建立数据库Contact Manager 是一个数据库驱动的web应用，所以我们建立一个数据库来存储contact信息。本系列我们使用sql server2008。安装vs2010时候已经一起安装，如果你选择了的话：）右击解决方案资源管理器中的App_Data文件夹选择 添加-新建项，然后如图4，选择数据模板里的SQLServer数据库，名称填入ContactManagerDB.mdf 按添加。图 04: 建立数据库建立数据库完成后，App_Data文件夹里可以看到ContactManagerDB.mdf。双击ContactManagerDB.mdf打开服务器资源管理器连接数据库。在表上右击选择添加新表打开表设计器（图05）.第一个字段Id右键设置成主键并且设置为增量种子，具体如图。完成后保存为表Contacts图 05: 表设计器在创建完表后右击表Contacts，选择显示表数据，然后添加几条数据来进行后面的测试。建立数据实体模型我们要为上面创建的Contacts创建一个实体模型。本系列我们使用Microsoft Entity Framework 来创建（简称EF）。当然也可以用其他的框架，例如NHibernate, LINQ to SQL, or ADO.NET。通过以下几步来建立:89 在右击Models文件夹（在解决方案资源管理器中，以下省略这个搞成中文真囧）选择添加-新建项打开添加新项窗口（图06）。10 模板目录选择数据，模板里选择ADO.NET实体数据模型，名称填写ContactManagerModel.edmx后点添加打开实体数据模型向导(图06).11 模型内容界面选择从数据库生产(图7).12 数据连接选择步骤，选择ContactManagerDB.mdf 数据库，将Web.Config实体连接另存为ContactManagerDBEntities (图 8).选择数据库对象，选中表前面的复选框。模型将包含所有数据库中的表（现在只有一个Contacts），模型命名空间输入ContactManagerDBModel，选中确定生成对象的单复数形式（图9）图 06: 添加新项图 07: 选择模型内容图 08: 选择数据连接图 09: 选择数据库对象完成向导后会自动打开数据实体模型设计界面。可以看到一个类Contact（图10）图10: 类Contact这里我们已经创建了数据库模型，我们可以使用Contact 类代表数据库的contact 记录。创建Home Controller下面创建我们的Home controller。Home controller是mvc应用的默认入口。在Controllers 文件夹右击，选择添加-控制器（图11）。.注意选上图中的复选框来自动生成创建、更新、删除等方法.图 11: 添加Home Conntroller创建完后得到如下代码的类Listing 1 - ControllersHomeController.csview sourceprint?001usingSystem;002usingSystem.Collections.Generic;003usingSystem.Linq;004usingSystem.Web;005usingSystem.Web.Mvc;006 007namespaceContactManager.Controllers008009 publicclassHomeController : Controller010 011 /012 / GET: /Home/013 014 publicActionResult Index()015 016 returnView();017 018 019 /020 / GET: /Home/Details/5021 022 publicActionResult Details(intid)023 024 returnView();025 026 027 /028 / GET: /Home/Create029 030 publicActionResult Create()031 032 returnView();033 034 035 /036 / POST: /Home/Create037 038 HttpPost039 publicActionResult Create(FormCollection collection)040 041 try042 043 / TODO: Add insert logic here044 045 returnRedirectToAction(Index);046 047 catch048 049 returnView();050 051 052 053 /054 / GET: /Home/Edit/5055 056 publicActionResult Edit(intid)057 058 returnView();059 060 061 /062 / POST: /Home/Edit/5063 064 HttpPost065 publicActionResult Edit(intid, FormCollection collection)066 067 try068 069 / TODO: Add update logic here070 071 returnRedirectToAction(Index);072 073 catch074 075 returnView();076 077 078 079 /080 / GET: /Home/Delete/5081 082 publicActionResult Delete(intid)083 084 returnView();085 086 087 /088 / POST: /Home/Delete/5089 090 HttpPost091 publicActionResult Delete(intid, FormCollection collection)092 093 try094 095 / TODO: Add delete logic here096 097 returnRedirectToAction(Index);098 099 catch100 101 returnView();102 103 104 105Contacts列表要列出Contacts 表的记录，我们需要创建Index的action和view。Home controller 已经生成了Index() action，修改如下：Listing 2 - ControllersHomeController.csview sourceprint?01.02usingContactManager.Models;03 04.05 privateContactManagerDBEntities _entities =newContactManagerDBEntities();06 /07 / GET: /Home/08 09 publicActionResult Index()10 11 returnView(_entities.Contacts.ToList();12 13.注意引用ContactManager.Models！这里编译一下整个解决方案，不然在action上右击添加视图会出问题。在index（）上右击选添加视图打开添加视图窗口。图12 添加视图图13 添加视图名称自动生成为Index，选择创建强类型视图模型类里选择Contact，支架模板里选择List，母版也选择/Views/Shared/_Layout.cshtml。可以看到index的view如下：Listing 3 - ViewsHomeIndex.cshtmlview sourceprint?01model IEnumerable02 0304 ViewBag.Title =Index;05 Layout =/Views/Shared/_Layout.cshtml;0607 08Index09 1011 Html.ActionLink(Create New,Create)121314 15 16 17 FirstName18 19 20 LastName21 22 23 Phone24 25 26 Email27 28 29 30foreach(var iteminModel) 31 32 33 Html.ActionLink(Edit,Edit,new id=item.Id ) |34 Html.ActionLink(Details,Details,new id=item.Id ) |35 Html.ActionLink(Delete,Delete,new id=item.Id )36 37 38 item.FirstName39 40 41 item.LastName42 43 44 item.Phone45 46 47 item.Email48 49 5051 52 本系列我们不做联系人的详细界面，所以删除上面的Html.ActionLink(Details, Details, new id=item.Id ) | ，这时可以按F5运行程序看看效果了（图14）。创建新联系人 Creating New Contacts要添加新联系人信息，我们要在Home controller里添加2个Create() actions，一个用来返回创建联系人的HTML表单，另外一个来执行实际的数据库插入操作。Create（）方法代码如下：Listing 4 - ControllersHomeController.cs (with Create methods)view sourceprint?01/02/ GET: /Home/Create03 04publicActionResult Create()0506 returnView();07 08 09/10/ POST: /Home/Create11 12AcceptVerbs(HttpVerbs.Post)13publicActionResult Create(Bind(Exclude =Id) Contact contactToCreate)1415 if(!ModelState.IsValid)16 returnView();17 18 try19 20 _entities.AddToContactSet(contactToCreate);21 _entities.SaveChanges();22 returnRedirectToAction(Index);23 24 catch25 26 returnView();27 28第一个Create（）在HTTP GET时候被调用,它只是简单的返回一个用来添加联系人的表单，而第二个Create（）只有在HTTP POST时候才会被调用，它往数据库里添加新联系人。第二个Create（）方法接收一个Contact的实例。表单值提交后被MVC框架自动的绑定到contact类，每一个表单域对应contact的一个属性。Bind属性绑定主键Id。和上面一样在create方法上右击选择添加视图（图16）。图16添加视图窗口里选择如下（图17）：图 17: 添加视图添加后自动生成的Create的view如下.Listing 5 - ViewsHomeCreate.cshtmview sourceprint?01model ContactManager.Models.Contact02 0304 ViewBag.Title =Create;05 Layout =/Views/Shared/_Layout.cshtml;0607 08Create09 101112 13using(Html.BeginForm() 14 Html.ValidationSummary(true)15 16 Contact17 18 19 Html.LabelFor(model = model.FirstName)20 21 22 Html.EditorFor(model = model.FirstName)23 Html.ValidationMessageFor(model = model.FirstName)24 25 26 27 Html.LabelFor(model = model.LastName)28 29 30 Html.EditorFor(model = model.LastName)31 Html.ValidationMessageFor(model = model.LastName)32 33 34 35 Html.LabelFor(model = model.Phone)36 37 38 Html.EditorFor(model = model.Phone)39 Html.ValidationMessageFor(model = model.Phone)40 41 42 43 Html.LabelFor(model = model.Email)44 45 46 Html.EditorFor(model = model.Email)47 Html.ValidationMessageFor(model = model.Email)48 49 50 51 52 53 5455 5657 Html.ActionLink(Back to List,Index)58现在运行程序可以点击Create New菜单到创建页面(图18)图 18: 创建页面修改联系人 Editing Contacts修改Conntroller里的Edit方法如下:Listing 6 - ControllersHomeController.cs (with Edit methods)view sourceprint?01/02/ GET: /Home/Edit/503 04publicActionResult Edit(int id)0506 var contactToEdit = (from c in _entities.Contacts 07 where c.Id = id08 select c).FirstOrDefault();09 returnView(contactToEdit);1011 12/13/ POST: /Home/Edit/514 15HttpPost16publicActionResult Edit(Contact contactToEdit)1718 if(!ModelState.IsValid)19 returnView();20 try21 22 var originalContact = (from c in _entities.Contacts23 where c.Id = contactToEdit.Id24 select c).FirstOrDefault();25 /_entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);26 _entities.ApplyCurrentValues(originalContact.EntityKey.EntitySetName, contactToEdit);27 _entities.SaveChanges();28 returnRedirectToAction(Index);29 30 catch31 32 returnView();33 34第一个Edit方法显示页面,第二个处理post的数据。在Edit方法上右击选择添加视图打开添加视图界面，选择如下（图19）图 19: 添加eidt视图添加完成生成如下代码：Listing 7 - ViewsHomeEdit.cshtmlview sourceprint?01model ContactManager.Models.Contact02 0304 ViewBag.Title =Edit;05 Layout =/Views/Shared/_Layout.cshtml;0607 08Edit09 101112 13using(Html.BeginForm() 14 Html.ValidationSummary(true)15 16 Contact17 18 Html.HiddenFor(model = model.Id)19 20 21 Html.LabelFor(model = model.FirstName)22 23 24 Html.EditorFor(model = model.FirstName)25 Html.ValidationMessageFor(model = model.FirstName)26 27 28 29 Html.LabelFor(model = model.LastName)30 31 32 Html.EditorFor(model = model.LastName)33 Html.ValidationMessageFor(model = model.LastName)34 35 36 37 Html.LabelFor(model = model.Phone)38 39 40 Html.EditorFor(model = model.Phone)41 Html.ValidationMessageFor(model = model.Phone)42 43 44 45 Html.LabelFor(model = model.Email)46 47 48 Html.EditorFor(model = model.Email)49 Html.ValidationMessageFor(model = model.Email)50 51 52 53 54 55 5657 5859 Html.ActionLink(Back to List,Index)60删除联系人 Deleting Contacts修改Delete方法如下：Listing 8 - ControllersHomeController.cs (Delete methods)view sourceprint?01/ GET: /Home/Delete/502 03publicActionResult Delete(int id)0405 var contactToDelete = (