基于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> <h1>Home Management Index</h1> </section>

对StudentManagementController的action添加对应的视图文件,代码如下:

@{ ViewData["Title"] = "Index"; } <section> <h1>Student Management Index</h1> </section>

两个视图里面都添加了一个H1标题,已区分不同的内容
5、使用libman添加对adminlte、bootstrap和font-awesome的引用
方法:wwwroot\lib 右键:添加->客户端库

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

注意: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 content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>@ViewBag.Title</title> <link href="http://www.likecs.com/~/lib/twitter-bootstrap/css/bootstrap.css" /> <link href="http://www.likecs.com/~/lib/font-awesome/css/font-awesome.css" /> <link href="http://www.likecs.com/~/lib/admin-lte/css/AdminLTE.css" /> <link href="http://www.likecs.com/~/lib/admin-lte/css/skins/_all-skins.css" /> <link href="http://www.likecs.com/~/lib/iCheck/skins/flat/blue.css" /> </head> @{ var controller = (string)ViewContext.RouteData.Values["Controller"]; } <body> <div> <header> <a href="#"> <span><b>A</b>LT</span> <span><b>Admin</b>LTE</span> </a> <nav> <a href="#" data-toggle="push-menu" role="button"> <span>切换导航</span> </a> <div> <ul></ul> </div> </nav> </header> <aside> <section> <div> <div> <img src="http://www.likecs.com/~/lib/admin-lte/img/user2-160x160.jpg" alt="User Image" /> </div> <div> <p>Alexander Pierce</p> <a href="#"><i></i> 在线</a> </div> </div> <!-- Search Form --> <form action="#" method="post"> <div> <input type="text" placeholder="Search..." /> <span> <button type="submit"><i></i></button> </span> </div> </form> <!-- /. Search Form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul data-widget="tree"> <li>主导航</li> @{ var mainList = new List<string>() { "HomeManagement" }; var mainActive = mainList.Contains(controller) ? "active" : ""; } <li> <a href="#"> <i></i><span>Home Management</span> <span> <i></i> </span> </a> <ul> <li @Html.Raw(controller == "HomeManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="HomeManagement"><i></i>Home Index</a></li> </ul> </li> @{ var studentList = new List<string>() { "StudentManagement" }; var studentActive = studentList.Contains(controller) ? "active" : ""; } <li> <a href="#"> <i></i><span>Student Management</span> <span> <i></i> </span> </a> <ul> <li @Html.Raw(controller == "StudentManagement" ? "class=\"active\"" : "")><a asp-area="Admin" asp-action="Index" asp-controller="StudentManagement"><i></i>Student Index</a></li> </ul> </li> <li> <a href="#"> <i></i> <span>Layout Options</span> <span> <span>4</span> </span> </a> <ul> <li><a href="#"><i></i> Top Navigation</a></li> <li><a href="#"><i></i> Boxed</a></li> <li><a href="#"><i></i> Fixed</a></li> <li><a href="#"><i></i> Collapsed Sidebar</a></li> </ul> </li> </ul> </section> </aside> <div> @RenderBody() </div> <footer> <div> <b>Version</b> 0.0.1 </div> <strong>Copyright &copy; @DateTime.Now.Year </strong> All rights reserved. </footer> </div> <script src="http://www.likecs.com/~/lib/jquery/dist/jquery.js"></script> <script src="http://www.likecs.com/~/lib/twitter-bootstrap/js/bootstrap.js"></script> <script src="http://www.likecs.com/~/lib/admin-lte/js/adminlte.js"></script> </body> </html>

_Layout.cshtml文件中AdminLTE主要分为如下及部分:

main-header

main-sidebar

content-wrapper

main-footer

其中,1、2、4在项目充基本是固定的,3是需要根据权限、人员进行动态分配的和调整的

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwxsz.html