基于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文件夹下添 ...

随机推荐

【程序人生】从湖北省最早的四位java高级工程师之一到出家为僧所引发的深思
从我刚上大学接触程序员这个职业开始,到如今我从事了七年多程序员,这期间我和我的不少小伙伴接受了太多的负面信息,在成长的道路上也真了交了不少的情商税.这些负面信息中,有一件就是我大学班主任 ...
合并多个jar包，并通过私服依赖
背景:许多jar包在maven仓库中没有,项目如果添加了许多的本地jar包,别人拿到代码也无法编译需求:将本地jar包上传至私服并设置依赖,如果jar包较多,但都从属于同一功能,需要合并为一个jar ...
谈谈JVM垃圾回收
概述 Java运行时区域中,程序计数器,虚拟机栈,本地方法栈三个区域随着线程的而生,随线程而死,这几个区域的内存分配和回收都具备确定性,不需要过多考虑回收问题.而Java堆和方法区则不一样,一个接口的 ...
js中更改this指向以及回顾bind、call和apply
1.更改this指向方法1:对this进行保存 var _this = this; 例: var _this = this; document.onclick = fu ...
appium+python自动化项目实战(一)：引入nose和allure框架
本文将介绍一套比较完整的appium自动化框架,以python为编写脚本语言,是因为python有强大的库,同时易学易懂. 最终的测试框架代码,将在jenkins项目中一键构建,执行自动化测试用例,并 ...
利用ShardingSphere-JDBC实现分库分表--配置中心的实现
在之前的文章中我详细描述了如何利用ShardingSphere-JDBC进行分库分表,同时也实现了简单的精确分库算法接口,详情见下面的链接: 利用ShardingSphere-JDBC实现分库分表但 ...
Win10环境下安装压缩包版本MySQL-8.0.13
准备工作系统环境:Windows 10 1803版本: 压缩包:MySQL-8.0.13 Windows zip包下载: 安装过程 1. 加载安装包到你的安装目录将下载的MySQL压缩包解压并移到 ...
Java NIO 下
内存映射文件 JAVA处理大文件,一般用BufferedReader,BufferedInputStream这类带缓冲的IO类,不过如果文件超大的话,更快的方式是采用MappedByteBuffer. ...
CodeForces 55D Beautiful numbers（数位dp+数学）
题目链接:http://codeforces.com/problemset/problem/55/D 题意:一个美丽数就是可以被它的每一位的数字整除的数. 给定一个区间,求美丽数的个数. 显然这是一道 ...
SPOJ - QTREE（树链剖分+单点更新+区间最大值查询）
题意:给出n个点n-1条边的树,有两个操作,一个是查询节点l到r的边的最大值,然后指定边的更改权值. 题解:差不多是树链剖分的模版题,注意每个点表示的边是连向其父亲节点的边. #include < ...

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

我的公众号

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

随机推荐

热门专题