Seite 3: Inhalt einer Razor Class Library

Eine Razor Class Library kann folgende Elemente enthalten:

• Razor Components (.razor-Dateien) ohne oder mit Code-Behind (.razor.cs), optional auch CSS-Datei (.razor.css)
• einfache C#-Klassen
• aus Sicht der Webserver statische Inhalte (Webelemente wie beispielsweise. CSS, JavaScript, Grafiken) in einem wwwroot-Ordner.

In der Projektvorlage der Razor Class Library (siehe unterer Teil in Abb. 3) befinden sich eine Grafik (wwwroot/background.png), eine JavaScript-Datei (wwwroot/exampleJsInterop.cs), ein zugehöriger C#-Wrapper (ExampleJsInterop.cs) sowie eine Razor Component (Component1.razor) mit zugehöriger CSS-Datei Component1.razor.css.

Eine Abhängigkeit zu einer Razor Class Library kann innerhalb einer Visual Studio-Projektmappe per Drag&Drop erstellt werden, wobei der Zielast "Dependencies" sein muss (siehe Pfeile in Abb. 3). Danach erscheint das Projekt im Unterast "Projects". Ein direktes Fallenlassen auf "Projects" ist kurioserweise nicht möglich. Alternativ können Entwickler und Entwicklerinnen im Kontextmenü von "Dependencies" oder "Projects" auch die Funktion "Add Project Reference" auswählen.

Einbettung und Routing von Razor Components

Die in einer Razor Class Library enthaltenen Razor Components lassen sich über ihren vollständigen Klassennamen inklusive Namensraum in Komponenten einbetten, zum Beispiel mit <RCLNamensraum.Counter>. Den Namensraum kann das Entwicklerteam per @using einbinden und damit das Tag auf den Klassennamen verkürzen:

@using SamplesRCL;
…
<Counter>

Razor Components in einer Razor Class Library können eine oder mehrere Routen in Form der @page-Direktive besitzen, wie Listing 1 veranschaulicht:

@page "/SamplesList"
@page "/Samples"

<h3>Weitere Blazor-Beispiele aus dem Buch <a href="https://it-visions.de/blazorbuch">'ASP.NET Core Blazor'</a></h3>

Listing 1: Ausschnitt aus SampleList.razor im Projekt SamplesRCL.csproj

Razor Components können auf eine solche Route verzichten. Razor Components ohne Route sind nur als Unterkomponenten oder eingebettete Komponenten in anderen Komponenten verwendbar. Für solche Unterkomponenten reicht die Projekt- oder NuGet-Referenz auf die Razor Class Library-Assembly-Komponenten, die eine eigene, mit @page deklarierte Route besitzen, können wahlweise in andere Komponenten eingebettet oder direkt aufgerufen werden.

Falls zumindest ein Razor Component in einer Razor Class Library eine Route besitzt, ist neben der Referenz auf die Razor Class Library ein weiterer Schritt notwendig: Die Razor Component-Assembly muss beim Router angemeldet werden. Dies erfolgt in der Datei App.razor durch das Attribut AdditionalAssemblies beim XML-Tag <Router> (Listing 2).

Beim Attribut AdditionalAssemblies muss nicht der Namen der Assembly sondern ein System.Assembly-Objekt übergeben werden. Typsicher gelingt dies, indem die Entwicklerin sich mit dem C#-Operator typeof() das Typobjekt einer beliebigen Klasse aus der Razor Class Library holt und dort auf das Property Assembly zugreift. Dies zeigt Listing 2:

<CascadingAuthenticationState>
 <Router AppAssembly="typeof(Startup).Assembly"
         AdditionalAssemblies="new[] { typeof(SamplesRCL.SampleList).Assembly }"
         >
  <Found Context="routeData">
   <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
  </Found>
  <NotFound>
   <h1>Page not found</h1>
   <p>Sorry, but there's nothing here!</p>
  </NotFound>
 </Router>
</CascadingAuthenticationState>

Listing 2: App.razor mit einem Zusatz bei AdditionalAssemblies

Bei der Einbindung von Routen aus Razor Class Library-Assemblies gilt, was auch für die Routen innerhalb eines Projekts gilt: Routen dürfen nicht doppelt vergeben sein. Dies führt bereits beim Start der Anwendung zu einem Laufzeitfehler. Abbildung 4 zeigt dies am Beispiel der Fehlerausgabe einer Blazor WebAssembly-Anwendung in der Konsole des Webbrowsers.