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

最新推荐文章于 2023-07-06 16:10:01 发布

dotNET跨平台

最新推荐文章于 2023-07-06 16:10:01 发布

阅读量861

点赞数

说明：

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

运行效果图

640?wx_fmt=png

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

640?wx_fmt=jpeg

dotNET跨平台

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

说明：.NET Core版本为:2.2AdminLTE版本为:2.4.18Bootstrap版本为:3.4.1font-awesome版本为:4.7.01、新建项目...
复制链接

扫一扫