ASP.NET Core Blazor ist ein neuer Ansatz für das Entwickeln eines Web Frontends. Dabei gibt es zwei Varianten:

• Blazor Server-Side: User-Interface-Aktualisierung werden mithilfe einer SignalR-Verbindung vom Server an den Browser gesendet.
• Blazor Client-Side (WebAssembly): Beim Blazor Client-Side handelt es sich um einen vollständigen Single Page Application (SPA) Ansatz, der die Erstellung einer clientseitigen interaktiven Webanwendung erleichtert. Hierbei spielt WebAssembly (wasm) eine ganz wichtige Rolle.

Problem

Ist es möglich, mit Blazor eine Webanwendung aufzubauen, ohne sich explizit für ein Hosting-Model Server- oder Clientside entscheiden zu müssen?

Aktion

Die Antwort auf die Frage: Ja. Sowohl die statischen Files, als auch ganze Blazor Pages lassen sich in eine eigene Razor Class Library in Form einer Komponente auslagern. Beide Hosting-Ansätze können diese Library nutzen. Folgende Schritte sind nötig, um eine gemeinsame Komponente zu erstellen:

1. Erstellen einer Razor Class Library.
2. Eine neue Blazor Page (*.razor) zum Projekt hinzufügen.

Beispiel-Seite (Index.razor):

@page "/index"

<h1>Guten Tag</h1>

Sobald die Schritte durchgeführt wurden, kann die Komponente im Server-Side Blazor wie folgt verwendet werden:

1. Projekt im Blazor referenzieren.
2. Im Router des “App.razor” als “AdditionalAssemblies” angeben, damit die Blazor-Applikation weiss, dass weitere Pages in einer anderen Assembly vorhanden sind.

Beispiel (App.razor):

<Router AppAssembly="@typeof(Startup).Assembly"
        AdditionalAssemblies="new[] { typeof(Index).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Wird die Applikation gestartet, ist die Beispiel-Seite unter “/index” erreichbar.

In unserem GitHub-Repository befindet sich eine vollständige Demo.

Resultat

Wird eine solche Class Library aufgebaut, ermöglicht dies einen Wechsel der Komponente zwischen Server- und Client-Side. Ob dies notwendig ist, muss je nach Situation evaluiert werden.

Ein Anwendungszweck kann zum Beispiel die Zentralisierung von Feedback-, Kontakt- oder Impressum-Pages sein.