一、layui.use

1、LayUI的官方使用文件：https://www.layui.com/doc/

2、layui的內建模組不是預設就載入好的，必須要執行啟動模組的這種方法後模組才會載入；

3、layui.use就是一種載入模組的方式。

如下程式碼：

//LayUI渲染以及啟動模組
   layui.use(['form','layedit','laydate'],function () {
        var form = layui.form,//獲取form模組
        layer = layui.layer,//獲取layer模組
        layedit = layui.layedit,//獲取layedit模組
        laydate = layui.laydate,//獲取laydate模組
        $ = layui.$;

二、建立控制器或在已有的控制器中新增在操作方法

/// <summary>
    /// 獲取部門資訊
    /// </summary>
    [HttpPost]
    public JsonResult GetDeplist()
    {
      using (ERPEntities db = new ERPEntities())
      {
        db.Configuration.ProxyCreationEnabled = false;//關閉EF的預設載入
        var Deplist = db.dep.ToList();
        //將資料Json化並傳到前臺檢視
        return Json(new { data = Deplist },JsonRequestBehavior.AllowGet);
      }
    }

    　 /// <summary>
     /// 通過部門ID來獲取角色
     /// </summary>
     /// <param name="dep_id">部門ID</param>
     /// <returns></returns>
     [HttpPost]
    public JsonResult GetRolelist(int dep_id)
    {
      using (ERPEntities db = new ERPEntities())
      {
        db.Configuration.ProxyCreationEnabled = false;//關閉EF的預設載入
        var Roles = db.role.Where(r => r.dep_id == dep_id).ToList();//通過部門ID 查詢到對應的角色
        List<SelectListItem> item = new List<SelectListItem>();
        foreach (var Role in Roles)
        {
          item.Add(new SelectListItem { Text = Role.name,Value = Role.role_id.ToString() });
        }
        //將資料Json化並傳到前臺檢視
        return Json(new { data = item },JsonRequestBehavior.AllowGet);
      }
    }

三、在需要顯示多級聯動的檢視頁面寫上如下程式碼

<!--部門角色二級聯動-->
  <div class="layui-form-item">
    <label class="layui-form-label">部門：</label>
    <div class="layui-input-inline">
      <select name="Dep" lay-filter="parentDep" id="Dep">
        <option value="">——請選擇部門——</option>
      </select>
    </div>
    <label class="layui-form-label">角色：</label>
    <div class="layui-input-inline">
      <select name="Role" id="Role" lay-filter="RoleInfo">
        <option value="">——請選擇角色——</option>
      </select>
    </div>
  </div>

四、JS部分的程式碼

　　注意：有的夥伴可能需要先引入jquery；根據自己的需求以及實際情況進行引入

<script src="~/Scripts/jquery-3.5.1.js"></script>
<script type="text/javascript">
    // 封裝獲取角色的函式：通過部門ID得到角色
    function getRoles(data) {
      //獲取到部門框中的Value部門的ID
      var dep_id = {
        dep_id: data.value
      }
     //再利用ajax將資料傳到後端，來獲取到對應下拉框選項而出現的值
    //檢查專案新增到下拉框中
    $.ajax({
      url: "@Url.Action("GetRolelist")",dataType: 'json',data: JSON.stringify(dep_id),//將引數Json化，在傳遞給後臺控制器
      contentType: "application/json",type: 'post',success: function (result) {
        console.info(result.data);
        $("#Role").empty();//清空下拉框的值
        $.each(result.data,function (index,item) {
          $('#Role').append(new Option(item.Text,item.Value));// 下拉選單裡新增元素
        });
        layui.form.render("select");//重新渲染 固定寫法
      }
    });
  };
  //LayUI渲染以及啟動模組
   layui.use(['form',//獲取laydate模組
        $ = layui.$;
        // 得到部門
        $.ajax({
          url: "@Url.Action("GetDeplist")",success: function (result) {
              $.each(result.data,item) {
                $('#Dep').append(new Option(item.name,item.dep_id));// 下拉選單裡新增元素
          });
          layui.form.render("select");//重新渲染 固定寫法
          }
        });
        // 聯動
        form.on('select(parentDep)',function (data) {
          //監聽到了下拉框選擇的選項，傳遞過來
          //console.info(data);
          getRoles(data);
        });
    });
</script>

1.select的chage監聽事件使用：

form.on('select(myselect)',function(data){}） 其中myselect是select的 lay-filter屬性值

2.資料非同步載入到select的option中之後，點選該select會發現layui的選中效果不起作用，需要使用
form.render('select');重新渲染一次，就可以正常使用。

聯動效果如下：

以上就是C# MVC 使用LayUI實現下拉框二級聯動的功能的詳細內容，更多關於C# 實現下拉框二級聯動的資料請關注我們其它相關文章！