博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
阅读量:6222 次
发布时间:2019-06-21

本文共 6237 字,大约阅读时间需要 20 分钟。

系列教程:

上一节:

下一节:

源码下载:

目录

前言

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

添加链接

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

            @Html.DisplayFor(modelItem => item.FirstName)                @Html.DisplayFor(modelItem => item.LastName)                @Html.DisplayFor(modelItem => item.Sex)                @Html.DisplayFor(modelItem => item.Rating)                @Html.ActionLink("Details","Details", new { id = item.ID }) |         @Html.ActionLink("Edit", "Edit" , new { id = item.ID }) |         @Html.ActionLink("Delete", "Delete", new { id = item.ID })    

上面代码对应着数据列表的一行,其中黄色的部分就是我们添加的链接。这三个链接对应三个不同的操作,他们都需要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 

Worker Details

6
7

Worker

8

9
10
11 @Html.DisplayNameFor(model => model.FirstName)12
13
14 @Html.DisplayFor(model => model.FirstName)15
16
17 @Html.DisplayNameFor(model => model.LastName)18
19
20 @Html.DisplayFor(model => model.LastName)21
22
23 @Html.DisplayNameFor(model => model.Sex)24
25
26 @Html.DisplayFor(model => model.Sex)27
28
29 @Html.DisplayNameFor(model => model.Rating)30
31
32 @Html.DisplayFor(model => model.Rating)33
34
35
36

37 @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |38 @Html.ActionLink("Back to List", "Index")39

代码中用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 

Worker Edit

6 @using (Html.BeginForm()) 7 { 8 @Html.AntiForgeryToken() 9
10

11 @Html.ValidationSummary(true)12 @Html.HiddenFor(model => model.ID)13
14 @Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })15
16 @Html.EditorFor(model => model.FirstName)17 @Html.ValidationMessageFor(model => model.FirstName)18
19
20
21 @Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })22
23 @Html.EditorFor(model => model.LastName)24 @Html.ValidationMessageFor(model => model.LastName)25
26
27
28 @Html.LabelFor(model => model.Sex, new { @class = "control-label col-md-2" })29
30 @Html.EnumDropDownListFor(model => model.Sex)31 @Html.ValidationMessageFor(model => model.Sex)32
33
34
35 @Html.LabelFor(model => model.Rating, new { @class = "control-label col-md-2" })36
37 @Html.EditorFor(model => model.Rating)38 @Html.ValidationMessageFor(model => model.Rating)39
40
41
42
43 @Html.Submit("Submit")44
45
46
47 }48
49 @Html.ActionLink("Back to List", "Index")50

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

第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响应等等。后面会一一详细介绍。

觉得有用就推荐下吧!

本节主要参考:

转载地址:http://bxrja.baihongyu.com/

你可能感兴趣的文章
教孩子学编程 Python
查看>>
:s 命令来替换字符串
查看>>
【“零起点”--百度地图手机SDK】如何查询公交线路?如北京的104路
查看>>
C#使用Linq操作Xml文件(创建xml文件、增删改查xml文件节点信息)的方法
查看>>
Jmeter:图形界面压力测试工具
查看>>
proteus中的常用文件
查看>>
Ubuntu搜狗输入法无法输入中文等问题
查看>>
Linux函数之snprintf()[一]
查看>>
php 使用zendstudio 生成webservice文件 wsdl
查看>>
mysql将数据表改成 innodb
查看>>
Spring
查看>>
spring配置多数据源问题
查看>>
IOS中的属性列表----Property List
查看>>
如何通过网页启动应用程序
查看>>
ORA-00845: MEMORY_TARGET not supported on this system
查看>>
android 获取路径目录方法以及判断目录是否存在,创建目录
查看>>
使用ajaxFileUpload实现异步上传图片
查看>>
Python 杂集
查看>>
Another Eight Puzzle
查看>>
炸弹人——NABCD分析
查看>>