新增下拉框绑定

开发工具与关键技术：MVC
作者：文泽钦

撰写时间：2019年4月29日
新增模态框的div容器，新增的员工信息的代码有点多，所以页面上的员工员工编号、姓名等文本框就不一一展示了，可以看看数据库里一个员工需要新增那些数据，把需要新增的每一条数据都用文本框显示在页面上，在手动录入：

<div class="modal fade" id="modInsertExaminee">
   @*代码块员工信息获取*@
            </div>

给新增按钮一个点击事件：

<button type="button" class="btn btn-sm btn-primary mr-1" onclick="openInsertModal()">新增</button>

点击新增弹出新增模态框，清空表单的内容，清除上一条新增员工信息（历史记录）：

function openInsertModal() {
        //选择新增模态框的内容，直接清空
        $("#formInsertExaminee").resetForm();
        //部门下拉框数据绑定，获取部门ID,然后是部门查询的查询路径selectDepartment            
        createSelect("IsDepartmentID", "selectDepartment");
        //职位下拉框数据绑定，获取职位ID，然后是职位查询的查询路径selectPosition
        createSelect("IsPositionID", "selectPosition");
        //清空部门、职位下拉框
        $("#IsDepartmentID").empty();
        $("#IsPositionID").empty();
        //打开新增模态框
        $("#modInsertExaminee").modal("show");
    }

新增模态框：

写部门、职位下拉框数据查询方法前，要先写一个显示值，一个获取值的类，就是创建一个实体类：

public class SelectVo{
    //选择值，页面获取到的值
    public int id { get; set; }
    //显示值，页面显示的值
    public string text { get; set; }
}

拼接“请选择”选项时，需要用到一个加密的实体类，也可以不写，我在这用上了加密的实体类，加密的实体类比较复杂，我就不把这个实体类写在这了。
这个是拼接请选择的实体类写法，也是固定写法，直接复制用就行了：

public class Tools{
    public static List<SelectVo> SetSelectJson(List<SelectVo> select)//SetSelectJson调用这个方法
    {
        //创建列表对象
        List<SelectVo> list = new List<SelectVo>();
        //创建实体对象
        SelectVo selectVo = new SelectVo
        {
            id = 0,
            text = "---请选择---"
        };
        //将实体对象添加到对象列表
        list.Add(selectVo);
        //将数据集添加到对象列表
        list.AddRange(select);
        return list;//返回数据
    }
}

部门查询，在只是一个单表查询，所以比较简单，接收页面传过来的路径，然后就是查询方法，新建一个实体类，接收页面传过来的id，返回显示值，在页面上不可能显示一个id给用户看的，所以要把id对应的值显示给用户看，用户才知道这个员工是那个部门的：

public ActionResult selectDepartment()
   {
     //查询方法,从数据库中拿到部门表的信息
     List<SelectVo> listDepartment = (from tbDepartment in MyModels.SYS_Department
       //把查询到的部门部门信息放到，新建的这张表里
       select new SelectVo{
                            //这张表主要查询两个值
                            id = tbDepartment.DepartmentID,//部门id
                            text=tbDepartment.DeoartmentName//部门名称
                                         }).ToList();

        //拼接“请选择”选项
        listDepartment = Common.Tools.SetSelectJson(listDepartment);
        //返回到页面
        return Json(listDepartment, JsonRequestBehavior.AllowGet);
    }

在这次练习上的部门表跟职位表是没有关联，所以部门与职位表这两张表都是独立的，职位表查询方法与部门表查询方法也是一样的，把部的查询方法复制一份，把路径、职位、查询的部门表、获取值显示值都改成职位表、职位的信息部门与职位下拉框数据就绑定以及回填成功来：