Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图
目录
系列文章
[Asp.net MVC]Asp.net MVC5系列——第一个项目
[Asp.net MVC]Asp.net MVC5系列——添加视图
[Asp.net MVC]Asp.net MVC5系列——添加模型
[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据
[Asp.net MVC]Asp.net MVC5系列——添加数据
[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则
概述
上篇文章介绍了，在提交表单时对数据的验证规则，在提交的数据合法时，将数据添加到数据库，也就是实现了信息的增加视图。这篇文章将实现查看明细，编辑，删除视图。
实现信息的明细视图
首先，让我们来看一下如何实现一条数据的明细信息视图。为了更好地体会这一功能，首先我们在前文所述的学生信息列表视图（Views文件夹下面的Student文件夹下面的StudentList.cshtml文件）中保留学生信息的姓名、性别、地址、电话、班级等字段。修改后的学生列表视图代码：
1 @model IEnumerable<Wolfy.FirstMVCProject.Models.Student>
2
3 @{
4 Layout = null;
5 }
6
7 <!DOCTYPE html>
8
9 <html>
10 <head>
11 <meta name="viewport" content="width=device-width" />
12 <title>学生信息</title>
13 </head>
14 <body>
15 <p>
16 @Html.ActionLink("添加", "Create")
17 </p>
18 <table class="table">
19 <tr>
20 <th>
21 姓名
22 </th>
23 <th>
24 性别
25 </th>
26 <th>
27 地址
28 </th>
29
30 <th>
31 电话
32 </th>
33 <th>
34 删除
35 </th>
36
37 <th>
38 班级名称
39 </th>
40 <th></th>
41 </tr>
42
43 @foreach (var item in Model) {
44 <tr>
45 <td>
46 @Html.DisplayFor(modelItem => item.stuName)
47 </td>
48 <td>
49 @Html.DisplayFor(modelItem => item.stuSex)
50 </td>
51 <td>
52 @Html.DisplayFor(modelItem => item.stuAddress)
53 </td>
54 <td>
55 @Html.DisplayFor(modelItem => item.stuPhone)
56 </td>
57 <td>
58 @Html.DisplayFor(modelItem => item.Course.className)
59 </td>
60 <td>
61 @Html.ActionLink("编辑", "Edit", new { id=item.stuId }) |
62 @Html.ActionLink("详细", "Details", new { id=item.stuId }) |
63 @Html.ActionLink("删除", "Delete", new { id=item.stuId })
64 </td>
65
66 </tr>
67 }
68
69 </table>
70 </body>
71 </html>
右键在浏览器中查看
现在学生列表中就只显示每条数据的姓名、性别、地址、电话、班级名称了，如果想查看该条数据的详细信息，需要点击每条数据的“详细”链接，将画面导航到明细数据画面，在该画面中查看这条数据的明细信息。当一条数据的细节信息比较多，而我们只想在该数据的列举清单中显示该数据的几个摘要信息，通过点击链接或按钮的操作来查看数据的细节信息时这种处理方法是比较有用的。
接下来让我们来追加这个明细数据视图。首先打开Student控制器，追加一个返回明细数据视图的Details方法，代码如下所示复制代码 /// <summary> /// 学生信息详细Acti /// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Details(int id)
{
var student = from s in entity.Student
where s.stuId == id
select s; //Find方法和FirstOrDefault方法效果相同，都是返回满足条件的第一个元素，如果没有该元素，则返回null。
Student stu = student.FirstOrDefault();
//查到了该学生的详细
if (stu != null)
{
//找到该学生的信息，则在Details视图中显示，将该学生的信息对象传过去。
return View("Details",stu);
}
else
{
//没有查到学生信息明细，则返回学生列表
return RedirectToAction("StudentList");
} }
在Details方法中点击鼠标右键，选择“添加视图”，模型类选择Student,在支架模板中选择“Details”（明细数据），如图所示。
如果要创建中文网站或应用程序，则将默认生成的Details.cshtml文件中有关英文文字修改为中文，修改完毕后该文件中的代码如下所示。
1 @model Wolfy.FirstMVCProject.Models.Student
2
3 @{
4 Layout = null;
5 }
6
7 <!DOCTYPE html>
8
9 <html>
10 <head>
11 <meta name="viewport" content="width=device-width" />
12 <title>Details</title>
13 </head>
14 <body>
15 <div>
16 <h4>Student</h4>
17 <hr />
18 <dl class="dl-horizontal">
19 <dt>
20 姓名
21 </dt>
22
23 <dd>
24 @Html.DisplayFor(model => model.stuName)
25 </dd>
26
27 <dt>
28 性别
29 </dt>
30
31 <dd>
32 @Html.DisplayFor(model => model.stuSex)
33 </dd>
34
35 <dt>
36 生日
37 </dt>
38
39 <dd>
40 @Html.DisplayFor(model => model.stuBirthdate)
41 </dd>
42
43 <dt>
44 入学时间
45 </dt>
46
47 <dd>
48 @Html.DisplayFor(model => model.stuStudydate)
49 </dd>
50
51 <dt>
52 地址
53 </dt>
54
55 <dd>
56 @Html.DisplayFor(model => model.stuAddress)
57 </dd>
58
59 <dt>
60 邮箱
61 </dt>
62
63 <dd>
64 @Html.DisplayFor(model => model.stuEmail)
65 </dd>
66
67 <dt>
68 电话
69 </dt>
70
71 <dd>
72 @Html.DisplayFor(model => model.stuPhone)
73 </dd>
74
75 <dt>
76 是否删除
77 </dt>
78
79 <dd>
80 @Html.DisplayFor(model => model.stuIsDel)
81 </dd>
82
83 <dt>
84 录入时间
85 </dt>
86
87 <dd>
88 @Html.DisplayFor(model => model.stuInputtime )
89 </dd>
90
91 <dt>
92 班级
93 </dt>
94
95 <dd>
96 @Html.DisplayFor(model => model.Course.className)
97 </dd>
98
99 </dl>
100 </div>
101 <p>
102 @Html.ActionLink("Edit", "Edit", new { id = Model.stuId }) |
103 @Html.ActionLink("Back to List", "StudentList")
104 </p>
105 </body>
106 </html>
重新运行应用程序，在学生信息列表中点击某个学生的“详细”链接
通过观察地址栏你会发现：http://localhost:4585/Student/Details/9，在url中最后一个9就是学生的id，这个参数是如何传递的呢？
在学生列表视图代码中你会发现类似如下的代码：
@Html.ActionLink("详细", "Details", new { id=item.stuId })
其中id为url中参数的名称，然后我们看一下action方法中的参数也为id，这两者是否必须对应呢？那么，我们修改一下Details方法中的参数名称，测试一下。
将Details方法的参数名改为intI的，然后运行，则会出现如下的信息。
可见，视图中传递的参数名和Action中的参数名必须一样。
实现信息的编辑视图
接下来，让我们来看一下如何实现一个用来修改数据的视图。
首先打开Student控制器，追加一个返回数据修改视图的Edit方法与一个对该视图中的表单提交进行处理的Edit方法，代码如下所示。
public ActionResult Edit(int id)
{
var student = from s in entity.Student
where s.stuId == id
select s;
Student stu = student.FirstOrDefault(); //查到了该学生的详细
if (stu != null)
{
//外键关系处理
var course = from c in entity.Course
where c.classId == stu.classId
select c;
stu.Course = course.FirstOrDefault();
//因为学生信息中有班级id的外键，所以在编辑的时候，要指定dropdownlist的数据源
var courses = from s in entity.Course
select s; List<SelectListItem> items = new List<SelectListItem>();
foreach (var item in courses)
{
SelectListItem selectListItem = null;
//当前学生所在的班级被选中
if (item.classId == stu.classId)
{
selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString(), Selected = true };
}
else
{
selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString() };
} items.Add(selectListItem);
}
ViewData["course"] = items;
//找到该学生的信息，则在Details视图中显示，将该学生的信息对象传过去。
return View("Edit", stu);
}
else
{
//没有查到学生信息明细，则返回学生列表
return RedirectToAction("StudentList");
}
}
/// <summary>
/// 处理post请求的action方法，也就是修改后提交的数据
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Edit(Student student)
{
try
{
var stu = entity.Student.Find(student.stuId);
//处理学生所在的班级
string strCourseId = Request.Form["course"];
//作为测试，我们只修改性别和班级
stu.stuSex = student.stuSex;
stu.classId = Convert.ToInt32(strCourseId);
entity.Entry<Student>(stu).State = System.Data.Entity.EntityState.Modified; int intCount = entity.SaveChanges();
if (intCount > )
{
return RedirectToAction("Details", new { id = student.stuId });
}
else
{
return Content("修改失败");
}
}
catch (Exception)
{ return Content("修改失败");
}
}
这两个Edit方法中，第一个方法将在用户点击外部画面的“编辑”链接时被调用,用来在浏览器中显示数据修改视图，并且在该视图中显示用户选择编辑的数据。第二个Edit方法前面带有一个[HttpPost]标记，负责将修改数据视图中提交的表单数据绑定到一个用模型创建出来的Student对象实例之上（当用户在表单中完成数据修改并点击保存按钮的时候进行提交），在保存数据的过程中如果发生任何错误而导致保存失败的话，则提示修改失败文字信息。
（作为测试用，我们只修改性别和班级的信息）
接下来让我们来追加该数据修改视图、在Edit方法中点击鼠标右键，选择“添加视图”，模型类选择Student,在支架模板中选择“Edit”（修改数据），如图所示。
如果要创建中文网站或应用程序，则将默认生成的Edit.cshtml文件代码如下所示。
1 @model Wolfy.FirstMVCProject.Models.Student
2
3 @{
4 Layout = null;
5 }
6
7 <!DOCTYPE html>
8
9 <html>
10 <head>
11 <meta name="viewport" content="width=device-width" />
12 <title>Edit</title>
13 </head>
14 <body>
15 @using (Html.BeginForm("Edit","Student",FormMethod.Post))
16 {
17 @Html.AntiForgeryToken()
18
19 <div class="form-horizontal">
20 <h4>Student</h4>
21 <hr />
22 @Html.ValidationSummary(true)
23 @Html.HiddenFor(model => model.stuId)
24
25 <div class="form-group">
26 @Html.LabelFor(model => model.stuName, new { @class = "control-label col-md-2" })
27 <div class="col-md-10">
28 @Html.EditorFor(model => model.stuName)
29 @Html.ValidationMessageFor(model => model.stuName)
30 </div>
31 </div>
32
33 <div class="form-group">
34 @Html.LabelFor(model => model.stuSex, new { @class = "control-label col-md-2" })
35 <div class="col-md-10">
36 @Html.EditorFor(model => model.stuSex)
37 @Html.ValidationMessageFor(model => model.stuSex)
38 </div>
39 </div>
40
41 <div class="form-group">
42 @Html.LabelFor(model => model.stuBirthdate, new { @class = "control-label col-md-2" })
43 <div class="col-md-10">
44 @Html.EditorFor(model => model.stuBirthdate)
45 @Html.ValidationMessageFor(model => model.stuBirthdate)
46 </div>
47 </div>
48
49 <div class="form-group">
50 @Html.LabelFor(model => model.stuStudydate, new { @class = "control-label col-md-2" })
51 <div class="col-md-10">
52 @Html.EditorFor(model => model.stuStudydate)
53 @Html.ValidationMessageFor(model => model.stuStudydate)
54 </div>
55 </div>
56
57 <div class="form-group">
58 @Html.LabelFor(model => model.stuAddress, new { @class = "control-label col-md-2" })
59 <div class="col-md-10">
60 @Html.EditorFor(model => model.stuAddress)
61 @Html.ValidationMessageFor(model => model.stuAddress)
62 </div>
63 </div>
64
65 <div class="form-group">
66 @Html.LabelFor(model => model.stuEmail, new { @class = "control-label col-md-2" })
67 <div class="col-md-10">
68 @Html.EditorFor(model => model.stuEmail)
69 @Html.ValidationMessageFor(model => model.stuEmail)
70 </div>
71 </div>
72
73 <div class="form-group">
74 @Html.LabelFor(model => model.stuPhone, new { @class = "control-label col-md-2" })
75 <div class="col-md-10">
76 @Html.EditorFor(model => model.stuPhone)
77 @Html.ValidationMessageFor(model => model.stuPhone)
78 </div>
79 </div>
80
81 <div class="form-group">
82 @Html.LabelFor(model => model.stuIsDel, new { @class = "control-label col-md-2" })
83 <div class="col-md-10">
84 @Html.EditorFor(model => model.stuIsDel)
85 @Html.ValidationMessageFor(model => model.stuIsDel)
86 </div>
87 </div>
88
89 <div class="form-group">
90 @Html.LabelFor(model => model.stuInputtime, new { @class = "control-label col-md-2" })
91 <div class="col-md-10">
92 @Html.EditorFor(model => model.stuInputtime)
93 @Html.ValidationMessageFor(model => model.stuInputtime)
94 </div>
95 </div>
96
97 <div class="form-group">
98 stuClass
99 <div class="col-md-10">
100 @Html.DropDownList("course", String.Empty)
101 @Html.ValidationMessageFor(model => model.classId)
102 </div>
103 </div>
104
105 <div class="form-group">
106 <div class="col-md-offset-2 col-md-10">
107 <input type="submit" value="Save" class="btn btn-default" />
108 </div>
109 </div>
110 </div>
111 }
112
113 <div>
114 @Html.ActionLink("Back to List", "Index")
115 </div>
116 </body>
117 </html>
注意，为dropdownlist使用viewdata绑定数据源。
右键在浏览器中查看学生列表，然后选择一条数据进行编辑，如图所示：
修改后结果
实现信息的删除视图
接下来，让我们来看一下如何实现一个用来删除数据的视图。
首先打开Student控制器，追加一个删除数据的方法Delete，代码如下所示。
public ActionResult Delete(int id)
{
var student = entity.Student.Find(id);
return View("Delete", student); }
[HttpPost]
public RedirectToRouteResult Delete(int id, FormCollection collection)
{ var stu = entity.Student.Find(id); //因为score表中存有学生id外键，所以先删除成绩
var scores = from s in entity.Score
where s.stuId == stu.stuId
select s;
foreach (var item in scores)
{
entity.Score.Remove(item);
} entity.Student.Remove(stu);
entity.SaveChanges();
return RedirectToAction("StudentList");
}
}
这里请注意第一个没有[HttpPost]标记的Delete方法并不会将数据删除，因为如果通过GET请求而删除（或者追加、修改）删除数据的话都会打开一个安全漏洞。
然后在方法上右键，添加视图。
Delete.cshtml代码为：
1 @model Wolfy.FirstMVCProject.Models.Student
2
3 @{
4 Layout = null;
5 }
6
7 <!DOCTYPE html>
8
9 <html>
10 <head>
11 <meta name="viewport" content="width=device-width" />
12 <title>Delete</title>
13 </head>
14 <body>
15 <h3>Are you sure you want to delete this?</h3>
16 <div>
17 <h4>Student</h4>
18 <hr />
19 <dl class="dl-horizontal">
20 <dt>
21 @Html.DisplayNameFor(model => model.stuName)
22 </dt>
23
24 <dd>
25 @Html.DisplayFor(model => model.stuName)
26 </dd>
27
28 <dt>
29 @Html.DisplayNameFor(model => model.stuSex)
30 </dt>
31
32 <dd>
33 @Html.DisplayFor(model => model.stuSex)
34 </dd>
35
36 <dt>
37 @Html.DisplayNameFor(model => model.stuBirthdate)
38 </dt>
39
40 <dd>
41 @Html.DisplayFor(model => model.stuBirthdate)
42 </dd>
43
44 <dt>
45 @Html.DisplayNameFor(model => model.stuStudydate)
46 </dt>
47
48 <dd>
49 @Html.DisplayFor(model => model.stuStudydate)
50 </dd>
51
52 <dt>
53 @Html.DisplayNameFor(model => model.stuAddress)
54 </dt>
55
56 <dd>
57 @Html.DisplayFor(model => model.stuAddress)
58 </dd>
59
60 <dt>
61 @Html.DisplayNameFor(model => model.stuEmail)
62 </dt>
63
64 <dd>
65 @Html.DisplayFor(model => model.stuEmail)
66 </dd>
67
68 <dt>
69 @Html.DisplayNameFor(model => model.stuPhone)
70 </dt>
71
72 <dd>
73 @Html.DisplayFor(model => model.stuPhone)
74 </dd>
75
76 <dt>
77 @Html.DisplayNameFor(model => model.stuIsDel)
78 </dt>
79
80 <dd>
81 @Html.DisplayFor(model => model.stuIsDel)
82 </dd>
83
84 <dt>
85 @Html.DisplayNameFor(model => model.stuInputtime)
86 </dt>
87
88 <dd>
89 @Html.DisplayFor(model => model.stuInputtime)
90 </dd>
91
92 <dt>
93 @Html.DisplayNameFor(model => model.Course.className)
94 </dt>
95
96 <dd>
97 @Html.DisplayFor(model => model.Course.className)
98 </dd>
99
100 </dl>
101
102 @using (Html.BeginForm("Delete","Student",FormMethod.Post)) {
103 @Html.AntiForgeryToken()
104
105 <div class="form-actions no-color">
106 <input type="submit" value="Delete" class="btn btn-default" /> |
107 @Html.ActionLink("Back to List", "Index")
108 </div>
109 }
110 </div>
111 </body>
112 </html>
右键在浏览器中查看学生列表视图，然后选择一条学生信息，单击删除超链接。
点击删除按钮，该条数据将被删除，浏览器中返回显示学生列表页面。
总结
最后，我们添加代码与视图模板来创建了数据的修改视图，删除视图与明细数据视图。一个简单的ASP.NET MVC5项目也算完成了。一个小demo也基本上包括增删改查的操作，接下来，将深入学习一下理论，用理论来支撑之前的实践。
Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图的更多相关文章
- [Asp.net MVC]Asp.net MVC5系列——布局视图
目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net M ...
- Asp.net MVC]Asp.net MVC5系列——Routing特性
目录 概述 路由特性 使用路由 可选参数和参数的默认值 路由前缀 默认路由 路由约束 自定义路由约束 路由名 区域(Area) 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列— ...
- [Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则
目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...
- [Asp.net MVC]Asp.net MVC5系列——添加视图
目录 系列文章 概述 添加视图 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 概述 在这一部分我们添加一个新的控制器HelloWorldController类, ...
- [Asp.net MVC]Asp.net MVC5系列——添加模型
目录 概述 添加模型 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 概述 在本节中我们将追加 ...
- [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据
目录 概述 从控制器访问模型中的数据 强类型模型与@model关键字 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net M ...
- [Asp.net MVC]Asp.net MVC5系列——添加数据
目录 概述 显示添加数据时所用表单 处理HTTP-POST 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列 ...
- Asp.net MVC]Asp.net MVC5系列——在模型中添加
目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5 ...
- Asp.net mvc项目架构分享系列之架构概览
Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...
随机推荐
- JQuery Mobile难点备忘
1 固定header: data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入 ...
- 8 -- 深入使用Spring -- 1...2 Bean后处理器的用处
8.1.2 Bean后处理器的用处 Spring提供的两个常用的后处理器: ⊙ BeanNameAutoProxyCreator : 根据Bean实例的name属性,创建Bean实例的代理. ⊙ De ...
- backbone学习笔记：视图（View）
Backbone 视图对象主要用来渲染数据,监听事件. Backbone的视图对象可以展示Model数据,也可以把用户编辑的Model数据传递到后台,可以通过监听事件操作视图里的DOM元素 举例: v ...
- hudson.AbortException: No files found in path D:\testproject\project2\testoutput\ with configured filemask: output.xml
错误描述: hudson.AbortException: No files found in path D:\testproject\project2\testoutput\ with configu ...
- java jni调用
http://www.cnblogs.com/mandroid/archive/2011/06/15/2081093.html
- es5.0 安装ik中文分词器 mac
es5.0集成ik中文分词器,网上资料很多,但是讲的有点乱,有的方法甚至不能正常运行此插件 特别注意的而是,es的版本一定要和ik插件的版本相对应: 1,下载ik 插件: https://github ...
- CDN的那些细枝末节
起源: 原本打算系统看看关于axios的介绍,无意中就看见一句"Using cdn",于是百度一下,"cdn"是什么? 名词解释:CDN CDN的全称是Cont ...
- executeBatch()批量执行Sql语句
executeBatch()方法:用于成批地执行SQL语句,但不能执行返回值是ResultSet结果集的SQL语句,而是直接执行stmt.executeBatch(); addBatch():向批处理 ...
- C#后台传入数据JS接收
今天碰到个问题,就是后台传入的数据,在JS中for循环的时候,下面那个j根本就不会往上加.所以只能将后台传入的对象,转换为json格式,由js进行解析后生成js中的对象 @{j=0;} for (va ...
- python框架---->pymysql的使用
这里面学习一下python中操作mysql的第三方库pymysql的使用.很多我们以为一辈子都不会忘掉的事情,就在我们念念不忘的日子里．被我们遗忘了． pymysql的简单使用 我们创建一张表来进行下 ...