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

随机推荐

nodeCZBK-笔记2
目录 day04 mongoDB数据库使用 day05 node使用mongoDB数据库 day04 mongoDB数据库使用电脑全局安装数据库开机命令:mongod --dbpath c:\mo ...
bs4-BeautifulSoup
1.BeautifulSoup下载 pip install BeautifulSoup4 或者 pip install bs4 pip install lxml #解析器 2.BeautifulSou ...
Oracle EM的重新配置和界面语言修改
实际在国内的DBA日常工作中,几乎很少会用到EM进行日常管理.但在Oracle的考试中,为了快速完成某些场景的应答,还是推荐使用EM进行操作的. 1.重新配置EM 2.修改界面语言 1.重新配置EM ...
unityshader(属性)
_Color("Color",Color)=(1,1,1,1)//RGBA _Vector("vector",Vector)=(1,2,3,4) //,fixe ...
使用WPF为Powershell程序制作GUI界面
1. 使用Xaml创建应用界面打开visual studio,创建一个新的项目,在已安装模板中选择Visual C# →Wpf应用. 完成创建后,我们得到如下图所示的应用界面. wpf界面是基于xa ...
利用poi包装一个简单的Excel读取器.一（适配一个Reader并提供readLine方法）
通常,读文本我们会使用BufferedReader,它装饰或者说管理了InputStreamReader,同时提供readLine()简化了我们对文本行的读取.就像从流水线上获取产品一样,每当取完一件 ...
fiddler的安装与使用（二）使用fiddler捕获会话信息
前章回顾: 上一遍文章我们已经安装好了fiddler,并解了fiddler的工作原理,接下来开始使用fiddler捕获浏览器会话信息. fiddler基本界面: 首先启动fiddler,然后打开浏览器 ...
SDU暑期集训排位（5）
SDU暑期集训排位(5) A. You're in the Army Now 题意类似选志愿.每个人有 mark,有优先级从高到低的志愿. 做法定睛一看,鲨鼻题.然后 WA. 为什么会 WA 呢? ...
yzoj P2044 数字游戏题解
题意 dfs骗了30分,一开始想的距离正解差一点啊,贪心加dp就可以过的水题,真正太蒻了解析代码 #include<bits/stdc++.h> using namespace std ...
SpringCloud学习笔记(3)：使用Feign实现声明式服务调用
简介 Feign是一个声明式的Web Service客户端,它简化了Web服务客户端的编写操作,相对于Ribbon+RestTemplate的方式,开发者只需通过简单的接口和注解来调用HTTP API ...

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

我的公众号

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

随机推荐

热门专题