© deomis/Shutterstock.com
Wiederverwendung in Blazor mit fortgeschrittenen Razor Components

Komponieren mit Blazor


Razor Components sind sowohl das Grundkonzept von Blazor WebAssembly und Blazor Server als auch der Schlüssel zur effizienten Programmierung durch Kapselung und Wiederverwendung.

Eine Razor Component kann in der @page-Direktive eine Route besitzen und damit per URL aufrufbar sein. Jede Razor Component kann darüber hinaus in andere eingebettet werden. In diesem Beitrag geht es zunächst um die Basistechnik der Einbettung und den Datenaustausch mit dem Host über Parameter und Ereignisse. Danach behandelt der Beitrag fortgeschrittene Mechanismen wie kaskadierende Parameter und Razor Components mit Templates.

Einbetten von Razor Components

Eine Razor Component in eine andere einzubetten geht ganz leicht: Man verwendet ein Tag im Razor-Template-Code, das dem Namen der Komponente (also dem Dateinamen ohne .razor) entspricht. Für eine Razor Component in der Datei CounterPanel.razor schreibt man also das Komponenten-Tag <CounterPanel>. Sofern die Razor Component in einem anderen Namensraum liegt, schreibt man den Namensraumnamen davor:

<ITVisions.Blazor.CounterPanel>

oder verwendet ein @using:

@using ITVisions.Blazor; ... <CounterPanel>

Es ist in Visual Studio (Stand: Visual Studio 2019 v16.7) bisher nicht möglich, die Komponenteneinbettung per Drag and Drop vorzunehmen. Beim Drag and Drop entsteht statt des passenden Komponententags ein <a href="…">-Tag.

Eine Komponente kann mehrfach in eine andere eingebettet sein:

Counter 1: <CounterPanel> Counter 2: <CounterPanel> Counter 3: <CounterPanel>

Eine Komponente kann auch in eine andere eingebettet sein, wenn sie eine eigene Route besitzt (@page "/xy"). In diesem speziellen Fall ist diese Komponente sowohl direkt aufrufbar als auch einbettbar. Eingebettete Komponenten können ebenso wieder andere Komponenten enthalten. Ein Limit der Verschachtelungstiefe ist nicht dokumentiert und auch in der Praxis nicht auf den ersten Blick erkennbar. Sofern der Softwareentwickler aber bei der Verschachtelung eine Rekursion erschafft (z. B. Component1.razor enthält <Component2> und Component2.razor enthält <Component1>), hängt sich die Blazor-Anwendung beim Aufruf einer der beiden Komponenten entsprechend in einer Endlosschleife auf.

Parameter für eingebettete Razor Components

Parameter deklariert eine Razor Component mit der Annotation [Parameter]. Parameter müssen Properties sein (Fields sind nicht erlaubt) und die Sichtbarkeit public besitzen:

[Parameter] public int StartValue { get; set; } = 0;

Die Hostkomponente setzt dann den...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang