如何来创建一个带上下级的部门管理（添加功能）

1、创建添加视图

2、视图里创建部门的视图html

HTML代码：

<table class="table table-bordered">
    <tr>
        <td>部门名称：</td>
        <td><input type="text" id="dname" /></td>
    </tr>
    <tr>
        <td>上级部门：</td>
        <td>
            <select id="parent_id">
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td> <button class="btn btn-success" onclick="InsertDep()">提交</button></td>
    </tr>
</table>

注意事项：

控件的ID一定要和实体类里的ID相对应

3、DAL层编写下拉框绑定方法（查询下拉框数据）

         首先在DAL层注入DBHelper

using TMS.DAL;

namespace WebDep.DAL
{
    public class DepDAL
    {
        /// <summary>
        /// DBHelper
        /// </summary>
        private readonly DbHelper _dbHelper;

        /// <summary>
        /// 构造函数注入 构造函数的方法名称必须和类名一样
        /// </summary>
        /// <param name="dbHelper"></param>
        public DepDAL(DbHelper dbHelper)
        {
            _dbHelper = dbHelper;
        }



    }
}

然后在DAL层编写查询方法

        /// <summary>
        /// 查询所有的部门列表
        /// </summary>
        /// <returns></returns>
        public List<Dep> GetDepList()
        {
            string sql = "select * from Dep";
            return _dbHelper.GetAllData<Dep>(sql);
        }

4、BLL层调用DAL层的方法

using WebDep.DAL;

namespace WebDep.BLL
{
    public class DepBLL
    {
        /// <summary>
        /// DAL
        /// </summary>
        private readonly DepDAL _depDAL;
        
        /// <summary>
        /// 依赖注入DAL
        /// </summary>
        /// <param name="depDAL"></param>
        public DepBLL(DepDAL depDAL)
        {
            _depDAL = depDAL;
        }
    }
}

BLL层调用DAL层的方法

        /// <summary>
        /// 查询所有的部门列表
        /// </summary>
        /// <returns></returns>
        public List<Dep> GetDepList()
        {
            return _depDAL.GetDepList();
        }

5、控制器调用BLL层的方法

控制器注入BLL

        private readonly DepBLL _depBLL;

        public DepController(DepBLL depBLL)
        {
            _depBLL = depBLL;
        }

控制器编写查询方法

/// <summary>
/// 获取部门列表
/// </summary>
/// <returns></returns>
//执行增删改要使用post请求[HttpPost]
//执行查询要使用get请求 [HttpGet]
[HttpGet]
public JsonResult GetDepList()
{
    var list = _depBLL.GetDepList();
    return Json(list);
}

6、视图的前台调用控制器的方法

<script>
//JQuery的定义是$

//需要页面加载就执行下拉框绑定
//文档就绪函数
$(function () {

})

</script>

//js中定义方法的关键字 funtion

//绑定下拉框
function BindDepList() {
    //1、第一个参数是URL 请求的控制器的值
    //2、第二个参数是请求的参数  格式是一个Json格式
    //3、第三个参数是回调函数

    var data = {

    }

    //最重要的！！！！！！！
    console.log(data)

    //发起Ajax请求
    //第一个参数就是控制器的对应方法名。也就是第五步控制器里编写的方法
    $.get("/Dep/GetDepList", data, res => {
        console.log(res)

        var html = "<option value=0>最上级部门</option>"
        // 1、要遍历的对象
        // 2、回调函数
        $.each(res, function () {
            //当前正在遍历的对象就是this
            console.log(this)
            //this的取值取自实体类的字段，直接复制实体类的字段放到这里来
            html += `<option value="${this.did}">${this.dname}</option>`;
        })

        //把拼接好的字符串放到下拉框中
        //#是ID选择器，#后面的ID要和视图里select的ID一致
        $("#parent_id").html(html)
    })
}

然后在就绪函数里 调用 绑定下拉框的方法

//文档就绪函数
$(function () {
   BindDepList()
})

7、引用JQ文件

打开目录

Views-Shared- _Layout.cshtml

下拉框实现效果