Blazor Hyperlink

Die meisten Blazor Beispiele nutzen einen Button um C# Logik auszuführen. Im Kern wird ein Methodenname an das @onclick Attribut gebunden. Ganz wie eine View Viewmodel Separation das so vorschlägt.

Der Hyperlink ist in diesem Zusammenhang unpassend, da er eine Page Navigation auslöst. Die Blazor App wird dadurch neu geladen und verliert ihren Status. Was kann man aber tun, wenn man eine Funktion ohne Button aufrufen will, weil z.B. das UI gefälliger wirkt.

image

Technisch gesehen, lässt sich praktisch jedes DOM Element mit einem Click Event versehen, auch ein DIV. Will trotzdem beim A Href bleiben, braucht man ein paar Tricks. Um einen Hyperlink in Blazor mit einer Funktion zu versehen, darf Href nirgends hin verweisen. Zusätzlich muss das Default verhalten mit preventdefault unterbunden werden.

In diesem Fall soll nur eine Variable verändert werden. Insofern kann man direkt inline die C# Logik Inline per Lambda Expression auscodieren.

   1:  <a href="" class="oi oi-caret-left text-decoration-none" 
@onclick="(()=>MontagDatum=MontagDatum.AddDays(-7))"
@onclick:preventDefault>

 

Als Icon Library kommt hier open Ionic zum Einsatz. Die Bootstrap CSS Klasse Text Decoration unterbindet das unterstreichen des Links.

Kommentare sind geschlossen