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

随机推荐

浏览器DOM渲染及阻塞问题
在准备面试,然后复习到了计网的知识点,紧接着又扯到了url从输入到浏览器渲染的那个问题,这里来顺便完善补充一下,本文的重点在渲染上面的图就是浏览器从服务器请求来页面后渲染的全过程这里我们分开来看: ...
二级小兵——工厂模式（Factory Method）
前言上一篇我们介绍了单例模式,今天给大家讲一个比较简单的模式——工厂模式(Factory Method),工厂模式又是什么呢?顾名思义,工厂——生产制造东西的地方.那么应用在程序当中该如何使用.并且 ...
用代码说话：synchronized关键字和多线程访问同步方法的7种情况
synchronized关键字在多线程并发编程中一直是元老级角色的存在,是学习并发编程中必须面对的坎,也是走向Java高级开发的必经之路. 一.synchronized性质 synchronized是 ...
RobotFrameWork Web自动化测试环境搭建
前言 Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式测试执行.主要用于轮次很多的验收 ...
转载-Springboot整合ehcache缓存
转载:https://www.cnblogs.com/xzmiyx/p/9897623.html EhCache是一个比较成熟的Java缓存框架,最早从hibernate发展而来, 是进程中的缓存系统 ...
怎样用QT在windows环境通过编程卸载installShield打包的程序
通常情况下,如果是一个完备的软件,我们可以通过启动软件的uninstaller.exe之类的程序来完成卸载.但是使用installShield打包的程序,本身可能并不含有这类卸载程序.此时,我们可以通 ...
P1357 花园状压矩阵快速幂
题意小L有一座环形花园,沿花园的顺时针方向,他把各个花圃编号为1~N(2<=N<=10^15).他的环形花园每天都会换一个新花样,但他的花园都不外乎一个规则,任意相邻M(2<=M& ...
牛客暑假多校第五场 D inv
题意:给你一个n, 接来下给你一个 [1,n] 中偶数的排列, 还有一个 [1, n] 中奇数按照递增的顺序排列, 现在求一个原数列, 使得偶数列排序和奇数列都是原数列的一个子序列, 现在求 ...
HDU 2561 二小整数
第二小整数 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
Codeforces Round #381 (Div. 2) C. Alyona and mex（无语）
题目链接 http://codeforces.com/contest/740/problem/C 题意:有一串数字,给你m个区间求每一个区间内不含有的最小的数,输出全部中最小的那个尽量使得这个最小值最 ...

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

我的公众号

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

随机推荐

热门专题