首页 > 其他 > 详细

P5 建立列表和表单View

时间:2020-03-21 15:35:57      阅读:47      评论:0      收藏:0      [点我收藏+]

修改Department下的Index.cshtml
技术分享图片

DepartmentController的Index,它返回类型是Ienumerable<Department>
技术分享图片
这里漏掉了一个await
技术分享图片
所以需要在View里面指明它的类型。通过@model指定它的类型
技术分享图片
在上面可以使用using把命名空间导入进来,下面Department前面就省的写命名空间了。
技术分享图片
View里面的代码,直接写好了放进来的
技术分享图片
指向了Add这个Action
技术分享图片
点击后就会触发这个action
技术分享图片
为什么只需要指定Action就可以了呢?不需要制定Controller呢?因为当前这个Index.cshtml对应的就是DepartmentController。所以就不需要指定Controller,只需要指定Action就可以了。
技术分享图片
运行页面查看效果。列表出来了 但是数据没有出来。上面出现了个123
技术分享图片
因为这里的@Html.DisplayForModel(),本意是想在这里把数据展示出来。但是只展示出来了123
技术分享图片
所以需要为这个Modle系统一个模板,创建DisplayTemplate文件夹。
技术分享图片
然后再创建一个视图文件。
技术分享图片

首先指定modle的类型,然后指定每一行显示的内容,
技术分享图片
最后一行的链接地址跳转到了Employee的Index的Action。她需要一个departmentId的参数
技术分享图片
使用的Tag Helper是asp-route后面跟的参数名是和IndexAction接收的参数名保持一致的
技术分享图片
技术分享图片
这样页面就显示出来了
技术分享图片
点击Add
技术分享图片
页面找不到
技术分享图片
点击Employee也是找不到
技术分享图片

技术分享图片

Employee的页面

代码是提前写好的
技术分享图片
技术分享图片
Template
技术分享图片
是否被解雇,这里判断一下
技术分享图片
没有被解雇才可以执行 解雇操作
技术分享图片
Fire这个action需要传递一个employeeId参数
技术分享图片
技术分享图片
点击Employees
技术分享图片
点击Fire
技术分享图片
点击Fire就被解雇了。
技术分享图片

DepartMent的Add

创建一个View
技术分享图片
叫做Add.cshtml
技术分享图片
代码写好直接粘贴过去。
技术分享图片

action对应的是当前这个Controller的Action。F12可以进去看一下
技术分享图片
post类型的这个Action
技术分享图片
字段的Label我们使用asp-for
技术分享图片
技术分享图片
如果我们在部门的类里面指定Name要显示的名称
技术分享图片
这里就会显示为部门名称了
技术分享图片

技术分享图片
运行,点击Add
技术分享图片

技术分享图片

技术分享图片

技术分享图片

进入到一个部门里
技术分享图片

Employee的Add还没有做
技术分享图片

看一下Employee的Add的Action
技术分享图片
对应的是这个Action。它需要一个参数departmentId
技术分享图片
在EmployeeController的IdnexAction里面的ViewBag加一个DepartmentId
技术分享图片
View里面就可以使用这个ViewBag里面的DepartmentId了
技术分享图片

添加Add的View
技术分享图片
页面代码是写好,直接粘贴进来的
技术分享图片
唯一的区别就是加了隐藏域。保证提交后这个属性值依然存在。
技术分享图片

技术分享图片
运行测试
技术分享图片

技术分享图片

技术分享图片
技术分享图片
修改性别的下拉框
技术分享图片

这个时候的下拉框
技术分享图片
添加一条测试数据
技术分享图片

技术分享图片
 

结束




 

P5 建立列表和表单View

原文:https://www.cnblogs.com/wangjunwei/p/12539354.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!