ASP.NET MVC3书店--第五节 表单编辑(第三部分）

 

5.7    创建数据添加视图

5.7.1        实现添加书籍所用方法

    现在我们已经可以使用我们的StoreManager控制器来对书籍进行编辑操作了。接下来，我们来看一下如何进行书籍的添加操作。

    与我们的编辑场景类似，我们将要在控制器类中使用两个不同的方法来实现对于书籍的添加操作。当首次访问“/StoreManager/Create”这个URL地址的时候，调用第一个方法来显示一个空白表单。当管理员在该表单中填写完毕书籍信息并且点击保存按钮，将表单值作为一个HTTP-POST请求来进行提交的时候调用第二个方法来进行在数据库中的书籍的保存工作。

5.7.2       实现响应HTTP-GET请求的方法

    我们通过第一个方法在添加书籍视图中显示一个空白表单，代码如下所示。

//

// GET: /StoreManager/Create

public ActionResult Create()

{

    ViewBag.Genres = storeDB.Genres.OrderBy(g => g.Name).ToList();

    ViewBag.Authors = storeDB.Authors.OrderBy(a => a.Name).ToList();

    var book = new Book();

    return View(book);

}

    注意：你可能已经注意到了我们在Create方法中的装载所有书籍种类信息（Genres）及所有作者（Authors）信息处直接拷贝了Edit方法中的代码。可以用多种方式将这段代码进行精简以避免这里的代码直接拷贝，但是为了尽量让代码简单易懂，所以这里在两个方法中使用相同的代码。

    在Create方法中点击鼠标右键，然后点击“添加视图”菜单，以添加一个新的用来创建书籍的强类型视图，添加方法如图5-15所示。

图5-15 创建添加书籍视图

    我们将要修改Visual Web Developer自动生成的Create.cshtml视图模板，调用Html.EditorFor()帮助器方法，就像在编辑视图中所作的那样，让该视图可以使用前面我们创建好的书籍编辑模板。修改代码如代码清单5-12所示（已经过笔者中文化处理）。

    代码清单5-12 添加书籍视图中的代码

@model MvcBookStore.Models.Book

@{

    ViewBag.Title = "添加书籍";

}

<h2>添加书籍</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>添加书籍</legend>

        @Html.EditorForModel()

        <p>

            <input type="submit" value="保存" />

        </p>

    </fieldset>

}

<div>

    @Html.ActionLink("返回书籍列表", "Index")

</div>

    重新运行应用程序，访问“/StoreManager/Create”这个URL地址。我们将看到一个空的书籍信息表单，如图5-16所示。

图5-16 添加书籍视图

    最后，我们在控制器中实现响应HTTP-POST请求的Create方法，当管理员填写完毕书籍信息并提交时将调用这个方法。代码如下所示。

//

// POST: /StoreManager/Create

[HttpPost]

 public ActionResult Create(Book book)

 {

    if (ModelState.IsValid)

    {

        //Save Book

        storeDB.Books.Add(book);

        storeDB.SaveChanges();

        return RedirectToAction("Index");

    }

    // Invalid – redisplay with errors

    ViewBag.Genres = storeDB.Genres.OrderBy(g => g.Name).ToList();

    ViewBag.Authors = storeDB.Authors.OrderBy(a => a.Name).ToList();

    return View(book);

 }

    这个方法与之前的Edit方法有一个区别，就是此处不是装入一个已经存在的Book(书籍)对象，并且调用UpdateModel方法，而是从方法的参数中接收一个Book(书籍)对象。ASP.NET MVC将自动创建这个Book对象，并将提交的表单值填入该对象的各属性。我们的代码将检查提交的表单值是否有效，如果有效则将这个Book对象中的数据保存到数据库中。

    运行应用程序并访问“/StoreManager/Create”这个URL地址，在表单中填入书籍信息，并点击保存按钮，如图5-17所示。

图5-17 在表单中填入书籍信息

    点击保存按钮后，应用程序将该书籍保存在数据库中，页面切换到书籍列表页面，如图5-18所示。

图5-18 书籍保存后页面返回到书籍列表页面

5.8    创建数据删除视图 

      有关删除操作与书籍的添加，编辑操作非常类似，使用一个方法来显示确认表单，另一个方法将书籍从数据库中删除。

    HTTP-GET请求时调用的方法与前面所讲述的Details方法中的代码完全一样，如下所示。

//

// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)

 {

    var book = storeDB.Books.Find(id);

 

    return View(book);

 }

    添加一个删除书籍时所用视图，如图5-19所示。

图5-19 删除书籍视图

    自动生成的该视图中显示模型中的所有属性，但是我们可以将其简化成如代码清单5-13中所示的代码。

    代码清单5-13 删除书籍视图中的代码

@model MvcBookStore.Models.Book

@{

    ViewBag.Title = "删除书籍";

}

<h2>删除确认</h2>

<p>确定要删除<strong>@Model.Title</strong>这本书吗?

</p>

@using (Html.BeginForm()) {

    <p>

        <input type="submit" value="删除" />

    </p>

    <p>

        @Html.ActionLink("返回书籍列表", "Index")

    </p>

}

    我们的HTTP-POST请求所调用的Delete方法应该执行如下操作。

  1.根据ID读取书籍。

  2.在数据库中删除该书籍

  3.重定向到一个简单的删除书籍视图模板，已标示删除成功。

  代码如下所示。

//

// POST: /StoreManager/Delete/5

[HttpPost]

 public ActionResult Delete(int id, FormCollection collection)

 {

    var book = storeDB.Books.Find(id);

 

    storeDB.Books.Remove(book);

    storeDB.SaveChanges();

    return View("Deleted");

}

    我们需要添加一个用来标示删除成功的视图。在删除方法中点击鼠标右键，追加一个强类型视图，如图5-20所示。

图5-20 添加标示书籍删除成功的视图

    在删除视图中显示一条提示信息，表示书籍删除成功，并添加一个返回到书籍列表页面的链接，代码如下所示。

@{

    ViewBag.Title = "书籍删除成功";

}

<h2>书籍删除成功</h2>

<p>该书籍已被成功删除.</p>

<p>

    @Html.ActionLink("点击这里", "Index")返回书籍列表页面.

</p>

    运行应用程序，访问“/StoreManager”这个URL地址。在书籍列表中选择一本书，点击删除链接，如图5-21所示。

图5-21 在书籍列表页面中选择一本书进行删除

    点击删除链接后，页面转到书籍删除视图，如图5-22所示。

图5-22 书籍删除视图

    点击删除按钮，该书籍从数据库中被删除后，页面转到书籍删除成功信息显示视图，如图5-23所示。

图5-23 书籍删除成功信息显示视图

    点击链接返回书籍列表页面，从书籍列表中可以看出该书籍已被删除，如图5-24所示。

图5-24 书籍删除后的书籍列表视图