篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

  • 篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改已关闭评论
  • 10 次浏览
  • A+
所属分类:.NET技术
摘要

入门实战-在页面中增加下拉框、复选框功能的增加和修改一个标准的表单应用页面(视图),有很多元素,文本框只是有的多一些,还有复选框,下拉框,单选钮等各种元素,本节我将讲述使用asp.net core编程实现下拉框的操作和应用,演练代码还以Menu菜单管理有例,在视图内增加下拉框,复选框,实现数据的增加和编辑功能。可以通过枚举或者静态代码实现下拉框select选择,但本节讲解从数据库拉取数据填充下拉框。

入门实战-在页面中增加下拉框、复选框功能的增加和修改

一个标准的表单应用页面(视图),有很多元素,文本框只是有的多一些,还有复选框,下拉框,单选钮等各种元素,本节我将讲述使用asp.net core编程实现下拉框的操作和应用,演练代码还以Menu菜单管理有例,在视图内增加下拉框,复选框,实现数据的增加和编辑功能。可以通过枚举或者静态代码实现下拉框select选择,但本节讲解从数据库拉取数据填充下拉框。

1.增加下拉框:在Controller文件夹下的MenuController内,在Action中修改Create的方法代码增;在HttpGet类型的Create中初始化下拉框,在HttpPost类型的Create中获取下拉框值并保存,同时重置下拉框,否则,保存后,下拉框将会报错或只有默认的一项,除非你action到另外的页面。

(1).Action的修改。

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(2).View的修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(3).预览效果

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

2.修改下拉框:在MenuController文件内,修改Action视图Edit增加下拉框

(1).先修改一下Action,主要是下拉框的赋值并选中的问题

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(2).View页面不用做任何修改,编辑时选中那一项,在HttpGet类型的Edit中,已经在生成绑定select的ViewData[“MenuDrop”]时设定,当对象的ParentId与表中存储的ParentId相等设置Selected=true;

(3).HttpPost类型的Edit是保存编辑后的值赋值保存即可;

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

以上对下拉框的操作只适应于一级菜单情况(就是单纯的一个类别字段),如果下拉框是二级菜单操作,需要用到级联操作。

3.二级级联下拉框的代码编写

原则上二级和以上的多级级联下拉框最好是多个表设计,例如省市区这种三个下拉框的选择,面向对象设计时,各自表单独设计在使用类对象时就方便一下,把字段设计到一个表中,那么使用Sql语句取值方便,但不符合Asp.Net Core 或者新的Web编程模式;下面演练下我实现的二级下拉框(编辑功能没有实现)

(1).在View视图中,修改Create.cshtml文件,在原来父菜单行位置,以如下方式添加2个DropDownList;

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(2).在View视图中,Create.Cshtml文件中,增加Js代码,需要引用Jquery,注意js代码中的op.text=j.text和op.value=j.value的大小写,如下

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(3).在Controller中的MenuController.cs文件中,修改action,和增加个方法,如下图

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(4).最后预览效果

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

4.关于菜单管理功能的处理方式。

添加系统菜单的处理方式有这样一种处理方式,列表之上新建按钮[添加],用来实现增加根目录菜单,然后在每个子目录行上,添加一个Add 实现该菜单下的子菜单添加,如下图示:

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

这样处理逻辑清楚一些,正好避开了下拉框问题。当然还是要掌握下拉框的功能编码,以后的业务逻辑总是要遇到。

5.复选框的使用

在前面讲删除和查询的章节中,有批量删除的例子,里面的复选框使用都是在前台代码Js中实现操作。我们在菜单修改中,尝试增加复选框来。

(1).单一使用,在Menu管理的View视图的Create.cshtml中,增加一个复选框,因为对应Menu数据表的IsDisplay字段,为bool类型。

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(2).执行Action保存数据是,获取到的值(如果选中,则是True,如果不选,则是False)

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(3).在编辑页面(Edit.cshtml)视图中,从对象判断,如果是True,则是选中,如果是False,则是非选中,展现完数据后,你在进行编辑,Edit的Action的代码与Create中的类似,不在演练提出。

6.复选框另外一种用法代码编写。我贴出关键代码,在文章管理中会有详细的代码。

(1).在Create视图的代码片段

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

(2).在Edit时的代码片段

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改

篇(9)-Asp.Net Core入门实战-在页面中增加下拉框、复选框功能的增加和修改