将第三方 Bootstrap 模板应用于 ASP.NET Core：AdminLTE 实战

对于后端开发者而言，从零编写一个美观、响应式的后台管理界面极具挑战。AdminLTE 作为 GitHub 上最受欢迎的开源后台模板，不仅功能丰富，而且完美适配 ASP.NET Core MVC 架构。

本文将带你实战：如何将 AdminLTE v3 模板深度整合进 ASP.NET Core 项目。

一、核心逻辑：理解布局拆分

在整合模板前，最重要的一点是：不要把数千行的 HTML 全部丢进一个文件。我们需要将 AdminLTE 的静态页面拆解为 ASP.NET Core 的布局页（Layout）和部分视图（Partial Views）。

二、项目初始化与资源管理

1. 创建项目

dotnet new mvc -n MyAdminApp

2. 现代化的包管理：弃用 Bower

AdminLTE 依赖大量前端库（jQuery, Bootstrap, FontAwesome）。在现代 ASP.NET Core 中，推荐使用 LibMan (Library Manager)：

右键项目 -> 添加 -> 客户端库。
提供程序选择 unpkg，库搜索 admin-lte@3.2.0。
将资源输出至 wwwroot/lib/admin-lte。

三、深度整合实战

1. 整理 wwwroot 结构

将 AdminLTE 压缩包中 dist 文件夹下的 css、js 和 img 拷贝至 wwwroot 对应目录下。你的目录看起来应该是这样的：

wwwroot/
  ├── css/
  │    └── adminlte.min.css
  ├── js/
  │    └── adminlte.min.js
  └── lib/
       ├── jquery/
       └── bootstrap/

2. 重构 `Views/Shared/_Layout.cshtml`

这是整合的核心。我们需要保留 AdminLTE 的外壳结构，并将变化的内容区域替换为 @RenderBody()。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewData["Title"] - 企业后台管理</title>
    <link rel="stylesheet" href="~/lib/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="~/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        @await Html.PartialAsync("_NavbarPartial")

        @await Html.PartialAsync("_SidebarPartial")

        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                    <h1>@ViewData["PageHeader"]</h1>
                </div>
            </div>
            <section class="content">
                <div class="container-fluid">
                    @RenderBody() </div>
            </section>
        </div>

        <footer class="main-footer">
            <strong>Copyright &copy; 2026 YourApp.</strong>
        </footer>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/adminlte.min.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

3. 提取部分视图

为了保持布局页简洁，建议将导航栏和侧边栏提取到单独的 .cshtml 文件中：

Views/Shared/_NavbarPartial.cshtml
Views/Shared/_SidebarPartial.cshtml

四、进阶：动态激活菜单项

在整合后，开发者常遇到的问题是“点击左侧菜单后，不知道哪个菜单该亮起”。你可以通过自定义一个 TagHelper 或者简单的视图逻辑来实现：

@{
    var currentController = ViewContext.RouteData.Values["Controller"]?.ToString();
}
<li class="nav-item">
    <a asp-controller="User" asp-action="Index" 
       class="nav-link @(currentController == "User" ? "active" : "")">
        <i class="nav-icon fas fa-user"></i>
        <p>用户管理</p>
    </a>
</li>

五、总结

通过上述步骤，你已经成功将 AdminLTE 的静态 HTML 转化为了动态的 ASP.NET Core 布局引擎。

将第三方 Bootstrap 模板应用于 ASP.NET Core：AdminLTE 实战

一、 核心逻辑：理解布局拆分

二、 项目初始化与资源管理