TablerForNet Blazor 安装指南与管理模板

Github TranslateForNet
NuGet TablerForNet · latest
软件栈 Blazor Server · VS 2026 · .NET 10 · TablerForNet
最后更新 2026/1/29

完整分步指南，教你如何将 TablerForNet 集成到 Blazor Server 应用中，替换 Bootstrap，使用基于 Tabler 的现代响应式管理界面框架。

适用于 Blazor 的 TablerForNet 管理界面布局，展示现代仪表盘组件和导航
基于 Tabler 的现代 Blazor 管理界面，具备响应式布局和可复用 UI 组件

使用 TablerForNet 提升你的 Blazor 开发体验。该先进框架结合响应式设计与 SEO 功能，助力开发者打造用户体验优异且搜索引擎排名出色的网页应用。

TablerForNet 基于流行的 Tabler 管理模板，为 Blazor 提供超过 300 个 UI 组件。结合 完善的 SEO 元数据 和 支持文化识别的路由, 你可以构建具备良好搜索引擎排名的生产级应用。

如果你是 Blazor 新手，建议先阅读我们的 Blazor 入门指南 以了解框架基础知识。

目录

TablerForNet 安装分步指南

本指南演示如何在全新 Blazor Server .NET 7 项目中安装，请按以下步骤操作：

  • 步骤 1：安装 'TablerForNet' NuGet 包。
  • 步骤 2：添加必要的 'usings' 并在 Program.cs 文件中注册 TablerForNet 服务。
  • 步骤 3：在 _imports.razor 文件中引入所需的 'usings'。
  • 步骤 4：修改 PageTitle 标签。
  • 步骤 5：将 'tablerForNet' 的 CSS 和 JS 文件添加到 _Host.cshtml 文件。
  • 步骤 6：移除 Bootstrap 及相关资源。
  • 步骤 7：相应更新 NavMenu.razor。
  • 步骤 8：优化 MainLayout.razor。
  • 步骤 9：调整 Index、Counter 和 FetchData 页面。

步骤 1：NuGet 包安装

请按照 nuget.org 上的指南进行。

NuGet TablerForNet · latest

步骤 2：注册 TablerForNet 服务

C#Program.cs
using TablerForNet;
 builder.Services.AddTablerForNet();

步骤 3：引入 'usings'

Razor_Imports.razor
@using TablerForNet;
 @using TablerForNet.Components
 @using GhostlyInc.Components.Icons
 @using TablerForNet.Flags

步骤 4：PageTitle 标签冲突

TablerForNet 的 PageTitle 标签与微软内置的 PageTitle 标签命名冲突，建议删除前者或显式重命名为 'TablerForNet.Components.PageTitle'。请确保修改以下文件：

  • App.razor
  • Index.razor
  • Counter.razor
  • Fetchdata.razor
  • MainLayout.razor

步骤 5：集成 CSS 和 JS

HTML_Host.cshtml
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

步骤 6：删除 Bootstrap

删除 CSS 目录下的 Bootstrap 文件夹，同时移除 'open-iconic' 文件夹，因为你将使用 tabler 图标。并删除 _Host.cshtml 文件中的相关链接，如下所示：

Razor_Host.cshtml
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

步骤 7：重构 NavMenu

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" />
			</MenuItemIcon>
		</NavbarMenuItem>

步骤 8：微调 MainLayout

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

步骤 9：调整其他页面

如下所示，index 页面添加了一个 'div' 标签，建议在所有其他页面中也进行相同操作。

RazorIndex.razor
@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

恭喜！你已成功将 TablerForNet 集成到 Blazor 项目中。完成这些步骤后，你将充分发挥该强大框架的潜力。拥抱增强功能，打造卓越的网页应用。遇到挑战时，记住每个难关都是成长的机会。祝编码愉快！

常见问题解答

关于 TablerForNet 安装与使用的常见问题