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# 实现下拉框二级联动的资料请关注我们其它相关文章!

时间: 2020-06-27

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#实现下拉框绑定list集合的方法

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

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

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

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

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

Java利用反射如何查找使用指定注解的类详解

前言 最近有些空,想自己写个跟spring里的注解一样的注解来用,然后希望能找到使用了自己写了注解的类,下面来介绍一下实现方法 声明,下面代码是没看过spring源码写的,基本上都是网上找的博客,整理的 定义注解 Controller.java @Target({ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) @Documented public @interface Controller { } RequestMapping.jav

vue.js select下拉框绑定和取值方法

最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

利用js获取下拉框中所选的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

Vue使用枚举类型实现HTML下拉框步骤详解

下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

Eclipse XSD 生成枚举类型的Schema的实例详解

Eclipse XSD 生成枚举类型的Schema的实例详解 前言: 因为网上关于Eclipse XSD的中文资料比较少,而且关于Eclipse XSD的范例代码也凤毛麟角,但是有的时候我们需要生成一个带枚举限定的简单类型的XSD Schema,比如下面的格式, <?xml version="1.0" encoding="UTF-8"?><schema xmlns="http://www.w3.org/2001/XMLSchema&quo

MVC5下拉框绑定的方法(单选)

本文实例为大家分享了MVC5下拉框单选绑定的具体代码,供大家参考,具体内容如下 1.Model [Display(Name = "学历")] public ICollection<System.Web.Mvc.SelectListItem> asdflist{ get; set; } //下拉框的类型 [Display(Name = "学历")] [Required] public int asdf { get; set; } //学历这个字段的属性 2

利用jQuery异步上传文件的插件用法详解

现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post

微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo