TablerForNet Blazor: स्थापना मार्गदर्शिका और एडमिन टेम्पलेट

Github TranslateForNet

NuGet TablerForNet · latest

सॉफ़्टवेयर स्टैक Blazor Server · VS 2026 · .NET 10 · TablerForNet

अंतिम अपडेट 29/1/2026

Blazor Server एप्लिकेशन में TablerForNet को एकीकृत करने के लिए पूर्ण चरण-दर-चरण मार्गदर्शिका। Bootstrap को Tabler आधारित आधुनिक, उत्तरदायी एडमिन UI फ्रेमवर्क से बदलें।

⤢

TablerForNet इंस्टॉल करने के लिए चरण-दर-चरण मार्गदर्शिका

यह मार्गदर्शिका एक नए Blazor Server .NET 7 प्रोजेक्ट पर इंस्टॉलेशन दिखाती है। कृपया निम्नलिखित चरणों का पालन करें:

• चरण 1: 'TablerForNet' NuGet पैकेज इंस्टॉल करें।
• चरण 2: आवश्यक 'usings' जोड़ें और Program.cs फ़ाइल में TablerForNet सेवा पंजीकृत करें।
• चरण 3: आवश्यक 'usings' को _imports.razor फ़ाइल में शामिल करें।
• चरण 4: PageTitle टैग संशोधित करें।
• चरण 5: 'tablerForNet' CSS और JS फाइलें _Host.cshtml में जोड़ें।
• चरण 6: Bootstrap और संबंधित संसाधन हटाएं।
• चरण 7: NavMenu.razor को आवश्यकतानुसार अपडेट करें।
• चरण 8: MainLayout.razor को परिष्कृत करें।
• चरण 9: Index, Counter, और FetchData पेजों को समायोजित करें।

चरण 1: NuGet पैकेज इंस्टॉलेशन

nuget.org पर निर्देशों के अनुसार आगे बढ़ें।

चरण 2: TablerForNet सेवा पंजीकृत करें

using TablerForNet;
 builder.Services.AddTablerForNet();

चरण 3: 'usings' शामिल करें

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

चरण 4: PageTitle टैग टकराव

TablerForNet के PageTitle टैग और Microsoft के PageTitle टैग के बीच नाम टकराव है। सुझाव है कि पहले वाले को हटाएं या इसे स्पष्ट रूप से 'TablerForNet.Components.PageTitle' नाम दें। निम्नलिखित फाइलों में संशोधन सुनिश्चित करें:

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

चरण 5: CSS और JS एकीकृत करें

<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 फ़ाइल में संबंधित लिंक नीचे दिखाए अनुसार हटाएं:

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

चरण 7: NavMenu का पुनर्निर्माण

<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 का परिष्कार

@inherits LayoutComponentBase

<NavMenu />

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

चरण 9: अन्य पेज समायोजित करें

नीचे देखा गया है कि index पेज में एक 'div' टैग जोड़ा गया है। इसे सभी अन्य पेजों में भी दोहराने की सलाह दी जाती है।

@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 प्रोजेक्ट में एकीकृत कर लिया है। इन चरणों के साथ, आप इस शक्तिशाली फ्रेमवर्क की पूरी क्षमता का उपयोग करने के लिए तैयार हैं। बेहतर क्षमताओं को अपनाएं और उत्कृष्ट वेब एप्लिकेशन बनाएं। यदि कोई चुनौती आए, तो याद रखें कि हर बाधा विकास का अवसर है। शुभ कोडिंग!