MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据

简介: 系列教程:MVC5 + EF6 + Bootstrap3上一节:MVC5 + EF6 + Bootstrap3 (12) 新建数据下一节:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView源码下载:点我下载目录前言添加链接查看详情编辑数据删除数据结尾前言所谓万事开头难,前面用两节介绍了查询页面,一节介绍了创建数据。

系列教程:MVC5 + EF6 + Bootstrap3

上一节:MVC5 + EF6 + Bootstrap3 (12) 新建数据

下一节:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView

源码下载:点我下载

目录

前言

所谓万事开头难,前面用两节介绍了查询页面,一节介绍了创建数据。由于前面做了大量的铺垫,本节就能顺利的将查看详情、编辑数据、删除数据在一节中全部介绍给大家。前后这几节加起来就完成了一个简单信息系统的增删改查(CRUD)的所有操作。

添加链接

要进行这三个操作,首先在查询页面的每一条记录后面添加对应的链接。代码如下:

复制代码
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Sex)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Rating)
    </td>
    <td>
        @Html.ActionLink("Details","Details", new { id = item.ID }) | 
        @Html.ActionLink("Edit", "Edit" , new { id = item.ID }) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
    </td>
</tr>
复制代码

上面代码对应着数据列表的一行,其中黄色的部分就是我们添加的链接。这三个链接对应三个不同的操作,他们都需要ID作为参数来确定操作的是哪一条数据,改动后的页面显示如下:

红框部分就是我们添加的链接。

查看详情

查看详情对应Details链接。点击链接之后会请求当前Contoller,也就是CompanyController的Details Action。那么我们就在~\Controllers\CompanyController.cs下写这个Action。代码如下:

复制代码
 1 public ActionResult Details(int? id)
 2 {
 3     if (id == null)
 4     {
 5         return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
 6     }
 7     Worker worker = db.Workers.Find(id);
 8     if (worker == null)
 9     {
10         return HttpNotFound();
11     }
12     return View(worker);        
13 }
复制代码

第3-6行表示如果访问这个Actions时没有给参数id则返回BadRequest错误。如下图所示,地址栏里面没有给出ID,返回Bad Request错误。

第7-11行表示如果根据id没有找到对应的信息则返回HttpNotFound错误,如下图所示:

第12行,如果根据id找到了对应的信息则用View显示。

在~Views\Company\下创建Details.cshtml视图,写入代码如下:

复制代码
 1 @model SlarkInc.Models.Worker
 2 @{
 3     ViewBag.Title = "Details";
 4 }
 5 <h2>Worker Details</h2>
 6 <div>
 7     <h4>Worker</h4>
 8     <hr />
 9     <dl class="dl-horizontal">
10         <dt>
11             @Html.DisplayNameFor(model => model.FirstName)
12         </dt>
13         <dd>
14             @Html.DisplayFor(model => model.FirstName)
15         </dd>
16         <dt>
17             @Html.DisplayNameFor(model => model.LastName)
18         </dt>
19         <dd>
20             @Html.DisplayFor(model => model.LastName)
21         </dd>
22         <dt>
23             @Html.DisplayNameFor(model => model.Sex)
24         </dt>
25         <dd>
26             @Html.DisplayFor(model => model.Sex)
27         </dd>
28         <dt>
29             @Html.DisplayNameFor(model => model.Rating)
30         </dt>
31         <dd>
32             @Html.DisplayFor(model => model.Rating)
33         </dd>
34     </dl>
35 </div>
36 <p>
37     @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
38     @Html.ActionLink("Back to List", "Index")
39 </p>
复制代码

代码中用DisplayNameFor函数显示属性名,用DisplayFor函数显示属性值。

页面用<dl><dt><dd>和Bootstrap的"dl-horizontal"类布局页面,使每一个属性名和属性值占一行,显示效果如下:

第37行给出了编辑此页面的链接。38行给出返回查询页面的链接。

编辑数据

在~\Controllers\CompanyController.cs中加入用来进入Edit页面的Action代码如下:

复制代码
public ActionResult Edit(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Worker worker = db.Workers.Find(id);
    if (worker == null)
    {
        return HttpNotFound();
    }
    return View(worker);
}
复制代码

看起来眼熟?没错,和Details的Action是一模一样的,这里就不重复了。

下面写View。在~\Views\Company\下创建Edit.cshtml视图,写入代码如下:

复制代码
 1 @model SlarkInc.Models.Worker
 2 @{
 3     ViewBag.Title = "Edit";
 4 }
 5 <h2>Worker Edit</h2>
 6 @using (Html.BeginForm())
 7 {
 8     @Html.AntiForgeryToken()
 9     <div class="form-horizontal">
10         <hr />
11         @Html.ValidationSummary(true)
12         @Html.HiddenFor(model => model.ID)
13         <div class="form-group">
14             @Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
15             <div class="col-md-10">
16                 @Html.EditorFor(model => model.FirstName)
17                 @Html.ValidationMessageFor(model => model.FirstName)
18             </div>
19         </div>
20         <div class="form-group">
21             @Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })
22             <div class="col-md-10">
23                 @Html.EditorFor(model => model.LastName)
24                 @Html.ValidationMessageFor(model => model.LastName)
25             </div>
26         </div>
27         <div class="form-group">
28             @Html.LabelFor(model => model.Sex, new { @class = "control-label col-md-2" })
29             <div class="col-md-10">
30                 @Html.EnumDropDownListFor(model => model.Sex)
31                 @Html.ValidationMessageFor(model => model.Sex)
32             </div>
33         </div>
34         <div class="form-group">
35             @Html.LabelFor(model => model.Rating, new { @class = "control-label col-md-2" })
36             <div class="col-md-10">
37                 @Html.EditorFor(model => model.Rating)
38                 @Html.ValidationMessageFor(model => model.Rating)
39             </div>
40         </div>
41         <div class="form-group">
42             <div class="col-md-offset-2 col-md-10">
43                 @Html.Submit("Submit")
44             </div>
45         </div>
46     </div>
47 }
48 <div>
49     @Html.ActionLink("Back to List", "Index")
50 </div>
复制代码

这个页面的代码与上一节的插入数据页面的代码基本相同,可以参照上一节的代码说明,需要看的点这里

第12行用HiddenFor函数储存当前要修改的记录的ID以便提交后找到对应的记录进行更新。

页面显示如下:

接下来我们来写提交更新数据之后需要访问的Action,在~\Controllers\Company.cs中加入用Post方法访问的Edit Action,代码如下:

复制代码
 1 [HttpPost]
 2 [ValidateAntiForgeryToken]
 3 public ActionResult Edit([Bind(Include = "ID, FirstName, LastName, Sex, Rating")] Worker worker)
 4 {
 5     if (ModelState.IsValid)
 6     {
 7         db.Entry(worker).State = EntityState.Modified;
 8         db.SaveChanges();
 9         return RedirectToAction("Index");
10     }
11     return View(worker);
12 }
复制代码

这段带码的知识点讲解与上一节Create提交Action的基本相同,点击这里查看

不同点是第7行,根据获得的worker实例,在数据列表中找到对应记录,更新其值,并设置其状态为Modified。最后将改动保存到数据库并跳转回数据查询页面。

删除数据

删除数据不需要页面显示数据,只需在CompanyController下加入一个Delete Action删除数据即可,代码如下:

复制代码
 1 public ActionResult Delete(int id)
 2 {
 3     try
 4     {
 5         Worker workerToDelete = new Worker() { ID = id };
 6         db.Entry(workerToDelete).State = EntityState.Deleted;
 7         db.SaveChanges();
 8     }
 9     catch(DataException/*dex*/)
10     {
11         return RedirectToAction("Index", new { id = id, saveChangesError = true });
12     }
13     return RedirectToAction("Index");
14 }
复制代码

第5行创建一个只有ID被赋值的worker实例。然后第6行根据这个实例的ID在数据库中找到对应的数据,设置其状态为Deleted已删除,第7行执行删除操作。

如果删除成功则在第13行跳转回查询页面,如果失败则跳转回查询页面并传递两个参数传递失败记录的ID及saveChangesError = true。根据这两个传递的参数可以在查询页面写出错误信息。这里就不详细描述了。

这样点击删除链接就能在查询页面看到那条数据被删除了。

结尾

到此,我们完成了对一个简单数据模型的增删改查操作。不过其中还有很多知识点没有详细描述,比如数据验证、EF操作数据的函数、View中的各种不同的Http响应等等。后面会一一详细介绍。

觉得有用就推荐下吧!

本节主要参考:Implementing Basic CRUD Functionality with the Entity Framework in ASP.NET MVC Application

目录
相关文章
|
前端开发 数据库 存储
MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用
原文:MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用   摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识。 第二阶段11~20篇将会侧重于专题的讲解,一篇文章解决一个实际问题。
1284 0
|
XML 前端开发 定位技术
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航 上篇文章我们完成了 动态生成多级菜单 这个实用组件。 本篇文章我们要开发另一个实用组件:面包屑导航。 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。
1205 0
|
Web App开发 前端开发 容器
MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
原文:MVC5+EF6 入门完整教程13 -- 动态生成多级菜单 稍微有一定复杂性的系统,多级菜单都是一个必备组件。 本篇专题讲述如何生成动态多级菜单的通用做法。 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单。
1065 0
|
Web App开发 前端开发
MVC5+EF6 入门完整教程12--灵活控制Action权限
原文:MVC5+EF6 入门完整教程12--灵活控制Action权限 大家久等了。 本篇专题主要讲述MVC中的权限方案。 权限控制是每个系统都必须解决的问题,也是园子里讨论最多的专题之一。 前面的系列文章中我们用到了 SysUser, SysRole, SysUserRole 这几个示例表。
1173 0
|
SQL 安全 测试技术
MVC5+EF6 完整教程17--升级到EFCore2.0
原文:MVC5+EF6 完整教程17--升级到EFCore2.0 EF Core 2.0上周已经发布了,我们也升级到core 文章内容基于vs2017,请大家先安装好vs2017(15.3). 本篇文章主要讲下差异点,跟之前一样的就不再重复了。
1311 0
|
前端开发 .NET 开发框架
MVC 5 + EF6 完整教程16 -- 控制器详解
原文:MVC 5 + EF6 完整教程16 -- 控制器详解 Controller作为持久层和展现层的桥梁, 封装了应用程序的逻辑,是MVC中的核心组件之一。 本篇文章我们就来谈谈 Controller, 主要讨论两个方面: Controller运行机制简介 Controller数据传递方式...
1062 0
|
Web App开发 前端开发 容器
MVC 5 + EF6 完整教程15 -- 使用DI进行解耦
原文:MVC 5 + EF6 完整教程15 -- 使用DI进行解耦 如果大家研究一些开源项目,会发现无处不在的DI(Dependency Injection依赖注入)。 本篇文章将会详细讲述如何在MVC中使用Ninject实现DI 文章提纲 场景描述 & 问题引出 第一轮重构 引入Ninject 第二轮重构 总结 场景描述 & 问题引出 DI是一种实现组件解耦的设计模式。
939 0