MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html
上一节: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。代码如下:
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Worker worker = db.Workers.Find(id);
if (worker == null)
{
return HttpNotFound();
}
return View(worker);
}
第3-6行表示如果访问这个Actions时没有给参数id则返回BadRequest错误。如下图所示,地址栏里面没有给出ID,返回Bad Request错误。
第7-11行表示如果根据id没有找到对应的信息则返回HttpNotFound错误,如下图所示:
第12行,如果根据id找到了对应的信息则用View显示。
在~Views\Company\下创建Details.cshtml视图,写入代码如下:
@model SlarkInc.Models.Worker
@{
ViewBag.Title = "Details";
}
<h2>Worker Details</h2>
<div>
<h4>Worker</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.FirstName)
</dt>
<dd>
@Html.DisplayFor(model => model.FirstName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.LastName)
</dt>
<dd>
@Html.DisplayFor(model => model.LastName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Sex)
</dt>
<dd>
@Html.DisplayFor(model => model.Sex)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Rating)
</dt>
<dd>
@Html.DisplayFor(model => model.Rating)
</dd>
</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
@Html.ActionLink("Back to List", "Index")
</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视图,写入代码如下:
@model SlarkInc.Models.Worker
@{
ViewBag.Title = "Edit";
}
<h2>Worker Edit</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.ID)
<div class="form-group">
@Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Sex, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.Sex)
@Html.ValidationMessageFor(model => model.Sex)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Rating, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Rating)
@Html.ValidationMessageFor(model => model.Rating)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
@Html.Submit("Submit")
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
这个页面的代码与上一节的插入数据页面的代码基本相同,可以参照上一节的代码说明,需要看的点这里。
第12行用HiddenFor函数储存当前要修改的记录的ID以便提交后找到对应的记录进行更新。
页面显示如下:
接下来我们来写提交更新数据之后需要访问的Action,在~\Controllers\Company.cs中加入用Post方法访问的Edit Action,代码如下:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "ID, FirstName, LastName, Sex, Rating")] Worker worker)
{
if (ModelState.IsValid)
{
db.Entry(worker).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(worker);
}
这段带码的知识点讲解与上一节Create提交Action的基本相同,点击这里查看。
不同点是第7行,根据获得的worker实例,在数据列表中找到对应记录,更新其值,并设置其状态为Modified。最后将改动保存到数据库并跳转回数据查询页面。
删除数据
删除数据不需要页面显示数据,只需在CompanyController下加入一个Delete Action删除数据即可,代码如下:
public ActionResult Delete(int id)
{
try
{
Worker workerToDelete = new Worker() { ID = id };
db.Entry(workerToDelete).State = EntityState.Deleted;
db.SaveChanges();
}
catch(DataException/*dex*/)
{
return RedirectToAction("Index", new { id = id, saveChangesError = true });
}
return RedirectToAction("Index");
}
第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 + Bootstrap3 (12) 新建数据
下一节:MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
作者:Slark.NET
出处:http://www.cnblogs.com/slark/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议,请多多赐教,非常感谢。
MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据的更多相关文章
- MVC5 + EF6 + Bootstrap3 (12) 新建数据
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-create.html 系列教程:MVC5 + EF6 + ...
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-partialview.html 系列教程:MVC5 + E ...
- MVC5 + EF6 + Bootstrap3系列教程
本系列教程以ASP.NET MVC5为核心框架,使用Entity Framewok6访问数据,并使用Bootstrap3作为前端UI框架.帮助大家开发出一套高效.美观.稳定.实用的软件系统. MVC5 ...
- MVC5 + EF6 + Bootstrap3 (10) 数据查询页面
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 系列教程:MVC ...
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...
- (12) MVC5 EF6 Bootstrap3
MVC5 + EF6 + Bootstrap3 (12) 新建数据 系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (11) 排序.搜 ...
- MVC5 + EF6 + Bootstrap3 (16) 客户端验证
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-client-side-validation.html 系列 ...
- MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 我工作的源码:http://www.jin ...
- MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part2.html 上一节 ...
随机推荐
- 通过正则获取URL中的参数
闲着无聊用正则做了一个获取URL参数的小算法^_^ function getParam(name) { var objs = window.location.search.match("(\ ...
- 【整理贴】DBA-常用到的动态视图分析语句
测试应用环境:SQL2008 R2.SQL2012.SQL2014 --语句1:获取前20逻辑读取次数或逻辑写入次数或CPU 时间 SELECT TOP 20 SUBSTRING(qt.TEXT, ( ...
- SQL基础(2)-约束
1. 添加主键约束 a.创建表时添加主键(默认系统命名主键) create table pt_ticket_info( id varchar2(50) primary key not null, -- ...
- 快速解决mysql Lost connection to MySQL server at 'reading initial communication packet及can't connect to mysql server on 'localhost'
今天在使用Navicat连一个远程mysql时,总是提示连接不成功,提示Lost connection to MySQL server at 'reading initial communicatio ...
- C语言使用宏实现2个变量的交换
记录哪个方法更普适,更高效,这些方法不包括使用函数的方法,如果使用函数的话,使用指针的方法更合适. 使用中间变量 形如 int tmp, tmp = a; a=b; b = tmp; #define ...
- java :hello world
练习java的基本语法. output hellow world. 需求:打包自身项目的bin目录文件为一个临时可运行的jar文件,执行完后删除. 使用process执行jar文件,返回输入流和错误流 ...
- Sample: Write And Read data from HDFS with java API
HDFS: hadoop distributed file system 它抽象了整个集群的存储资源,可以存放大文件. 文件采用分块存储复制的设计.块的默认大小是64M. 流式数据访问,一次写入(现支 ...
- 真人动作捕捉系统 for Unity
真人动作捕捉 在Asset Store中浏览Mecanim相关的资源时,发现了这个 资源信息 Asset Store:https://www.assetstore.unity3d.com/#/cont ...
- Linux压力测试工具Tsung安装、使用和图形报表生成
简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...
- [Usaco2008 Nov]mixup2 混乱的奶牛 简单状压DP
1231: [Usaco2008 Nov]mixup2 混乱的奶牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 685 Solved: 383[S ...