Blazor HTML Tricks

Der HTML Code in einer .Razor Seite ist eigentlich keiner. Leicht zu erkennen, wenn man Typ “HTML Verbrecher” mit dem Editor spielen lässt.

image

Nicht nur das Visual Studio rot unterwellt, auch der Compiler streikt. Der Grund ist, das dies Code ist der wirklich kompiliert wird in einen Rendertree. Ist am Ende auch nur eine DLL und keine HTML Seite mehr.

Im Rendertree ist die kleineste Einheit das RenderFragment. Praktisch ein DOM Knoten. Im C# Code zu setzen ala

   1:  RenderFragment rf=@<b>Test RF</b>;

Meist wird man es allerdings als Parametertyp in einer Komponente setzen und nutzen. Im HTML Razor Code der aufrufenden Page reicht ein

   1:  <p>@rf</p>

Das P Element hat rein Deko Zwecke und ist für das RenderFragment so nicht nötig.

Wie bekommt man aber nun einen echten HTML String in die Page? Man könnte sowas ja in der Datenbank speichern?

   1:  string s="Ein Text <b>{0}</b> mit Platzhalter";

Dafür hat sich Microsoft den Markup String einfallen lassen. Einfach String in Markupstring Casten. Im Beispiel wird auch gleich noch eine Variable eingebaut um sozusagen eine Datenbindung zu simulieren.

   1:  <p>@((MarkupString) string.Format(s, p))</p>

Was ist aber wenn ich das Zeugs in kein Element packen will? Dann gibt’s das Blazor Fake Element Text. Einfach um den Block legen. Visual Studio markiert es gelb, was immer ein Hinweis auf Code Logik ist. Damit kann man dann direkt in einen Code Block wieder ein Stück HTML einflechten.

image

Im Browser F2 Tools ist es weg, Reines glasklares HTML.

image

Für das <text> Element haben die MVC Razor Entwickler eine single Line Explizit Markup Syntax entwickelt @: Damit kann in einen C# Code, zb in eine IF Verzweigung – ein Stück HTML eingebettet werden. Die tut auch in Blazor- leider nicht immer ganz korrektes HTML

   1:   @:Hello <span>@p</span>

image

Insofern man davon eigentlich Abstand halten sollte. Was manche nicht daran hindert aus einer einzeiligen Syntax mit dem @ für C# Code Sequenz, eine mehrzeilige zu gestalten und damit @:@{ eine Art Emoji zu erfinden (Wig-Pig genannt)

   1:  rf = @:@{
   2:  <h1>Hello</h1>
   3:  }
   4:  ;
Kommentare sind geschlossen