TablerForNet Blazor: Installationsanleitung und Admin-Template

Github TranslateForNet

NuGet TablerForNet · latest

Software-Stack Blazor Server · VS 2026 · .NET 10 · TablerForNet

Letzte Aktualisierung 29.01.2026

Ausführliche Schritt-für-Schritt-Anleitung zur Integration von TablerForNet in Blazor Server-Anwendungen. Ersetzen Sie Bootstrap durch ein modernes, responsives Admin-UI-Framework auf Tabler-Basis.

⤢

Schritt-für-Schritt-Anleitung zur Installation von TablerForNet

Die Anleitung zeigt die Installation in einem frischen Blazor Server .NET 7-Projekt. Bitte folgen Sie diesen Schritten:

• Schritt 1: Installieren Sie das NuGet-Paket 'TablerForNet'.
• Schritt 2: Fügen Sie die erforderlichen 'usings' hinzu und registrieren Sie den TablerForNet-Dienst in der Program.cs-Datei.
• Schritt 3: Binden Sie die notwendigen 'usings' in die _imports.razor-Datei ein.
• Schritt 4: Passen Sie das PageTitle-Tag an.
• Schritt 5: Fügen Sie die 'tablerForNet' CSS- und JS-Dateien in die _Host.cshtml-Datei ein.
• Schritt 6: Entfernen Sie Bootstrap und zugehörige Dateien.
• Schritt 7: Aktualisieren Sie NavMenu.razor entsprechend.
• Schritt 8: Verfeinern Sie MainLayout.razor.
• Schritt 9: Passen Sie die Seiten Index, Counter und FetchData an.

Schritt 1: NuGet-Paketinstallation

Führen Sie die Installation gemäß den Anweisungen auf nuget.org durch.

Schritt 2: Registrieren Sie den TablerForNet-Dienst

using TablerForNet;
 builder.Services.AddTablerForNet();

Schritt 3: 'Usings' einbinden

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

Schritt 4: Konflikt beim PageTitle-Tag

Es gibt eine Namenskollision zwischen dem PageTitle-Tag von TablerForNet und dem von Microsoft. Entfernen Sie entweder den TablerForNet-Tag oder benennen Sie ihn explizit in 'TablerForNet.Components.PageTitle' um. Passen Sie folgende Dateien an:

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

Schritt 5: CSS und JS einbinden

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

Schritt 6: Bootstrap entfernen

Löschen Sie den Bootstrap-Ordner im CSS-Verzeichnis. Entfernen Sie außerdem den Ordner 'open-iconic', da Sie die Tabler-Icons verwenden. Entfernen Sie den zugehörigen Link in der _Host.cshtml-Datei wie unten gezeigt:

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

Schritt 7: NavMenu überarbeiten

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

Schritt 8: MainLayout verfeinern

@inherits LayoutComponentBase

<NavMenu />

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

Schritt 9: Weitere Seiten anpassen

Wie unten zu sehen, wurde der Index-Seite ein 'div'-Tag hinzugefügt. Es wird empfohlen, dies auf alle anderen Seiten zu übertragen.

@page "/"

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

	Welcome to your new app.

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

Herzlichen Glückwunsch! Sie haben TablerForNet erfolgreich in Ihr Blazor-Projekt integriert. Mit diesen Schritten sind Sie bereit, das volle Potenzial dieses leistungsstarken Frameworks zu nutzen. Nutzen Sie die erweiterten Funktionen und erstellen Sie herausragende Webanwendungen. Sollten Sie auf Herausforderungen stoßen, denken Sie daran: Jede Hürde ist eine Chance zum Lernen. Viel Erfolg beim Programmieren!