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

说明：

.NET Core版本为:2.2 AdminLTE版本为:2.4.18 Bootstrap版本为:3.4.1 font-awesome版本为:4.7.0

1、新建项目：AdminLteDemo，添加区域Admin 在Areas/Admin/Views文件夹添加文件并分别添加如下代码：_ViewImports.cshtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewStart.cshtml

@{   Layout = "_Layout";
}

在Startup类中添加对区域路由的代码如下:

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?}");    });

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

[Area("Admin")]
public class HomeManagementController : Controller
{   public IActionResult Index()    {   return View();  }
}

StudentManagementController:

[Area("Admin")]
public class StudentManagementController : Controller
{   public IActionResult Index()    {   return View();  }
}

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

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

在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>

对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>

运行效果图

这种方法比较笨，后期优化功能

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

基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-2
来个目录吧: 第一章-入门第二章- Entity Framework Core Nuget包管理第三章-创建.修改.删除.查询第四章-排序.过滤.分页.分组第五章-迁移,EF Core 的co ...
asp.net core mvc接口，请求响应统一日志管理
如何为api所有的请求和响应做一个统一的日志记录 1.创建日志类 public class RequestResponseLog {public string Url { get; set; }pub ...
ASP.NET Core MVC中的viewmodel
简述: ViewModel是ASP.NET Core MVC应用中的隐式声明的层,用来维护Model和View之间的数据传递,是View的数据容器.Model向视图传递数据最可靠的方法是在视图中指定模 ...
创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表
创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表创建数据模型类(POCO类) 在Models文件夹下添 ...
007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】
索引: 目录索引 Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长本文内容 1.Ch ...
ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用
原文:ASP.NET Core 入门教程 2.使用ASP.NET Core MVC框架构建Web应用一.前言 1.本文主要内容使用dotnet cli创建基于解决方案(sln+csproj)的项目 ...
ASP.NET Core MVC – Caching Tag Helpers
ASP.NET Core Tag Helpers系列目录,这是第二篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
ASP.NET Core MVC 源码学习：详解 Action 的匹配
前言在上一篇文章中,我们已经学习了 ASP.NET Core MVC 的启动流程,那么 MVC 在启动了之后,当请求到达过来的时候,它是怎么样处理的呢? 又是怎么样把我们的请求准确的传达到我们的 ...
ASP.NET Core MVC上传、导入、导出知多少
前言本君已成夜猫子,本节我们来讲讲ASP.NET Core MVC中的上传,这两天在研究批量导入功能,本节顺便简单搞搞导入.导出,等博主弄妥当了再来和大家一并分享. .NET Core MVC上传 ...

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

运行效果图

这种方法比较笨，后期优化功能

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

最新文章

热门文章