迭代一 -- 创建应用程序
Iteration #1 -- Create the Application
在这个系列中,我们将从头至尾的创建一个Contact Management应用程序。我们可以通过它来管理联系信息,如名字、电话号码、电子邮件地址等等。
我们将通过迭代的方式开发这个应用,并在每次迭代的过程中逐渐的扩展和改善该应用程序。 本次迭代
在第一次迭代中,我们先建立最基本最简单的应用程序,然后在接下来的迭代中,逐渐改善程序的设计。
Contact Manager是一个基本的数据库驱动的应用程序。你可以使用它建立新的联系人,编辑已存在的联系人亦或者删除这些联系人。 本次迭代我们将完成如下步骤:
ASP.NET MVC应用程序。 建立数据库来存储Contacts。
用Microsoft Entity Framework为数据库生成一个实体模型。
建立一个controller action以及一个view来列出数据库中的所有联系人。 建立controller action以及view向数据库添加新的联系人。
建立controller action以及view 实现修改数据库中现有的联系人记录。
建立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的窗口中点击右键并选择删除。删除的列表如下: \\Controllers\\HomeController.cs \\Views\\Home\\About.cshtml \\Views\\Home\\Index.cshtml 同时测试项目里删除如下:
\\Controllers\\HomeControllerTest.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。 通过以下几步来建立:
在右击Models文件夹(在解决方案资源管理器中,以下省略~这个搞成中文真囧~)选择添加-》新建项打开添加新项窗口(图06)。
模板目录选择数据,模板里选择ADO.NET实体数据模型,名称填写ContactManagerModel.edmx后点添加打开实体数据模型向导(图06). 模型内容界面选择从数据库生产(图7).
数据连接选择步骤,选择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 - Controllers\\HomeController.cs
print?
001 usingSystem;
002 usingSystem.Collections.Generic; 003 usingSystem.Linq; 004 usingSystem.Web;
005 usingSystem.Web.Mvc; 006
007 namespaceContactManager.Controllers 008 {
009 publicclassHomeController : Controller 010 {
011 //
012 // GET: /Home/ 013
014 publicActionResult Index() 015 {
016 returnView(); 017 } 018
019 //
020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 0 055 056 057 058 059 060 061 062 063 // GET: /Home/Details/5
publicActionResult Details(intid) {
returnView(); }
//
// GET: /Home/Create
publicActionResult Create() {
returnView(); }
//
// POST: /Home/Create
[HttpPost]
publicActionResult Create(FormCollection collection) {
try {
// TODO: Add insert logic here
returnRedirectToAction(\"Index\"); }
catch {
returnView(); } } //
// GET: /Home/Edit/5
publicActionResult Edit(intid) {
returnView(); }
//
// POST: /Home/Edit/5
0 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 0 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 [HttpPost]
publicActionResult Edit(intid, FormCollection collection) {
try {
// TODO: Add update logic here
returnRedirectToAction(\"Index\"); }
catch {
returnView(); } }
//
// GET: /Home/Delete/5
publicActionResult Delete(intid) {
returnView(); }
//
// POST: /Home/Delete/5
[HttpPost]
publicActionResult Delete(intid, FormCollection collection) {
try {
// TODO: Add delete logic here
returnRedirectToAction(\"Index\"); }
catch {
returnView(); } } } }
Contacts列表
要列出Contacts 表的记录,我们需要创建Index的action和view。Home controller
已经生成了Index() action,修改如下:
Listing 2 - Controllers\\HomeController.cs
print? 01 ...
02 usingContactManager.Models; 03 04 ...
0 privateContactManagerDBEntities 5 =newContactManagerDBEntities(); 06 //
07 // GET: /Home/ 08
09 publicActionResult Index() 10 {
11 returnView(_entities.Contacts.ToList()); 12 } 13 ...
_entities
注意引用ContactManager.Models!这里编译一下整个解决方案,不然在action上右击添加视图会出问题。在index()上右击选添加视图打开添加视图窗口。
图12 添加视图
图13 添加视图
名称自动生成为Index,选择创建强类型视图模型类里选择Contact,支架模板里选择List,母版也选择/Views/Shared/_Layout.cshtml。可以看到index的view如下: Listing 3 - Views\\Home\\Index.cshtml
print?
01 @model IEnumerable 04 ViewBag.Title =\"Index\"; 05 Layout =\"~/Views/Shared/_Layout.cshtml\"; 06 } 07 08 11 @Html.ActionLink(\"Create New\12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 FirstName LastName Phone Email @foreach(var iteminModel) { @Html.ActionLink(\"Edit\ @Html.ActionLink(\"Details\ @Html.ActionLink(\"Delete\ @item.FirstName @item.LastName @item.Phone @item.Email 本系列我们不做联系人的详细界面,所以删除上面的@Html.ActionLink(\"Details\\"Details\,这时可以按F5运行程序看看效果了(图14)。 创建新联系人 Creating New Contacts 要添加新联系人信息,我们要在Home controller里添加2个Create() actions,一个用来返回创建联系人的HTML表单,另外一个来执行实际的数据库插入操作。Create()方法代码如下: Listing 4 - Controllers\\HomeController.cs (with Create methods) print? 01 // 02 // GET: /Home/Create 03 04 publicActionResult Create() 05 { 06 returnView(); 07 } 08 09 // 10 // POST: /Home/Create 11 12 [AcceptVerbs(HttpVerbs.Post)] 1publicActionResult 3 contactToCreate) 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Create([Bind(Exclude =\"Id\")] Contact { if(!ModelState.IsValid) returnView(); try { _entities.AddToContactSet(contactToCreate); _entities.SaveChanges(); returnRedirectToAction(\"Index\"); } catch { returnView(); } } 第一个Create()在HTTP GET时候被调用,它只是简单的返回一个用来添加联系人的表单,而第二个Create()只有在HTTP POST时候才会被调用,它往数据库里添加新联系人。 第二个Create()方法接收一个Contact的实例。表单值提交后被MVC框架自动的绑定到contact类,每一个表单域对应contact的一个属性。[Bind]属性绑定主键Id。和上面一样在create方法上右击选择添加视图(图16)。 图16 添加视图窗口里选择如下(图17): 图 17: 添加视图 添加后自动生成的Create的view如下. Listing 5 - Views\\Home\\Create.cshtm print? 01 @model ContactManager.Models.Contact 02 03 @{ 04 ViewBag.Title =\"Create\"; 05 Layout =\"~/Views/Shared/_Layout.cshtml\"; 06 } 07 08 1 12 13 @using(Html.BeginForm()) { 14 @Html.ValidationSummary(true) 15 Index
09 10
}Create
09
21 22 @Html.EditorFor(model => model.FirstName) 23 @Html.ValidationMessageFor(model => model.FirstName) 24
26 27 @Html.LabelFor(model => model.LastName) 28
29 30 @Html.EditorFor(model => model.LastName) 31 @Html.ValidationMessageFor(model => model.LastName) 32
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 55 56 } 57 @Html.ActionLink(\"Back to List\58 现在运行程序可以点击Create New菜单到创建页面(图18) 图 18: 创建页面 修改联系人 Editing Contacts 修改Conntroller里的Edit方法如下: Listing 6 - Controllers\\HomeController.cs (with Edit methods)print? 01 // 02 // GET: /Home/Edit/5 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 publicActionResult Edit(int id) { var contactToEdit = (from c in _entities.Contacts where c.Id == id select c).FirstOrDefault(); returnView(contactToEdit); } // // POST: /Home/Edit/5 [HttpPost] publicActionResult Edit(Contact contactToEdit) { if(!ModelState.IsValid) returnView(); try { var originalContact = (from c in _entities.Contacts where c.Id == contactToEdit.Id select c).FirstOrDefault(); //_entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit); _entities.ApplyCurrentValues _entities.SaveChanges(); returnRedirectToAction(\"Index\"); } catch { returnView(); } } 第一个Edit方法显示页面,第二个处理post的数据。在Edit方法上右击选择添加视图打开添加视图界面,选择如下(图19) 图 19: 添加eidt视图 添加完成生成如下代码: Listing 7 - Views\\Home\\Edit.cshtml print? 01 @model ContactManager.Models.Contact 02 03 @{ 04 ViewBag.Title =\"Edit\"; 05 Layout =\"~/Views/Shared/_Layout.cshtml\"; 06 } 07 08 1 12 13 @using(Html.BeginForm()) { 14 @Html.ValidationSummary(true) 15 59 @Html.ActionLink(\"Back to List\60 删除联系人 Deleting Contacts 修改Delete方法如下: Listing 8 - Controllers\\HomeController.cs (Delete methods) print? 01 // GET: /Home/Delete/5 02 03 publicActionResult Delete(int id) 04 { 05 var contactToDelete = (from c in _entities.Contacts 06 where c.Id == id 07 select c).FirstOrDefault(); 08 09 returnView(contactToDelete); 10 } 11 12 // 13 // POST: /Home/Delete/5 14 15 [HttpPost] 16 Public ActionResult Delete(Contact contactToDelete) 17 { 18 try 19 { 20 var originalContact = (from c in _entities.Contacts 21 where c.Id == contactToDelete.Id 22 select c).FirstOrDefault(); 23 24 _entities.DeleteObject(originalContact); 25 _entities.SaveChanges(); 26 Return RedirectToAction(\"Index\"); 27 } 28 catch 29 30 31 32 33 { returnView(); } } 同样为Dlete添加视图后运行。点击Delete到确认页面(图20): 图20: 删除确认页面 重命名默认的Controller 系统为我们默认生成的Controller有时候并不是我们需要的,在类名上右击选择重构-》重命名打开重命名界面(图21) 图21: 重命名controller 图22重命名界面 重命名之后Visual Studio 会自动去改动view文件夹里的相关东西。如\\Views\\Home 文件夹改为\\Views\\Contact文件夹。 这时候运行会出错,需要同步修改Global.asax 里的默认路由。 print? 1 routes.MapRoute( 2 \"Default\路由名称 3 \"{controller}/{action}/{id}\带有参数的 URL new{ controller =\"Contact\action =\"Index\id = 4 UrlParameter.Optional }// 参数默认值 5 ); 摘要 在第一次迭代里,我们创建了Contact Manager 的各项基本功能(增删改查),充分利用了vs2010的自动生成Controller和view的强大,也体会到了ef框架带给我们的便利。 在下一次的迭代中,我们将修改母版页的css来提升应用体验。还有我们将为表单添加验证等…… 因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- igat.cn 版权所有 赣ICP备2024042791号-1
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务
Edit
09