下拉框数据绑定

时间:2024-03-13 12:15:14

下面我们来学习一下如何绑定下拉框数据,并实现下拉框值的改变。
1、 先在Html页面设置下拉框。
下拉框数据绑定
在绑定数据前,下拉框的样式如图
下拉框数据绑定
2、 利用主键ID查询数据。(下面是控制器封装的代码)
查询学院数据。这里用List的Linq语句,所以最后要通过ToList()转换List的数据类型;通过实例化的模型调用数据库中的学院信息;“Select”为事先封装好的类,可以防止错误的发生;用int类型的id接收学院主键ID,string类型的text文本学院名称;最后返回值。
下拉框数据绑定
查询完学院数据后查询年级数据。按照学院与年级的关系,学院是年级的父元素,所以这里需要传递学院的主键ID,需要用int类型定义一个传递的参数;与查询学院数据一样,用List的Linq语句查询数据,通过实例化的模型调用数据库中的年级信息;“where”判断年级的外键ID是否与学院的主键ID相等;调用“Select”类;最后返回值。
下拉框数据绑定
查询完年级数据后查询班级数据。查询班级数据与查询年级数据差不多, 按照年级与班级的关系,年级是班级的父元素,所以需要传递年级的主键ID。 (具体参考查询年级数据的代码)

3、 绑定数据。(下面是js代码)
查询完数据后,调用这些方法,为下拉框绑定数据。
“createSelect”方法是一个创建下拉框的方法,利用id和url路径。
下拉框数据绑定(此方法来自老师上课内容)

调用“createSelect”方法,填写对应的下拉框的id和控制器的方法。因为要实现下拉框值的变化,所以按照学院、年级和班级三者的关系,先绑定学院的下拉框;学院下拉框值改变后,年级下拉框才绑定数据, 所以“$”调用学院下拉框的id,当学院下拉框值change改变,年级下拉框就绑定数据,因为年级下拉框要调用学院的主键ID,所以要声明一个参数接收学院的主键ID。
班级下拉框的绑定参照年级下拉框的绑定。
下拉框数据绑定
绑定下拉框数据,就完成了。

下拉框数据绑定

下拉框数据绑定
下拉框数据绑定