篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

  • 篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)已关闭评论
  • 119 次浏览
  • A+
所属分类:.NET技术
摘要

入门实战-从系统菜单功能的增删改查开始(一:查询和增加)检验数据库配置正确与否,并且检验EF配置的连接是否可用,需要从数据库中拉取数据在视图页面显示,这样流程才通。

入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

检验数据库配置正确与否,并且检验EF配置的连接是否可用,需要从数据库中拉取数据在视图页面显示,这样流程才通。

我建个表Menu,用来存储我要开发的系统中权限管理部分的系统菜单,里面有菜单名称,菜单Url,排序等字段。

1.在数据中已经有表Menu,表字段结构如图,详细表Sql代码可以通过下载的总体SQL文件得到。

(1).创建表:Menu

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(2).创建Model文件,Menu.cs

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(3).在AppDbContext.cs文件中,增加匹配关系

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

2.完成M、V、C的各个部分

(1).Models文件夹中已经建了Menu.cs的model类文件,那么就在Controllers文件夹内新建一个MenuController.cs文件来完成Controller部分;建好之后,默认就一个Index的Action,如下图:

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(2)那么就在Views中增加Index这个Action对应的视图(不是所有的action都一定要对应一个视图),为了区分原来的HomeController对应的Home视图,在Views下新建一个Menu文件夹,用来完成相关的视图。

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(3).Menu文件夹下的Index.html的代码先搞成纯静态的html代码,写完Controller的Action代码,再动态值嵌套输出

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

 

3.修改控制器Controller的方法,使用EF来获取(查询)数据

(1).在MenuController.cs文件中引入EF操作类AppDbContext,注入使用。依赖注入是Asp.Net Core的新特性,详细概念可以自行学习,其中过一种方式就是通过构造函数注入,默认项目的HomeController.cs文件中,有对应的写法,如下图:

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

我们即便是不能透彻理解,那也可以仿写一个:(在MenuController中,增加一个构造函数,然后注入我们写的EF的操作类AppDbContext)

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(2).在构造函数中注入后,如何使用,如何进行数据操作呢,我在其Index的Action中尝试了三种写法,都可以将数据拉取出来。

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(3).在前篇将ADO.NET在.NET CORE中的使用时,如果在Action中数据返回的是DataTable,那么在前台的View视图页面是如何循环遍历,在Action中数据返回的是List<T>这种集合,那么在前台的View视图页面时如何取值都有讲过。那么这是通过EF返回的数据集合,该在View页面中如何遍历循环呢?

(3.1).如果在Action取值时用的是Linq的方式,那么前台view代码是这样的

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(3.2). 如果在Action取值时用的是lamada表达式的方式,那么前台view代码是这样的,在View页面的最上面应用@model IEnumerable<Menu> 或 @model List<Menu> 均可。你需要注意的就是View页面和你Action中的 return View(items) 这两项要对应。

预览效果如下图:

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

4.查询功能完毕,就需要完成一个新建Create(Insert/Add)的功能,我们需要几步来完成:

(1).在Controller中编写Create的Action;

在Controller中编写名为Create的Action,需要编写两个:一个HttpGet,一个HttpPost,当点击新建按钮,调用HttpGet的Create,用来初始化页面,可以在里面写一些下拉框,复选框、单选钮等的初始化数据获取;

当点击保存按钮,调用HttpPost的Create,用来保存数据到数据库;

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

Post模式的Action方法:Create的参数是一个对象,从View提交到Controller的过程中,依据form表单中的控件元素名称与对象属性名一直,.Net Core自动绑定,并提交。Create方法的参数形式可以是这样Create(string name,string objstr),Create(int id,string objstr,Menu menu)等。

这里引用网友的一段话来解释一下,参数是Menu对象时,变量值就自动传递过来了:

“Asp.Net MVC有一个默认的模型绑定机制,当点击表单中submit按钮或a标签时,会将相应表单的数据提交并跳转到action内指定的网址或HREF属性内指定的网址,当跳转到指定网址前,首先会执行这个网址的相应操作方法,执行操作方法时,Asp.Net MVC 的默认模型绑定机制会进行数据绑定,当操作方法里的形参列表属性和表单元素的name属性一致时,就会动态给形参属性绑定表单元素数据(操作方法的形参列表可以是数据类型变量,对象,集合等等的复杂数据类型)”

(2).在Views中,增加Create的视图页;

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

(3). 在列表页(也就是Index视图页),有一个增加按钮;

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

两种写法都是可以实现新建跳转功能,一个是<a>,一个是<button>;

(4).修改增加功能Create的方法内部,加上一个简单的判断验证

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

很多初学入门者,在这个ModelState.IsValid验证时疑惑,因为这个是对Model对象的一个验证,以我的为例,就是验证我编写的Model---Menu.cs。比如,我将程序调试起来,填写数据,提交后跟踪断点发现,发现ModelState.IsVaid==false:

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

我检查了Model对象Menu.cs的代码发现,我有个Name属性验证要求时必须,那么提交数据时有没提供,所以,找到问题去修改:要么在对象里去掉字段的[Required]属性,要么在视图页面提供Name控件来传值。

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

 

5.把菜单加到导航上去,操作起来方便一些。

找到_Layout.cshtml文件,找到导航菜单的Html代码,将其修改一下,增加一个菜单。

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)

篇(6)-Asp.Net Core入门实战-从系统菜单功能的增删改查开始(一:查询和增加)