Routing-Wiederverwendungsfunktion für mehrere Tabs der Ant Design Blazor-Komponentenbibliothek

In letzter Zeit besteht eine wachsende Nachfrage nach der Implementierung einer Multi-Tab-Komponente in der Ant Design Blazor-Komponentenbibliothek. Also habe ich das Wochenende genutzt, um die Komponente „ReuseTabs“ basierend auf der Komponente „Tabs“ in Kombination mit der integrierten Routing-Komponente von Blazor zu implementieren.

In letzter Zeit besteht eine wachsende Nachfrage nach der Implementierung einer Multi-Tab-Komponente in der Ant Design Blazor-Komponentenbibliothek. Also habe ich das Wochenende genutzt, um ReuseTabs Komponente basierend auf Tabs -Komponente in Kombination mit der integrierten Routing-Komponente von Blazor zu implementieren.

Vorwort

Blazor ist das neueste Front-End-Framework für .NET. Es kann Front-End-Anwendungen basierend auf WebAssembly oder SignalR (WebSocket) erstellen. Blazor basierend auf dem WebAssembly-Hostingmodell kann sogar offline ausgeführt werden. Darüber hinaus kann die .NET-Klassenbibliothek gemeinsam genutzt werden, wodurch die Codemenge im Vergleich zum vorherigen JS-basierten Modell der Trennung von Front-End und Back-End um 1/3 reduziert werden kann. Jetzt können .NET-Entwickler die ihnen vertrauten Technologien und Erfahrungen auch für die Entwicklung von Front-End-Anwendungen nutzen. Die Kommunikationskosten zwischen Entwicklern mit unterschiedlichen Technologie-Stacks werden ebenfalls erheblich reduziert, was wiederum die Produktivität steigert.

Blazor ist also eine weitere Produktivitätstechnologie für .NET-Entwickler!

Durch die Verwendung der Open-Source-UI-Komponentenbibliothek des Blazor-Community-Ökosystems werden häufig verwendete Komponenten gekapselt und Benutzer müssen nicht mehr JS und CSS schreiben, was bei den .NET-Entwicklern in der Community großes Lob hervorgerufen hat. Derzeit wurden zahlreiche auf Blazor basierende Anwendungen auf Unternehmensebene bereitgestellt und gestartet und werden nach und nach von Unternehmen anerkannt.

Text

Was ist Routing-Multiplexing mehrerer Tabs

Die Routenwiederverwendung im Titel dieses Artikels ist ein Konzept in Angulars RouteReuseStrategy , das in der chinesischen Community häufig als „Multi-Tab-Seiten“ bezeichnet wird. Seine Hauptfunktion besteht darin, den Status der Seite beim Seitenwechsel beizubehalten, und der aktuell angezeigte Seitenstatus kann durch beliebiges Seitenwechseln wiederhergestellt werden. Es wird normalerweise in komplexeren Backend-Verwaltungssystemen verwendet. Nach dem Filtern des Formulars kann der Benutzer die Seite mit den Datensatzdetails aufrufen und dann zur Listenseite zurückkehren, wobei die ursprünglichen Suchbedingungen, die Anzahl der Seiten usw. beibehalten werden. Oder beim Ausfüllen eines Formulars muss er auf eine andere Seite wechseln, um die richtigen Informationen anzuzeigen. Beim Zurückkehren zum Formular geht der eingegebene Inhalt nicht verloren.

Aufgrund des natürlichen Vorteils der Wiederverwendung von C#-Code wird Blazor häufig zum Erstellen von Hintergrundverwaltungssystemen verwendet, sodass die Verwendung von Registerkarten zu einer allgemeinen Forderung geworden ist. Das offizielle Blazor-Team hat uns jedoch keine solche Komponente direkt zur Verfügung gestellt, daher benötigen wir für die Implementierung Partner in der Community.

Wenn man sich jedoch mehrere Open-Source-Komponentenbibliotheken in der Community ansieht, implementieren sie alle nur die allgemeine Registerkartenkomponente und können nur als Umschaltfeld verwendet werden. Um die Funktion „Multi-Tab“ zu implementieren, wird sie entweder nicht unterstützt, oder Sie müssen sich direkt oder indirekt auf Ihre eigenen Menükomponenten und Layoutkomponenten verlassen und sich dann auf den Seitendateipfad verlassen, den Seitenkomponententyp aufspleißen und schließlich Reflektion verwenden, um die Seitenkomponente zu erstellen …

Obwohl sie die Multi-Tab-Funktion implementieren, ist die Implementierung nicht sehr elegant. Der Kopplungsgrad ist sehr hoch und kann nur im eigenen Framework-Layout der Komponentenbibliothek verwendet werden und nicht separat verwendet werden. Darüber hinaus ist die Leistung der Reflexion nicht gut und die Seiten müssen gemäß der Vereinbarung platziert werden, was den Benutzern verschiedene Einschränkungen auferlegt.

Natürlich gibt es in der Community eine anerkanntere Lösung, nämlich das BlazorDemoMultiPagesTab -Projekt. Es bietet einen Prototyp, der das Routing mehrerer Tabs durch die Kombination der integrierten Routing-Komponenten von Blazor implementiert. Das Problem ist jedoch, dass es sich nur um eine Demo handelt. Es implementiert nur das Prinzip. Der Code ist chaotisch. Der Autor hat ihn weder organisiert noch in Komponenten verpackt. Wenn Sie ihn in Ihrem eigenen Projekt verwenden möchten, werden Sie sich definitiv die Haare raufen.

ReuseTabs-Komponente in Ant Design Blazor

In letzter Zeit besteht eine wachsende Nachfrage nach der Implementierung einer Multi-Tab-Komponente in der Ant Design Blazor-Komponentenbibliothek. Also habe ich die Zeit am Wochenende genutzt, um ReuseTabs Komponente auf Grundlage der Tabs Komponente zu implementieren, und zwar auf Grundlage der Ideen aus BlazorDemoMultiPagesTab und in Kombination mit der in Blazor integrierten Routing-Komponente.

Die Komponente ReuseTabs enthält nur zwei Unterkomponenten: ReuseTabsRouteView und ReuseTabs . ReuseTabsRouteView erbt von der integrierten Komponente RouteView und ist dafür verantwortlich, den Lebenszyklus der Seitenkomponente zu übernehmen, sodass die Seitenkomponente ihren Status beibehalten oder zerstört werden kann; ReuseTabs ist für die Anzeige und Interaktion der Registerkarten verantwortlich. Darüber hinaus besteht keine Abhängigkeit zu anderen Komponenten wie Menüs und Layouts, sodass es direkt in jeder Blazor-Anwendung eingesetzt werden kann und auch mit anderen Komponentenbibliotheken gut verwendet werden kann.

Hauptmerkmale

• Zum Anwenden müssen Sie nur zwei Codes ändern
• Unterstützt die statische oder dynamische Festlegung von Tag-Namen
• Synchronisieren Sie mit der Route, unterstützen Sie verschiedene Umleitungsmethoden wie z. B. <a> -Tag, NavigationManger usw.

Im Folgenden wird die grundlegende Verwendung am Beispiel des neuen Dotnet-Vorlagenprojekts vorgestellt.

Anwendung

Installieren Sie zunächst das AntDesign-Paket und die Dienstregistrierung, wie in der Ant Design Blazor-Dokumentation beschrieben.

Ändern Sie dann die Datei App.razor im Projekt und ersetzen Sie RouteView durch ReuseTabsRouteView .

<Router AppAssembly="@typeof(Program).Assembly">
    <Gefunden Context="routeData">
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Gefunden>
    ...
</Router>

Ändern Sie die Datei MainLayout.razor im Projekt.

@inherits LayoutComponentBase

<div Klasse="Seite">
    <div Klasse="Seitenleiste">
        <Navigationsmenü />
    </div>

    <div Klasse="Haupt">
- <div Klasse="top-row px-4">
- <a href="http://blazor.net" rel="external nofollow" target="_blank" class="ml-md-auto">Über</a>
- </div>
- <div Klasse="Inhalt px-4">
- @Körper
- </div>
+ <ReuseTabs Class="obere Zeile px-4" TabPaneClass="Inhalt px-4" />
    </div>
</div>

Zwei Möglichkeiten zum Anpassen von Tag-Namen

Wenn es einfacher Text ist, können Sie ReuseTabsPageTitle in der Seitenkomponente verwenden.

@page "/Zähler"
+ @attribute [ReuseTabsPageTitle("Zähler")]

Wenn Sie die Vorlage verwenden müssen, um dynamische Registerkartennamen abzurufen, z. B. um eine weitere Komponente hinzuzufügen oder den Titel aus dem Seiteninhalt abzurufen, müssen Sie IReuseTabsPage implementieren:

@Seite "/"
+ @implements IReuseTabsPage

<h1>Hallo Welt!</h1>

@Code{
+ öffentliches RenderFragment GetPageTitle() =>
+ @<div>
+ <Icon Type="home"/> Startseite
+ </div>
+ ;
}

Hinweis: Die ReuseTabs Komponente befindet sich derzeit im täglichen Build-Paket der Version 0.9.0. Bevor sie offiziell veröffentlicht wird, müssen Sie zur Installation die im Dokument beschriebene Methode verwenden.

Nachfolgende Funktionen

Derzeit implementiert diese Komponente nur grundlegende Funktionen. Einige Funktionen sind in den folgenden Plänen enthalten:

• Rechtsklickmenü
• Codemodus geschlossen
• Caching-Strategie
• Routing-Guards und Berechtigungskontrolle

Nachtrag

Die Blazor-Community fordert seit über einem Jahr mehrere Tabs und in den letzten Tagen wurde dieser Wunsch nun endlich Wirklichkeit. Die Communitys im In- und Ausland jubeln und verspüren ein großes Erfolgserlebnis.

Um Einzelheiten zur Implementierung zu erfahren, können interessierte Studierende den Quellcode von Ant Design Blazor einsehen, der nur aus wenigen Dateien besteht. Wenn viele Studierende interessiert sind, kann ich natürlich auch einen ausführlichen Vorstellungsartikel schreiben.

Tatsächlich hoffe ich, dass mehr Enthusiasten in der Community aufstehen, ihre Erfahrungen teilen und zu Open-Source-Projekten beitragen, damit sich die Community gesund entwickeln kann.
Die Entwicklung von Ant Design Blazor dauerte über ein Jahr, aber ehrlich gesagt sind mein Zeitaufwand und mein Beitrag im Vergleich zu den Autoren anderer Komponentenbibliotheksprojekte nicht so groß. Neben der Code-Beitragsarbeit widme ich einen Großteil meiner Energie dem Community-Betrieb.
Das Projekt zu fördern, aus Passanten Benutzer und dann Benutzer Mitwirkende zu machen, sodass mehr Leute jeweils einen kleinen Energieaufwand betreiben können, um den Effekt zu erzielen, dass alle einen Beitrag leisten, ist die langfristige Strategie, um Open-Source-Projekte lange aktiv zu halten.

Abschließend möchten wir unseren Benutzern und Mitwirkenden für ihre Unterstützung sehr dankbar sein! Jedes ihrer Probleme, Fälle und PRs ist eine Bestätigung für uns und eine treibende Kraft für uns, durchzuhalten!

Referenzlinks

https://github.com/BlazorPlus/BlazorDemoMultiPagesTab

https://github.com/ant-design-blazor/demo-reuse-tabs

https://antblazor.com/docs/nightly-build

Dies ist das Ende dieses Artikels über die Routing-Wiederverwendung mehrerer Registerkarten in der Ant Design Blazor-Komponentenbibliothek. Weitere relevante Inhalte zur Ant Design Blazor-Komponentenbibliothek finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!