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

随机推荐

EVE-NG入门篇
目录一.EVE-NG配置要求二.EVE-NG 安装三.基于OVA的安装步骤四.导入设备介绍五.启动设备六.与secure CRT关联七.常见问题一.EVE-NG配置要求 1.最低配置 ...
H5对自定义属性的规定和添加获取自定义属性的方法
H5对自定义属性的规定和添加获取自定义属性的方法元素属性那么多,如何区分是自带的属性还是默认的属性呢? H5规定自带的属性有个data- 前缀,如data-index="1" & ...
网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...
shiro实现session共享（本文转自店蛋蛋）
session共享:在多应用系统中,如果使用了负载均衡,用户的请求会被分发到不同的应用中,A应用中的session数据在B应用中是获取不到的,就会带来共享的问题. 假设:用户第一次访问,连接的A服务器 ...
git之旅，畅游git的世界
今天小铭酱带大家探索一下git的奥秘! 1.初步探索首先我在一个空的文件夹新建了一个名叫hello.html文件,文件内容只有一句话“hello git”.我们先引入git,看看git能为我们它能干 ...
Tesseract：简单的Java光学字符识别
1.1 介绍开发具有一定价值的符号是人类特有的特征.对于人们来说识别这些符号和理解图片上的文字是非常正常的事情.与计算机那样去抓取文字不同,我们完全是基于视觉的本能去阅读它们. 另一方面,计算机的工 ...
HDU 5135
题意略. 思路: 本题开始我先写了一发dfs暴力,然而递归程度太深,导致爆栈.仔细回想一下dfs的过程,发现最不好处理的就是每收集到3个木棍,才能构成一个三角形. 并且,还有一个隐患就是不能完全枚举出 ...
Java Server Page
Java Server Page 一.JSP起源在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变. 如果使用Servlet程序来输出只有局部内容需要动态改变的网页,其中所 ...
ESXi安装报错，No network adapters were detected...
转载请在文章开头附上原文链接地址:https://www.cnblogs.com/Sunzz/p/11438066.html 报错内容 No network adapters No Network a ...
c3p0，dbcp与druid 三大连接池的区别[转]
说到druid,这个是在开源中国开源项目中看到的,说是比较好的数据连接池.于是乎就看看.扯淡就到这. 下面就讲讲用的比较多的数据库连接池.(其实我最先接触的是dbcp这个) 1)DBCP DBCP是一 ...

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

我的公众号

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

随机推荐

热门专题