基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

说明：

.NET Core版本为:2.2

AdminLTE版本为:2.4.18

Bootstrap版本为:3.4.1

font-awesome版本为:4.7.0

1、使用VS 2017新建项目：AdminLteDemo，完成后添加区域Admin

在Areas/Admin/Views文件夹添加文件并分别添加如下代码，主要为引用和页面布局使用，这两个文件直接从创建模板里面创建就可以，不用修改名称：

_ViewImports.cshtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewStart.cshtml

@{

    Layout = "_Layout";

}

2、在Startup类中添加对区域路由的代码，使用Home管理作为默认路由地址如下:

app.UseMvc(routes =>

{

     routes.MapRoute(

         name: "areas",

         template: "{area:exists}/{controller=HomeManagement}/{action=Index}/{id?}");

     routes.MapRoute(

          name: "default",

          template: "{controller=Home}/{action=Index}/{id?}");

 });

3、在Areas/Admin/Contorllers文件夹中添加两个控制器

Home管理控制器HomeManagementController，记得添加区域信息，不然路由找不到内容，代码如下:

[Area("Admin")]

public class HomeManagementController : Controller

{

    public IActionResult Index()

    {

        return View();

    }

}

学生管理控制器StudentManagementController，记得添加区域信息，不然路由找不到内容，代码如下:

[Area("Admin")]

public class StudentManagementController : Controller

{

    public IActionResult Index()

    {

        return View();

    }

}

4、对HomeManagementController的action添加对应的视图文件，代码如下：

@{

    ViewData["Title"] = "Index";

}

<section class="content-header">

    <h1>Home Management Index</h1>

</section>

对StudentManagementController的action添加对应的视图文件，代码如下：

@{

    ViewData["Title"] = "Index";

}

<section class="content-header">

    <h1>Student Management Index</h1>

</section>

两个视图里面都添加了一个H1标题，已区分不同的内容

5、使用libman添加对adminlte、bootstrap和font-awesome的引用

方法：wwwroot\lib 右键:添加->客户端库

注意：bootstrap 3.*版本为twitter-bootstrap

由于项目自带的bootstrap版本为4.*，所以需要添加对bootstrap 3.*版本引用

在Areas/Admin/Views添加Shared文件夹，并添加_Layout.cshtml文件，代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />

    <title>@ViewBag.Title</title>

    <link rel="stylesheet" href="~/lib/twitter-bootstrap/css/bootstrap.css" />

    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />

    <link rel="stylesheet" href="~/lib/admin-lte/css/AdminLTE.css" />

    <link rel="stylesheet" href="~/lib/admin-lte/css/skins/_all-skins.css" />

    <link rel="stylesheet" href="~/lib/iCheck/skins/flat/blue.css" />

</head>

@{

    var controller = (string)ViewContext.RouteData.Values["Controller"];

}

<body class="hold-transition skin-blue sidebar-mini">

    <div class="wrapper">

        <header class="main-header">

            <a href="#" class="logo">

                <span class="logo-mini"><b>A</b>LT</span>

                <span class="logo-lg"><b>Admin</b>LTE</span>

            </a>

            <nav class="navbar navbar-static-top">

                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">

                    <span class="sr-only">切换导航</span>

                </a>

                <div class="navbar-custom-menu">

                    <ul class="nav navbar-nav"></ul>

                </div>

            </nav>

        </header>

        <aside class="main-sidebar">

            <section class="sidebar">

                <div class="user-panel">

                    <div class="pull-left image">

                        <img src="~/lib/admin-lte/img/user2-160x160.jpg" class="img-circle" alt="User Image" />

                    </div>

                    <div class="pull-left info">

                        <p>Alexander Pierce</p>

                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>

                    </div>

                </div>

                <!-- Search Form -->

                <form action="#" method="post" class="sidebar-form">

                    <div class="input-group">

                        <input type="text" name="q" class="form-control" placeholder="Search..." />

                        <span class="input-group-btn">

                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>

                        </span>

                    </div>

                </form>

                <!-- /. Search Form -->

                <!-- sidebar menu: : style can be found in sidebar.less -->

                <ul class="sidebar-menu" data-widget="tree">

                    <li class="header">主导航</li>

                    @{

                        var mainList = new List<string>()

                                                {

                                                    "HomeManagement"

                                                };

                        var mainActive = mainList.Contains(controller) ? "active" : "";

                    }

                    <li class="@mainActive treeview">

                        <a href="#">

                            <i class="fa fa-dashboard"></i><span>Home Management</span>

                            <span class="pull-right-container">

                                <i class="fa fa-angle-left pull-right"></i>

                            </span>

                        </a>

                        <ul class="treeview-menu">

                            <li @Html.Raw(controller == "HomeManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="HomeManagement"><i class="fa fa-circle-o"></i>Home Index</a></li>

                        </ul>

                    </li>

                    @{

                        var studentList = new List<string>()

                                    {

                                        "StudentManagement"

                                    };

                        var studentActive = studentList.Contains(controller) ? "active" : "";

                    }

                    <li class="@studentActive treeview">

                        <a href="#">

                            <i class="fa fa-dashboard"></i><span>Student Management</span>

                            <span class="pull-right-container">

                                <i class="fa fa-angle-left pull-right"></i>

                            </span>

                        </a>

                        <ul class="treeview-menu">

                            <li @Html.Raw(controller == "StudentManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="StudentManagement"><i class="fa fa-circle-o"></i>Student Index</a></li>

                        </ul>

                    </li>

                    <li class="treeview">

                        <a href="#">

                            <i class="fa fa-files-o"></i>

                            <span>Layout Options</span>

                            <span class="pull-right-container">

                                <span class="label label-primary pull-right">4</span>

                            </span>

                        </a>

                        <ul class="treeview-menu">

                            <li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>

                            <li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>

                            <li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>

                            <li><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>

                        </ul>

                    </li>

                </ul>

            </section>

        </aside>

        <div class="content-wrapper">

            @RenderBody()

        </div>

        <footer class="main-footer">

            <div class="pull-right hidden-xs">

                <b>Version</b> 0.0.1

            </div>

            <strong>Copyright &copy; @DateTime.Now.Year  </strong> All rights reserved.

        </footer>

    </div>

<script src="~/lib/jquery/dist/jquery.js"></script>

<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>

<script src="~/lib/admin-lte/js/adminlte.js"></script>

</body>

</html>

_Layout.cshtml文件中AdminLTE主要分为如下及部分：

main-header
main-sidebar
content-wrapper
main-footer

其中，1、2、4在项目充基本是固定的，3是需要根据权限、人员进行动态分配的和调整的

运行效果图

需要解决的问题：

动态菜单分配问题

希望AdminLTE能出一版bootstr 4.*的后台管理框架

我的公众号

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理的更多相关文章

基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-1
来个目录吧: 第一章第二章第三章暂时就这么多.后面路线更新吧本系列文章为翻译加上我个人的使用心得理解,希望帮助热爱学习的程序员. 珍重声明:本系列文章会跟原文有点出入,去掉了罗里吧嗦的文字. ...
基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-4
来个目录吧: 第一章-入门第二章- Entity Framework Core Nuget包管理第三章-创建.修改.删除.查询第四章-排序.过滤.分页.分组第五章-迁移,EF Core 的co ...
基于 Asp.Net Core MVC 的 Angular4 SSR 英雄指南
为啥有这篇文章在之前,类似 Angular.React.Vue 之类的前端框架的一个痛点就是无法在服务端提前把网页内容写入到网页中再发回浏览器,这给网站的 SEO 增加了不少困难,因为爬虫爬到的页面 ...
使用 ASP.NET Core MVC 创建 Web API——响应数据的内容协商（七）
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-2
来个目录吧: 第一章第二章第三章暂时就这么多.后面路线更新吧 Entity Framework Core Nuget包管理如果你创建项目的时候启用了个人身份验证的话,项目中就已经包含了EFCo ...
基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-3
来个目录吧: 第一章第二章第三章暂时就这么多.后面路线更新吧创建.查询.更新.删除这章主要讲解使用EF完成增删改查的功能. 自定义"详情信息"页面我们通过基架生成的代 ...
基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-5
来个目录吧: 第一章-入门第二章- Entity Framework Core Nuget包管理第三章-创建.修改.删除.查询第四章-排序.过滤.分页.分组第五章-迁移,EF Core 的co ...
《Pro Asp.net core mvc 2》bower问题
在阅读<Pro Asp.net core mvc 2>中有使用bower管理包,可能是由于vs2017或者bootstrap什么地方改变了,按照步骤进行操作,完全没有对应的样式出现.开始以 ...
创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表
创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表创建数据模型类(POCO类) 在Models文件夹下添 ...

随机推荐

go 学习笔记之是否支持以及如何实现继承
熟悉面向对象的小伙伴们可能会知道封装,继承和多态是最主要的特性,为什么前辈们会如此看重这三种特性,真的那么重要吗? 什么是封装什么是封装,封装有什么好处以及怎么实现封装? 相信大多数小伙伴们都有自己 ...
如何运用PHP+REDIS解决负载均衡后的session共享问题
一.为什么要使用Session共享? 稍大一些的网站,通常都会有好几个服务器,每个服务器运行着不同功能的模块,使用不同的二级域名,而一个整体性强的网站,用户系统是统一的,即一套用户名.密码在整个网站的 ...
unity之初级工程师
一.值类型与引用类型值类型的变量直接存储数据,而引用类型的变量持有的是数据的引用,数据存储在数据堆中.值类型变量声明后,不管是否已经赋值,编译器为其分配内存.值类型的实例通常是在线程栈上分配的(静态 ...
Java基础之Collection与Collections浅析
Java基础之Collection与Collections浅析一.前言: 位于Java.util包下的Collection与Collections都是Java中重要的工具类,它们都是Java集合框架 ...
原型工具介绍———墨刀以及Axure RP比较
原型工具——墨刀以及Axure的比较 1759233 目录一.了解背景... 1 二.下面分开介绍一下这两款工具... 1 2.1 Axure RP. 1 2.2墨刀... 6 三.比较... 8 ...
GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结
今天晚上去参加了winter主持的前端夜话:聊聊前端工程师的成长和发展圆桌论坛分享会,真的是收益颇多,这次的这个嘉宾阵容也是很有诚意的,在现在前端领域都是有一定影响力的嘉宾,嘉宾阵容也列一下: 主 ...
在Azure云上实现postgres主备切换
以下是工作上实现postgres主备切换功能所用到的代码和步骤,中间走了不少弯路,在此记录下.所用到的操作系统为centos 7.5,安装了两台服务器,hostname为VM7的为Master,VM8 ...
P1357 花园状压矩阵快速幂
题意小L有一座环形花园,沿花园的顺时针方向,他把各个花圃编号为1~N(2<=N<=10^15).他的环形花园每天都会换一个新花样,但他的花园都不外乎一个规则,任意相邻M(2<=M& ...
HDU - 4009 - Transfer water 朱刘算法 +建立虚拟节点
HDU - 4009:http://acm.hdu.edu.cn/showproblem.php?pid=4009 题意: 有n户人家住在山上,现在每户人家(x,y,z)都要解决供水的问题,他可以自己 ...
【牛客Wannafly挑战赛12】题解
传送门:https://www.nowcoder.com/acm/contest/79#question 说是比赛题解,其实我只会前三题: 后面的一定补 T1 题意,在一个长度为n的时间内,问如何选择 ...

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

我的公众号

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理的更多相关文章

随机推荐

热门专题