下拉框的绑定与回填

开发工具与关键技术：Visual Studio 2015  下拉框
作者：孙水兵
撰写时间：2019年5月5日

三、 前期工作：
由于下拉框的绑定与数据回填都涉及到表格数据的查询，所以在控制器最上端引入Models和装实体类的文件名称

实例化Models
在控制器的命名空间中实例化Models
Models.CQUPTEntities 自定义名称 = new Models.CQUPTEntities();

四、 需要达到的效果
有学院、年级、班级三个下拉框，需达到两种效果。第一种：学院下拉框中显示请选择，并且点击学院下拉框的请选择会将所有的学院名称显示出来并且选中了学院。与此同时，年级下拉框发生改变，年级下拉框中显示出请选择。班级下拉框不发生改变。当点击年级下拉框的请选择时，将选择的学院下的所有的年级显示出来并且选中年级时，班级下拉框发生与之前年级下拉框同样的改变。第二种：当学院下拉框发生改变时，需要清空班级下拉框，年级下拉框改变为请选择。年级下拉框发生改变时，班级下拉框变为请选择。

五、 涉及到的表格
涉及到学院表（SYS_Acdeme）、年级表（SYS_Grade）、班级表（SYS_Class）三张表格。其中在年级表中，必须包含学院表的主键（学院ID），用此来达到当选定了学院时，年级下拉框中显示出来的是选中的学院下的年级。班级表格与年级表类似，班级表中含有年级表的主键（年级ID），当选定了年级时，班级下拉框中显示出来的是选中的年级下的班级。

六、 下拉框的绑定
HTML代码：
在from标签中用lable标签包裹下拉框的名称，在其后面一个select标签。（lable标签中的for中的名称要与select标签中的id一致）。年级、班级下拉框类似。

JS代码
绑定下拉框的方法：createSelect
使用该方法中可以传入三个参数， 1、selectId：下拉框的id 2、url：操作该下拉框时需用到的url 3、value 设置值（进行下拉框回填时用）。根据传入的URL调用控制器中操作该下拉框时用到的方法，并用jsonData接收控制器返回的数据。判断传过来的下拉框的id中是否含有“#”，如果没有，则拼接一个“#”。清空需要操作的下拉框。for循环从控制器得到的数据。在需操作的下拉框id所在的元素（select标签）内部的后面拼接上option标签。其中，option标签中的value设置为控制器返回数据中的ID，控制器返回的文本则显示出来。判断value是否为空、空字符串或者为undefined，如果不是，该下拉框的值就是传入方法的值value。
indexOf () 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
append：在元素内部追加内容

绑定下拉框
调用绑定下拉框的方法createSelect，传入学院下拉框的id（searchAcademeID）和控制器中进行学院下拉框查询的方法名（selectAcademe），学院下拉框在这边的代码已经完成。使用学院下拉框的改变事件（$("#searchAcademeID").change(function () {}）。当学院下拉框发生改变时，触发年级下拉框的绑定，获取选中学院的ID（value中的值）。调用方法createSelect绑定年级下拉框，传入年级下拉框的id、控制器中执行该方法的方法名并且拼接上获取到的选中学院的学院ID。清空班级下拉框。达到当学院下拉框发生改变时，需要清空班级下拉框，年级下拉框改变为请选择的效果。当年级下拉框发生改变时，触发班级下拉框的绑定，获取选中学院的ID（value中的值）和选中年级的ID（value中的值）。调用方法createSelect绑定班级下拉框，传入班级下拉框的id、控制器中执行该方法的方法名并且拼接上获取到的选中学院的学院ID和选中年级年级ID。获取选中学院的学院ID和选中年级的年级ID是为了在下拉框中显示的是选中学院中的年级，选中年级中的班级。

实体类SelectVo
在实体类SelectVo中声明两个变量，int类型的id（用来接收返回数据的id），string类型的text（用来接收返回数据的文本）。

控制器代码
学院下拉框的查询
实例化一个SelectVo的列表对象selectList用来接收需要返回的数据。在selectList中添加一个id为0，文本为“----请选择----”的项用来拼接请选择项。达到下拉框在未点击时显示出“----请选择----”的效果。再声明一个SelectVo的列表对象listAcademe，用来接收从学院表查询出来的所有要传到页面的数据。使用lambda表达式，从学院表中查询出学院ID（AcademeID）将值赋予SelectVo得id，查询出学院名称，将值赋予给SelectVo的text。（也可以使用linq查询，直接从学院表中查询,和使用lambda表达式查询一样，在select后面new 一个 SelectVo。）然后将查询出来的数据添加到列表对象selectList中（用AddRange添加，AddRange：添加多条数据。Add：添加单条数据），以json格式返回selectList中的id和text。

年级下拉框的查询
年级下拉框的查询与学院下拉框的查询类似。不同的仅仅是在使用lambda表达式时在select查询之前添加查询的条件，即选中学院的ID。先实例化一个SelectVo的列表对象selectList，然后拼接请选择项，然后查询出年级的ID和名称，添加到先实例化一个SelectVo的列表对象selectList中，然后返回。班级下拉框的查询与年级的类似，仅仅在查询条件后面再添加一个查询条件（传入的年级ID与班级表中的年级ID相等）。

七、 下拉框数据的回填
下拉框数据的回填一般与修改数据时一起出现。当你点击修改按钮时，弹出修改的模态框，在修改模态框中的下拉框将显示出选中要修改的学生所在的学院、年级、班级。当然，也可以在该方法中回填下拉框之前先写下拉框的绑定，以达到修改的目的。使用post提交，将所需要提交的数据提交到控制器。用stuData接收从控制器返回的数据。在前面提到绑定下拉框的方法：createSelect时，说了createSelect中可以传入三个参数：1、selectId：下拉框的id 2、url：操作该下拉框时需用到的url 3、value 设置值。其中第三个参数value就可以将查询出来的相关数据返回到下拉框中，达到回填下拉框的效果。调用方法createSelect，传入需回填下拉框的id、控制器中执行该方法的方法名以及从控制器中返回数据中的该下拉框的ID（表格中的，即若是学院下拉框，则该ID为表格中的学院ID）。年级下拉框的回填需要和绑定类似，先拼接学院ID并回填，然后回填年级ID。回填班级下拉框也是如此，先拼接学院ID并回填和拼接年级ID并回填，最后回填班级ID。

根据下图可知，该表中包含学生ID、学院ID、年级ID、班级ID。因此，可以根据页面传入控制器的数据studentID从该表中用linq查询出需要的学院ID、年级ID、班级ID并将其返回。