C# MVC 使用LayUI实现下拉框二级联动的功能

一、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', 'layedit', 'laydate'], function () {
        var form = layui.form,//获取form模块
        layer = layui.layer,//获取layer模块
        layedit = layui.layedit,//获取layedit模块
        laydate = layui.laydate,//获取laydate模块
        $ = layui.$;
        // 得到部门
        $.ajax({
          url: "@Url.Action("GetDeplist")",
          dataType: 'json',
          type: 'post',
          success: function (result) {
              $.each(result.data, function (index, 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# 实现下拉框二级联动的资料请关注我们其它相关文章!

(0)

相关推荐

  • layui实现显示数据表格、搜索和修改功能示例

    本文实例讲述了layui实现显示数据表格.搜索和修改功能.分享给大家供大家参考,具体如下: <div style="text-align: center" id='btn'> <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete=&quo

  • C# MVC 微信支付教程系列之扫码支付代码实例

    今天,我们来一起探讨一下这个微信扫码支付.何为扫码支付呢?这里面,扫的码就是二维码了,就是我们经常扫一扫的那种二维码图片,例如,我们自己添加好友的时候,可以通过输入对方的微信号,也可以扫一扫对方的二维码.扫码支付,作为,微信支付里面,不可或缺的一个功能,对商品的支付提供了极为方便的体验,用途也非常的多. 例如我们在地铁.公交站常见的那些自动售货机(不错,就是那种投硬币,就可以自动出货的那种机器)中都用到.微信(支付宝)的扫码支付的出现,大大的减少了这方面的风险,近些年来,二维码的应用越来越广,甚

  • C#如何利用反射将枚举绑定到下拉框详解

    前言: 反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更加灵活. 在开发中,我们常常会遇到比如有些状态值在定义好后几乎从不改动,这时候使用数据库就显得有些多余了.首先想到的一个办法可能是在程序中创建一个数组来表示,此时,我们遇到了使用数组可能带来的第一个问题:不方便使用.当数组结构变更时,可能意味着所有使用过此数组的地方的索引都发生了变更,这是我们不想

  • C#省份城市下拉框联动简单实现方法

    本文实例讲述了C#省份城市下拉框联动简单实现方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: //定义字典 Dictionary<string, string> Address = new Dictionary<string, string>(); void loadData() {    //这是你要添加的数据   //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了     Address.Add("绵阳", "四川&quo

  • C#实现下拉框绑定list集合的方法

    本文实例讲述了C#实现下拉框绑定list集合的方法.分享给大家供大家参考.具体实现方法如下: 对象类: public class Area { //建议编写"实体类"的时候一定要用属性,不要用字段 //因为有些控件数据绑定的时候只认属性,不认字段(大多数都是) public int AreaId { get; set; } public string AreaName { get; set; } //public int AreaId; //public string AreaName

  • C# MVC 使用LayUI实现下拉框二级联动的功能

    一.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.la

  • js实现的下拉框二级联动效果

    本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun

  • vue实现下拉框二级联动效果的实例代码

    1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo

  • layui实现下拉框三级联动

    项目需要用layui的三级联动,自己整理了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称', `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码', `area_short` varchar(32) DEF

  • js实现下拉框二级联动

    在做项目的时候,一个添加问题题目,选项和答案的问题,题目类型分为选择题,判断题,和多选题三种,此处需要添加一个二级联动的功能,即当题型为选择题的时候,正确选项的下拉框里出现的是A,B,C,D.如果题型是判断题,正确选项的下拉框内容为正确,错误,如果题型类型为多选题,则正确答案的输入框变为可输入答案型的文本框.实现效果在文末. HTML的页面如下: <div class='form-group'> <label class='col-md-2 control-label'>题型<

  • layui固定下拉框的显示条数(有滚动条)的方法

    在css中加入下面代码: <style> .layui-form-select dl { max-height:200px; } </style> 以上这篇layui固定下拉框的显示条数(有滚动条)的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui给下拉框、按钮状态、时间赋初始值的方法

    如下所示: <!--弹框的dom结构--> <div id="add_activity"> <div style="width: 95%;height: 100%;margin: auto;"> <form class="layui-form" lay-filter="formTest"> <table class="layui-table">&l

  • ASP.NET MVC实现多选下拉框

    借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: Model模块 考虑到多选下拉<select multiple="multiple"...></select>选中项是string数组,Model应该这样设计: using System.Collections.Generic; using System.Web.Mvc; namespace MvcApplication1.Models { public c

  • ASP.NET MVC实现多选下拉框保存并显示

    在"ASP.NET MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌. 关于车迷的Model: namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public strin

  • Android实现联动下拉框二级地市联动下拉框功能

    日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤: 在实现联动下拉框之前,我们先对用到的ArrayAdapter和数据的封装作必要的了解,Android 中提供了很多适配器的实现类,其中ArrayAdapter就其中之一.它可以通过泛型来指定要适配的数据类型,然后在构造函数中把要适配的数据传入.如: ArrayAdapter<CharSequen

随机推荐