[ASP.NET MVC3.0]Contact Manager 之迭代开发 一

时间  2019-11-22
标签 asp.net asp mvc3.0 mvc contact manager 迭代 开发 栏目 ASP 繁體版
原文   原文链接

原文地址：http://www.asp.net/mvc/tutorials/iteration-1-create-the-application-cs javascript

紫色永恒的翻译：http://www.cnblogs.com/024hi/archive/2009/03/19/ASP_NET_MVC_SAMPLE_CONTACT_MANAGER_1.html css

系列将演示如何经过ASP.NET MVC framework结合单元测试、TDD、Ajax、软件设计原则及设计模式建立一个完整的Contact Manager应用。本系列共七个章节，也是七次迭代过程。我是在紫色永恒的博客看到文章后开始实践这个系列的。开发环境是ASP.NET MVC 3.0（Razor），Visual Studio 2010SP1，SQL2008。因为和上面两文里的环境不一样，代码相对来讲有部分变化，因此我也对照上两文记录一下个人实践过程。疏漏之处请拍砖~ html

迭代一 -- 建立应用程序
Iteration #1 -- Create the Application

在这个系列中，咱们将从头到尾的建立一个Contact Management应用程序。咱们能够经过它来管理联系信息，如名字、电话号码、电子邮件地址等等。 java

咱们将经过迭代的方式开发这个应用，并在每次迭代的过程当中逐渐的扩展和改善该应用程序。 jquery

本次迭代 web

在第一次迭代中，咱们先创建最基本最简单的应用程序，而后在接下来的迭代中，逐渐改善程序的设计。 sql

Contact Manager是一个基本的数据库驱动的应用程序。你可使用它创建新的联系人，编辑已存在的联系人亦或者删除这些联系人。 数据库

本次迭代咱们将完成以下步骤： c#

  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平台安装程序安装：

image

创建ASP.NET MVC 项目

运行vs2010而后选择新建项目。在新建项目窗口选择c# web模板里的ASP.NET MVC 3 Web应用程序。项目名称输入ContactManager后按肯定创建（如图1）。

image

图1.新建项目

点击肯定后，跳转到图2。在这个界面能够选择模板的具体类型是空模板仍是示例应用程序，咱们选Internet应用程序。接下来是视图引擎选择，传统的ASPX仍是新发布的Razor，这里咱们选择Razor引擎。这里咱们还要建立单元测试项目ContactManager.Tests，由于在之后的迭代里咱们计划加入单元测试。在建立mvc项目时添加测试项目要比完成时再添加要简单多了。

image

图2.建立单元测试及选择Razor引擎

点击肯定咱们就建立了一个MVC3.0的应用程序。能够在解决方案资源管理器中看到图3。若是看不到解决方案资源管理器窗口请到视图里打开（或者按CTRL+W打开）。

注意：解决方案里包括了两个项目：ASP.NET MVC项目和测试项目。名字分别为ContactManager、ContactManager.

image

图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 按添加。

image

图 04: 创建数据库

创建数据库完成后，App_Data文件夹里能够看到ContactManagerDB.mdf。双击ContactManagerDB.mdf打开服务器资源管理器链接数据库。在表上右击选择添加新表打开表设计器（图05）.第一个字段Id右键设置成主键而且设置为增量种子，具体如图。完成后保存为表Contacts

image

图 05: 表设计器

在建立完表后右击表Contacts，选择显示表数据，而后添加几条数据来进行后面的测试。

创建数据实体模型

咱们要为上面建立的Contacts建立一个实体模型。本系列咱们使用Microsoft Entity Framework 来建立（简称EF）。固然也能够用其余的框架，例如NHibernate, LINQ to SQL, or ADO.NET。

经过如下几步来创建:

  1. 在右击Models文件夹（在解决方案资源管理器中，如下省略~这个搞成中文真囧~）选择添加-》新建项打开添加新项窗口（图06）。
  2. 模板目录选择数据，模板里选择ADO.NET实体数据模型，名称填写ContactManagerModel.edmx后点添加打开实体数据模型向导(图06).
  3. 模型内容界面选择从数据库生产(图7).
  4. 数据链接选择步骤，选择ContactManagerDB.mdf 数据库，将Web.Config实体链接另存为ContactManagerDBEntities (图 8).
  5. 选择数据库对象，选中表前面的复选框。模型将包含全部数据库中的表（如今只有一个Contacts），模型命名空间输入ContactManagerDBModel，选中肯定生成对象的单复数形式（图9）

    image

图 06: 添加新项

image

图 07: 选择模型内容

image

图 08: 选择数据链接

image

图 09: 选择数据库对象

完成向导后会自动打开数据实体模型设计界面。能够看到一个类Contact（图10）

image

图10: 类Contact

这里咱们已经建立了数据库模型，咱们可使用Contact 类表明数据库的contact 记录。

建立Home Controller

下面建立咱们的Home controller。Home controller是mvc应用的默认入口。

在Controllers 文件夹右击，选择添加-》控制器（图11）。.注意选上图中的复选框来自动生成建立、更新、删除等方法.

image

图 11: 添加Home Conntroller

建立完后获得以下代码的类

Listing 1 - Controllers\HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ContactManager.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

        [HttpPost]
        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

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

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

        //
        // POST: /Home/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here
 
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

Contacts列表

要列出Contacts 表的记录，咱们须要建立Index的action和view。Home controller 已经生成了Index() action，修改以下：

Listing 2 - Controllers\HomeController.cs 

...
using ContactManager.Models;

...
        private ContactManagerDBEntities _entities = new ContactManagerDBEntities();
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View(_entities.Contacts.ToList());
        }
...

注意引用ContactManager.Models！这里编译一下整个解决方案，否则在action上右击添加视图会出问题。在index（）上右击选添加视图打开添加视图窗口。

image

图12 添加视图

image

图13 添加视图

名称自动生成为Index，选择建立强类型视图模型类里选择Contact，支架模板里选择List，母版也选择/Views/Shared/_Layout.cshtml。能够看到index的view以下：

Listing 3 - Views\Home\Index.cshtml

@model IEnumerable<ContactManager.Models.Contact>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th></th>
        <th>
            FirstName
        </th>
        <th>
            LastName
        </th>
        <th>
            Phone
        </th>
        <th>
            Email
        </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 }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>
            @item.FirstName
        </td>
        <td>
            @item.LastName
        </td>
        <td>
            @item.Phone
        </td>
        <td>
            @item.Email
        </td>
    </tr>
}

</table>


 

本系列咱们不作联系人的详细界面，因此删除上面的@Html.ActionLink("Details", "Details", new { id=item.Id }) | ，这时能够按F5运行程序看看效果了（图14）。

image

建立新联系人 Creating New Contacts

要添加新联系人信息，咱们要在Home controller里添加2个Create() actions，一个用来返回建立联系人的HTML表单，另一个来执行实际的数据库插入操做。Create（）方法代码以下：

Listing 4 - Controllers\HomeController.cs (with Create methods)

//
// GET: /Home/Create

public ActionResult Create()
{
    return View();
} 

//
// POST: /Home/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    if (!ModelState.IsValid)
        return View();

    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

第一个Create（）在HTTP GET时候被调用,它只是简单的返回一个用来添加联系人的表单，而第二个Create（）只有在HTTP POST时候才会被调用，它往数据库里添加新联系人。

第二个Create（）方法接收一个Contact的实例。表单值提交后被MVC框架自动的绑定到contact类，每个表单域对应contact的一个属性。[Bind]属性绑定主键Id。和上面同样在create方法上右击选择添加视图（图16）。

image

图16

添加视图窗口里选择以下（图17）：

image

图 17: 添加视图

添加后自动生成的Create的view以下.

Listing 5 - Views\Home\Create.cshtm

@model ContactManager.Models.Contact

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Contact</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

如今运行程序能够点击Create New菜单到建立页面(图18)

image

图 18: 建立页面

修改联系人 Editing Contacts

修改Conntroller里的Edit方法以下:

Listing 6 - Controllers\HomeController.cs (with Edit methods)

//
// GET: /Home/Edit/5

public ActionResult Edit(int id)
{
    var contactToEdit = (from c in _entities.Contacts
                         where c.Id == id
                         select c).FirstOrDefault();
    return View(contactToEdit);
}

//
// POST: /Home/Edit/5

[HttpPost]
public ActionResult Edit(Contact contactToEdit)
{
    if (!ModelState.IsValid)
        return View();
    try
    {
        var originalContact = (from c in _entities.Contacts
                               where c.Id == contactToEdit.Id
                               select c).FirstOrDefault();
        //_entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.ApplyCurrentValues<Contact>(originalContact.EntityKey.EntitySetName, contactToEdit);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

第一个Edit方法显示页面,第二个处理post的数据。在Edit方法上右击选择添加视图打开添加视图界面，选择以下（图19）

image

图 19: 添加eidt视图

添加完成生成以下代码：

Listing 7 - Views\Home\Edit.cshtml

@model ContactManager.Models.Contact

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Contact</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
删除联系人 Deleting Contacts

修改Delete方法以下：

Listing 8 - Controllers\HomeController.cs (Delete methods)

// GET: /Home/Delete/5

public ActionResult Delete(int id)
{
    var contactToDelete = (from c in _entities.Contacts
                           where c.Id == id
                           select c).FirstOrDefault();

    return View(contactToDelete);
}

//
// POST: /Home/Delete/5

[HttpPost]
public ActionResult Delete(Contact contactToDelete)
{
    try
    {
        var originalContact = (from c in _entities.Contacts
                               where c.Id == contactToDelete.Id
                               select c).FirstOrDefault();

        _entities.DeleteObject(originalContact);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }

}

一样为Dlete添加视图后运行。点击Delete到确认页面（图20）：

image

图20: 删除确认页面

重命名默认的Controller

系统为咱们默认生成的Controller有时候并非咱们须要的，在类名上右击选择重构-》重命名打开重命名界面（图21）

image

图21: 重命名controller

image

图22重命名界面

重命名以后Visual Studio 会自动去改动view文件夹里的相关东西。如\Views\Home 文件夹改成\Views\Contact文件夹。

这时候运行会出错，须要同步修改Global.asax 里的默认路由。

routes.MapRoute(
               "Default", // 路由名称
               "{controller}/{action}/{id}", // 带有参数的 URL
               new { controller = "Contact", action = "Index", id = UrlParameter.Optional } // 参数默认值
           );
摘要

在第一次迭代里，咱们建立了Contact Manager 的各项基本功能（增删改查），充分利用了vs2010的自动生成Controller和view的强大，也体会到了ef框架带给咱们的便利。

在下一次的迭代中，咱们将修改母版页的css来提高应用体验。还有咱们将为表单添加验证等……

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程