C#实现Layui框架菜单联动

风竹罄晚

已于 2023-10-08 16:01:50 修改

阅读量288

点赞数

文章标签： c# layui 开发语言

于 2023-10-07 14:21:29 首次发布

本文链接：https://blog.csdn.net/fengzhuqingwan/article/details/133638443

版权

C#实现Layui框架菜单联动

- cshtml代码
- 后台代码

cshtml代码

@model Model.Sys_Members
@{
    ViewBag.Title = "首页";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title - 管理平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @Html.RenderCss(this.Url, DTO.Enum.ResourceLocation.Head, true)
    @Html.RenderScript(this.Url, DTO.Enum.ResourceLocation.Head, true)
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">科技管理平台</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            @*<ul class="layui-nav layui-layout-left">
                </ul>*@
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="/icon/DefaultAvatar.png" class="layui-nav-img">
                        @ViewBag.UserName
                    </a>
                    <dl class="layui-nav-child">
                        @*<dd><a href="@Url.Action("ChangePwd", "Home")">修改密码</a></dd>*@
                        @*<dd><a href="@Url.Action("ClearCache", "Home")">清除缓存</a></dd>*@
                        <dd><a href="@Url.Action("Logout", "Home")">注销登录</a></dd>
                    </dl>
                </li>
                @*<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-more-vertical"></i>
                        </a>
                    </li>*@
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="demo">
                    @*<li class="layui-nav-item  layui-nav-itemed" style=" display: @isShow;"><a href="@Url.Action("HomeIndex", "Home")" id="0" onclick="return false"><img src="~/icon/index.png" class="layui-nav-img">首页</a></li>*@
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-card-body">
                <!--页面选项卡-->
                <div id="indixe-tab">
                    <div class="layui-tab" lay-allowClose="true" lay-filter="demo1" style="margin:0px;padding:0px;">
                        <ul class="layui-tab-title" id="tabUL">
                            @*<li lay-id="0" class="layui-this" style=" display: @isShow;">首页<i class="layui-icon layui-icon-close layui-unselect layui-tab-close" style="display:none;"></i></li>*@
                        </ul>
                        <div class="layui-tab-content" style="margin:0px;padding:0px;" id="tabDiv">
                            @*<div class="layui-tab-item layui-show" style=" display: @isShow;"><iframe src="/Home/HomeIndex" style="width:100%;height:800px;display: @isShow;" scrolling="auto" frameborder="0"></iframe></div>*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="layui-footer">-->
        <!-- 底部固定区域 -->
        <!--</div>-->
    </div>
</body>
</html>
<style>
    .layui-tab-title .layui-this {
        color: #009fff;
    }
</style>
<script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var $ = layui.jquery
                , element = layui.element;

            element.on('nav(demo)', function (elem) {
                //console.log(elem);//得到当前点击的DOM对象
                //console.log(elem.context.id);
                //console.log(elem.context.href);//跳转链接
                //console.log(elem.context.text);
                var href = elem.context.href;
                var id = elem.context.id;
                var exist = $("li[lay-id='" + id + "']").length;//判断是否存在已打开的tab
                if (exist == 0 && href != "javascript:;") {
                    element.tabAdd('demo1', {
                        title: elem.context.text //用于演示
                        , content: '<iframe src=' + href + ' style="width:100%;height:800px;" scrolling="auto" frameborder="0"></iframe>'
                        , id: id
                    })
                }
                element.tabChange('demo1', id);
            });
            //获取所有的菜单
            $.ajax({
            url: "@Url.Action("GetUserRoleMenus", "System")",
            type: "post",
            dataType: "json",
                success: function (data) {
                    //先添加所有菜单
                    $.each(data.Data, function (i, obj) {
                        var icon_Url = obj.Icon_Url == null ? "/icon/tag.png" : obj.Icon_Url;
                        var content = '';
                        var firsthref = 'javascript:;';
                        if (i == 0) {
                            var classThis = "";
                            if (obj.Children == null) {
                                classThis = "layui-this";
                                firsthref = obj.Pageurl;
                            }
                            content = '<li class="layui-nav-item layui-nav-itemed ' + classThis +'">';
                        } else {
                            content = '<li class="layui-nav-item">';
                        }
                        content += '<a href="' + firsthref + '"  id=' + obj.Id + ' οnclick="return false"><img src=' + icon_Url + ' class="layui-nav-img">' + obj.Name + '</a>';
                        //这里是添加所有的子菜单
                        content += loadchild(obj,i);
                        content += '</li>';
                        $(".layui-nav-tree").append(content);
                    });
                    element.init();
                },
                error: function (jqXHR) {
                    aler("发生错误：" + jqXHR.status);
                }
            });

            //组装子菜单的方法
            function loadchild(obj, obji) {
                if (obj == null) {
                    return;
                }
                var content = '';
                if (obj.Children != null && obj.Children.length > 0) {
                    content += '<dl class="layui-nav-child">';
                } else {
                    content += '<dl>';
                    if (obj.Children == null && obji == 0) {
                        content += '<dd class="layui-this">';
                        $("#tabUL").append('<li lay-id="' + obj.Id + '" class="layui-this">' + obj.Name + '<i class="layui - icon layui - icon - close layui - unselect layui - tab - close"></i></li>');
                        $("#tabDiv").append('<div class="layui-tab-item layui-show"><iframe src=' + obj.Pageurl + ' style="width:100%;height:800px" scrolling="auto" frameborder="0"></iframe></div>');
                    }
                }

                if (obj.Children != null && obj.Children.length > 0) {
                    $.each(obj.Children, function (i, note) {
                        var icon_Url = note.Icon_Url == null ? "/icon/tag.png" : note.Icon_Url;
                        if (i == 0 && obji==0) {
                            content += '<dd class="layui-this">';
                            $("#tabUL").append('<li lay-id="' + note.Id + '" class="layui-this">' + note.Name + '<i class="layui - icon layui - icon - close layui - unselect layui - tab - close"></i></li>');
                            $("#tabDiv").append('<div class="layui-tab-item layui-show"><iframe src=' + note.Pageurl + ' style="width:100%;height:800px" scrolling="auto" frameborder="0"></iframe></div>');
                        } else {
                            content += '<dd>';
                        }

                        content += '<a href=' + note.Pageurl + ' id=' + note.Id + '  οnclick="return false"><img src=' + icon_Url + ' class="layui-nav-img">' + note.Name + '</a>';
                        if (note.Children == null) {
                            return;
                        }
                        content += loadchild(note);
                        content += '</dd>';
                    });

                    content += '</dl>';
                }
                return content;
            }
        });
</script>

后台代码

 public class UserMenuRoleService : ServicesBase, IUserMenuRoleService
    {
        #region 菜单

        /// <summary>
        /// 获取菜单树结构
        /// </summary>
        /// <returns></returns>
        public List<MenuResponse> GetTreeMenu(byte node_Type)
        {
            List<MenuResponse> treeViewModels = new List<MenuResponse>();
            var query = DbContext.Query<Sys_Page>();
            if (node_Type > 0)
            {
                query = query.Where(x => x.Node_Type.Value == node_Type);
            }
            var list = query.ToList();
            treeViewModels = AddChildN(list, 0);
            return treeViewModels;
        }

        private List<MenuResponse> AddChildN(List<Sys_Page> allMenu, long Pid)
        {
            var data = allMenu.Where(x => x.UpId == Pid).OrderBy(x => x.Sort);
            List<MenuResponse> list = new List<MenuResponse>();
            foreach (var item in data)
            {
                MenuResponse childViewModel = Mapper.Map<MenuResponse>(item);
                childViewModel.Children = GetChildList(allMenu, childViewModel);
                list.Add(childViewModel);
            }
            return list;
        }

        private List<MenuResponse> GetChildList(List<Sys_Page> allMenu, MenuResponse treeChild)
        {
            if (!allMenu.Any(x => x.UpId == treeChild.Id))
            {
                return null;
            }
            else
            {
                return AddChildN(allMenu, treeChild.Id);
            }
        }

        /// <summary>
        /// 获取用户角色菜单
        /// </summary>
        /// <param name="userId"></param>
        /// <returns></returns>
        public List<MenuResponse> GetUserRoleTreeMenus(int userId, List<Sys_Page> userRoles)
        {
            if (userRoles.Count() == 0)
            {
                userRoles = GetAllUserRole(userId, 1);
            }

            //查询对应的所有菜单，并进行封装展示
            List<MenuResponse> resultList = AddChildN(userRoles, 0);
            return resultList;
        }

        /// <summary>
        /// 获取所有权限无级联
        /// </summary>
        /// <param name="userId"></param>
        /// <param name="node_Type"></param>
        /// <returns></returns>
        public List<Sys_Page> GetAllUserRole(int userId, byte node_Type)
        {
            //1、先查询当前用户对应的角色
            var user_Roles = DbContext.Query<Sys_Members>().Where(x => x.id == userId).ToList();
            var menuIds = new List<int>();
            foreach (var user_Role in user_Roles)
            {
                var role_Menus = DbContext.Query<Sys_RolePageMapping>().Where(x => x.Role_Id == user_Role.Role_Id).Select(x => x.Page_Id.Value).ToList();
                menuIds.AddRange(role_Menus);
            }
            //查询对应的菜单
            var menus = DbContext.Query<Sys_Page>().Where(x => menuIds.Contains(x.Id)).ToList();
            foreach (var menu in menus)
            {
                //将菜单下对应的父节点也一并全部查询出来
                if (!string.IsNullOrEmpty(menu.Path))
                {
                    var pathIds = menu.Path.Split(',').Select(x => Convert.ToInt32(x)).ToList();
                    menuIds.AddRange(pathIds);
                }
            }
            menuIds = menuIds.Distinct().ToList();//去重
            //3、查询对应的所有菜单
            var query = DbContext.Query<Sys_Page>().Where(x => menuIds.Contains(x.Id));
            if (node_Type > 0)
            {
                query = query.Where(x => x.Node_Type == node_Type);
            }
            return query.ToList();
        }

        #endregion 菜单
    }