将第三方 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. 创建项目#

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 对应目录下。你的目录看起来应该是这样的：

1
wwwroot/
2
  ├── css/
3
  │    └── adminlte.min.css
4
  ├── js/
5
  │    └── adminlte.min.js
6
  └── lib/
7
       ├── jquery/
8
       └── bootstrap/

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

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

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

14
        @await Html.PartialAsync("_SidebarPartial")
15

16
        <div class="content-wrapper">
17
            <div class="content-header">
18
                <div class="container-fluid">
19
                    <h1>@ViewData["PageHeader"]</h1>
20
                </div>
21
            </div>
22
            <section class="content">
23
                <div class="container-fluid">
24
                    @RenderBody() </div>
25
            </section>
26
        </div>
27

28
        <footer class="main-footer">
29
            <strong>Copyright &copy; 2026 YourApp.</strong>
30
        </footer>
31
    </div>
32

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

3. 提取部分视图#

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

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

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

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

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

五、总结#

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

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

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