基於Asp.Net Core MVC和AdminLTE的響應式管理後臺之側邊欄處理

時間 2019-11-21

標籤基於 asp.net asp core mvc adminlte 響應管理後臺側邊欄處理欄目 ASP 简体版

原文原文鏈接

說明：
.NET Core版本爲:2.2
AdminLTE版本爲:2.4.18
Bootstrap版本爲:3.4.1
font-awesome版本爲:4.7.0css

一、使用VS 2017新建項目：AdminLteDemo，完成後添加區域Admin
在Areas/Admin/Views文件夾添加文件並分別添加以下代碼，主要爲引用和頁面佈局使用，這兩個文件直接從建立模板裏面建立就能夠，不用修更名稱：
_ViewImports.cshtmlhtml

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewStart.cshtmljquery

@{
    Layout = "_Layout";
}

二、在Startup類中添加對區域路由的代碼，使用Home管理做爲默認路由地址以下:bootstrap

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文件夾中添加兩個控制器
Home管理控制器HomeManagementController，記得添加區域信息，否則路由找不到內容，代碼以下:app

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

學生管理控制器StudentManagementController，記得添加區域信息，否則路由找不到內容，代碼以下:框架

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

四、對HomeManagementController的action添加對應的視圖文件，代碼以下：less

@{
    ViewData["Title"] = "Index";
}
<section class="content-header">
    <h1>Home Management Index</h1>
</section>

對StudentManagementController的action添加對應的視圖文件，代碼以下：ide

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

兩個視圖裏面都添加了一個H1標題，已區分不一樣的內容
五、使用libman添加對adminlte、bootstrap和font-awesome的引用
方法：wwwroot\lib 右鍵:添加->客戶端庫
佈局

注意：bootstrap 3.*版本爲twitter-bootstrap
因爲項目自帶的bootstrap版本爲4.*，因此須要添加對bootstrap 3.*版本引用post

在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主要分爲以下及部分：