P5 建立列表和表单View

修改Department下的Index.cshtml
P5 建立列表和表单View

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

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

P5 建立列表和表单View

Employee的页面

代码是提前写好的
P5 建立列表和表单View
P5 建立列表和表单View
Template
P5 建立列表和表单View
是否被解雇,这里判断一下
P5 建立列表和表单View
没有被解雇才可以执行 解雇操作
P5 建立列表和表单View
Fire这个action需要传递一个employeeId参数
P5 建立列表和表单View
P5 建立列表和表单View
点击Employees
P5 建立列表和表单View
点击Fire
P5 建立列表和表单View
点击Fire就被解雇了。
P5 建立列表和表单View

DepartMent的Add

创建一个View
P5 建立列表和表单View
叫做Add.cshtml
P5 建立列表和表单View
代码写好直接粘贴过去。
P5 建立列表和表单View

action对应的是当前这个Controller的Action。F12可以进去看一下
P5 建立列表和表单View
post类型的这个Action
P5 建立列表和表单View
字段的Label我们使用asp-for
P5 建立列表和表单View
P5 建立列表和表单View
如果我们在部门的类里面指定Name要显示的名称
P5 建立列表和表单View
这里就会显示为部门名称了
P5 建立列表和表单View

P5 建立列表和表单View
运行,点击Add
P5 建立列表和表单View

P5 建立列表和表单View

P5 建立列表和表单View

P5 建立列表和表单View

进入到一个部门里
P5 建立列表和表单View

Employee的Add还没有做
P5 建立列表和表单View

看一下Employee的Add的Action
P5 建立列表和表单View
对应的是这个Action。它需要一个参数departmentId
P5 建立列表和表单View
在EmployeeController的IdnexAction里面的ViewBag加一个DepartmentId
P5 建立列表和表单View
View里面就可以使用这个ViewBag里面的DepartmentId了
P5 建立列表和表单View

添加Add的View
P5 建立列表和表单View
页面代码是写好,直接粘贴进来的
P5 建立列表和表单View
唯一的区别就是加了隐藏域。保证提交后这个属性值依然存在。
P5 建立列表和表单View

P5 建立列表和表单View
运行测试
P5 建立列表和表单View

P5 建立列表和表单View

P5 建立列表和表单View
P5 建立列表和表单View
修改性别的下拉框
P5 建立列表和表单View

这个时候的下拉框
P5 建立列表和表单View
添加一条测试数据
P5 建立列表和表单View

P5 建立列表和表单View
 

结束




 

上一篇:思索 p5.js 的最佳实践


下一篇:MIT_AI_P5学习笔记