9.1 实现数据的明细信息视图
首先,让我们来看一下如何实现一条数据的明细信息视图。为了更好地体会这一功能,首先我们在前文所述的电影清单视图(Views文件夹下面的Movies文件夹下面的Index.cshtml文件)中删除电影清单中的种类、票价、电影等级字段,使其代码如代码清单9-1中所示。
代码清单9-1 修改后的Index.cshtml文件
@model IEnumerable<MvcMovie.Models.Movie>
@{
ViewBag.Title = "电影清单";
}
<h2>我的电影清单</h2>
<p>
@Html.ActionLink("追加", "Create")
</p>
<table>
<tr>
<th></th>
<th>
电影名称
</th>
<th>
发行日期
</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.ActionLink("编辑", "Edit", new { id=item.ID }) |
@Html.ActionLink("查看明细", "Details", new { id=item.ID }) |
@Html.ActionLink("删除", "Delete", new { id=item.ID })
</td>
<td>
@item.Title
</td>
<td>
@String.Format("{0:d}", item.ReleaseDate)
</td>
</tr>
}
</table>
重新运行该应用程序,在浏览器中输入地址“http://localhost:xx/Movies”,浏览器中运行结果如图9-1所示。
图9-1 修改后的电影清单画面
现在电影清单画面中就只显示每条数据的电影名称与发行日期了,如果像查看该条数据的详细信息,需要点击每条数据的“查看明细”链接,将画面导航到明细数据画面,在该画面中查看这条数据的明细信息。当一条数据的细节信息比较多,而我们只想在该数据的列举清单中显示该数据的几个摘要信息,通过点击链接或按钮的操作来查看数据的细节信息时这种处理方法是比较有用的。
接下来让我们来追加这个明细数据视图。首先打开Movie控制器,追加一个返回明细数据视图的Details方法,代码如下所示。
//
// GET: /Movies/Details
public ActionResult Details(int id)
{
Movie movie = db.Movies.Find(id);
if (movie == null)
return RedirectToAction("Index");
return View("Details", movie);
}
code-first通过使用Find方法来让一条数据的寻找变得非常容易。这个方法的一个非常重要的安全特性就是我们可以确保我们寻找的是一条可以被映射为Movie对象的数据。为什么这种做法可以确保安全性呢?举个例子来说,一个黑客可以将“http://localhost:xxxx/Movies/Details/1”地址修改为“http://localhost:xxxx/Movies/Details/12345”,如果数据库中没有这条id为12345的数据,根据以上代码所示,作为寻找结果的Movie对象将被设定为null,浏览器将重新返回显示电影清单画面。
在Details方法中点击鼠标右键,选择“添加视图”,依然勾选“创建强类型视图”,模型类选择Movie,在支架模板中选择“Details”(明细数据),如图9-2所示。
图9-2 添加明细数据视图
如果要创建中文网站或应用程序,则将默认生成的Details.cshtml文件中有关英文文字修改为中文,修改完毕后该文件中的代码如代码清单9-2中所示。
代码清单9-2 Details.cshtml文件(明细数据视图)中的代码
@model MvcMovie.Models.Movie
@{
ViewBag.Title = "电影详细信息";
}
<h2>电影详细信息</h2>
<fieldset>
<legend>电影</legend>
<div class="display-label">标题</div>
<div class="display-field">@Model.Title</div>
<div class="display-label">发行日期</div>
<div class="display-field">@String.Format("{0:d}",
Model.ReleaseDate)</div>
<div class="display-label">种类</div>
<div class="display-field">@Model.Genre</div>
<div class="display-label">票价</div>
<div class="display-field">@String.Format("{0:c2}", Model.Price)</div>
<div class="display-label">等级</div>
<div class="display-field">@Model.Rating</div>
</fieldset>
<p>
@Html.ActionLink("编辑", "Edit", new { id=Model.ID }) |
@Html.ActionLink("返回电影清单", "Index")
</p>
重新运行应用程序,在电影清单画面中点击某个电影的“查看明细”链接,浏览器显示画面如图9-3所示。
图9-3 电影细节信息画面
9.2 实现数据的修改视图
接下来,让我们来看一下如何实现一个用来修改数据的视图。
首先打开Movie控制器,追加一个返回数据修改视图的Edit方法与一个对该视图中的表单提交进行处理的Edit方法,代码如下所示。
//
// GET: /Movies/Edit
public ActionResult Edit(int id)
{
Movie movie = db.Movies.Find(id);
if (movie == null)
return RedirectToAction("Index");
return View(movie);
}
//
// POST: /Movies/Edit
[HttpPost]
public ActionResult Edit(Movie model)
{
try
{
var movie = db.Movies.Find(model.ID);
UpdateModel(movie);
db.SaveChanges();
return RedirectToAction("Details", new { id = model.ID });
}
catch (Exception)
{
ModelState.AddModelError("", "修改失败,请查看详细错误信息。");
}
return View(model);
}
这两个Edit方法中,第一个方法将在用户点击外部画面的“编辑”链接时被调用,用来在浏览器中显示数据修改视图,并且在该视图中显示用户选择编辑的数据。第二个Edit方法前面带有一个[HttpPost]标记,负责将修改数据视图中提交的表单数据绑定到一个用模型创建出来的Movie对象实例之上(当用户在表单中完成数据修改并点击保存按钮的时候进行提交),UpdateModel(movie)方法将调用模型拷贝器,该模型拷贝器将修改后的数据(使用model参数,该参数指向一个各属性值为编辑后数据的Movie对象实例)拷贝到数据库中(即为数据的保存过程)。在保存数据的过程中如果发生任何错误而导致保存失败的话,则画面重新返回到数据修改视图。
接下来让我们来追加该数据修改视图、在Edit方法中点击鼠标右键,选择“添加视图”,依然勾选“创建强类型视图”,模型类选择Movie,在支架模板中选择“Edit”(修改数据),如图9-4所示。
图9-4 追加数据修改视图
如果要创建中文网站或应用程序,则将默认生成的Edit.cshtml文件中有关英文文字修改为中文,修改完毕后该文件中的代码如代码清单9-3中所示。
代码清单9-3 Edit.cshtml文件(修改数据视图)中的代码
@model MvcMovie.Models.Movie
@{
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()) {