下拉框数据的绑定

开发工具与关键技术：VS ；单表的linq语句 ，jquery
作者：刘佳明
撰写时间：2019年 4 月 20 日
（注：本文章中代码来源于老师的课件！！！！）;

现阶段正在学习MVC的相关知识，一些基本的增删查改，其中下拉框的作用就是用于数据查找选择的条件；
之前就有说，一个项目的完成，需要数据的支持，查询更加，试想你数据库中一条数据都没有，那么你查询的数据就会为空，代码操作也就变得没有意义；所以MVC一定需要一个数据库的支持，关于数据库的相干操作，我就不一一罗列！！！
首先，进行一些列MVC的具体构建；
于控制器中，编辑好你所要查询的数据；

public ActionResult SelectGradeByAcademeID(int AcademeID)//根据学院ID查询年级信息
        {
            var listGrade = (from tbGrade in myModel.SYS_Grade
                             join tbAcademe in myModel.SYS_Academe on tbGrade.AcademeID equals tbAcademe.AcademeID//连接.SYS_Academe 学院表
                             where tbGrade.AcademeID==AcademeID
//由于查询的是年级的信息，所以需要获取年级上一级表的ID作为条件来对查询的数据进行比对
                             select new
                             {
                                 id = tbGrade.GradeID,
                                 text = tbGrade.GradeName
                             }
                           ).ToList();//创建一个表格
            return Json(listGrade, JsonRequestBehavior.AllowGet);
        }

控制器中已经把需要查询的数据查询好，接下来就是在页面编辑下拉框的方法；
以下是页面中下拉框的HTML代码；

<label class="col-sm-1 col-form-label text-center">学院</label>
                        <div class="col-sm-3 px-0">
                            <select class="form-control" id="sltAcademe">
                                <option value="0">----请选择----</option>
                            </select>
                        </div>
                        <label class="col-sm-1 col-form-label text-center">年级</label>
                        <div class="col-sm-3 px-0">
                            <select class="form-control" id="sltGrade">
                                <option value="0">----请选择----</option>
                            </select>
                        </div>

你会发现，在本文中所描写的下拉框并非是第一个下拉框，在这之前也还存在一个学院的下拉框；在这里就需要注意，
当我们的下拉框不是出于第一个位置（第一位置即：下拉框数据绑定并不需要传递参数）；
我们就需要考虑下拉框数据绑定时，是否需要传递参数！

$("#sltAcademe").change(function () {
             var AcademeID = $("#sltAcademe").val();
            
             appendOption("sltGrade", "SelectGradeByAcademeID?AcademeID=" + AcademeID);
         });

当学院下拉框发生变化时，触发年级下拉框的数据绑定，appendOption（）；是构建的下拉框方法；
appendOption(id,url)；方法需要下拉框的ID，和控制器中查询数据的链接！！！

function appendOption(id,url) {
             $.post(url, function (data) {
                $("#"+id).empty();  //清空元素
                $("#" +id).append('<option value="0">----请选择----</option>');
                 $.each(data, function (i) {
                    $("#"+id).append('<option value="' + data[i].id + '">' + data[i].text + '</option>');
                });
             });
         }

完成数据的绑定，页面方法的调用；下拉框的效果图 如下：