Kolumne: .NETversum

Eigene Tag Helper für ASP.NET Core schreiben
Keine Kommentare

Tag Helper sind Tags oder Attribute für Tags in Razor Templates, die von ASP.NET Core auf der Serverseite vor der Auslieferung der Website durch andere Tags oder Eigenschaften ersetzt werden.

Tag Helper kann ein Webentwickler in Views (bei ASP.NET Core Model-View-Controller – MVC) oder in Pages (bei ASP.NET Core Razor Pages) einsetzen. Das ist vergleichbar mit den Direktiven in Angular; allerdings übersetzt Angular die Direktiven clientseitig (also erst im Browser) in Standard-HTML-Tags. Tag Helper nehmen eine ähnliche Rolle ein wie früher die Webserversteuerelemente in ASP.NET Webforms, doch ihre Implementierung ist wesentlich einfacher. Eine Entwurfszeitansicht gibt es hier nicht. Tag Helpers können sich auch auf Standard-HTML-Tags beziehen und sie modifizieren. Im Folgenden eine Auswahl.

Vordefinierte Tag Helper in ASP.NET Core

Microsoft liefert eine Reihe eigener Tags, z. B. <partial>, <cache> und <environment> sowie Tag-Attribute (die mit der Vorsilbe asp- beginnen), z. B. asp-controller und asp-action für <form>, asp-for für <label>, <input> und <select>, asp-append-version für <img>, asp-validation-for für <span> in ASP.NET Core in der Microsoft.AspNetCore.Mvc.TagHelpers.dll.

Damit diese Tag Helper nutzbar sind, müssen Sie mit @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers eingebunden werden. Das erledigt Microsoft in den Projektvorlagen Web Application und Web Application (MVC) schon in der Datei /Shared/_VievImports. cshtml, die automatisch für jede View geladen wird.

Angular Camp 2020

Als Online- oder Präsenztraining!

Das 360°-Intensivtraining mit Angular-Koryphäe Manfred Steyer
Präsentiert von Entwickler Akademie

Aufbau eigener Tag Helper

Natürlich kann man eigene Tag Helper schreiben: Man erstellt eine öffentliche Klasse, die von Microsoft.AspNetCore.Razor.TagHelpers.TagHelper erbt. Der Name der Klasse sollte konventionsgemäß auf TagHelper enden. Der vordere Teil wird zum Tag-Namen, wobei man Kebab Casing (alias Spinal Casing) anwendet, d. h. aus der Klasse AutorTagHelper wird der Tag <autor> und aus DateTimeTagHelper entsteht der Tag <date-time/>. Wünscht man einen anderen Tagnamen oder will man nicht ein eigenständiges Tag, sondern nur ein neues Attribut für ein bestehendes Tag definieren, muss man die Annotation [HtmlTargetElement] verwenden.

Eine Tag-Helper-Klasse kann öffentliche Properties anbieten, die zu Tag-Attributen werden. Die Klasse überschreibt die Methoden Process() oder ProcessAsync(). Diese erhalten im Methodenparameter über ein TagHelperContext-Objekt den aktuellen Elementnamen und Tag-Inhalt; sie geben über das ebenfalls per Parameter übergebene TagHelperOutput den aktualisierten Inhalt zurück. Die Methodensignatur ist also entweder public override void Process(TagHelperContext context, TagHelperOutput output) oder public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output). Die asynchrone Variante ist wegen besserer Skalierbarkeit zu bevorzugen.

Einbindung der eigenen Tag Helper

Voraussetzung für das Funktionieren aller hier dargestellten Tag Helper ist, dass man die Tag Helper mit @addTagHelper einbindet. Wenn die Tag Helper in dem Namensraum ITVisions und in der DLL-Assembly ITVTagHelper liegen, muss die Einbindung so erfolgen:

  • Einzelner Tag Helper @addTagHelper „ITVisions.AutorTagHelper, ITVTagHelper“ eingebunden

  • Alle Tag Helper in einem Namensraum @addTagHelper „ITVisions*, ITVTagHelper“

  • Alle Tag Helper in einer Assembly @addTagHelper „*, ITVTagHelper“

Tag Helper für Twitter-Bootstrap-CSS-Klassen

Den Umgang mit der CSS-Hilfsbibliothek Twitter Bootstrap kann man in Fällen, in denen nur eine CSS-Klasse angewendet werden soll, mit eigenen ASP.NET Core Tag Helpern vereinfachen. Listing 1 gibt einen Ausschnitt der Umsetzung der Twitter-Bootstrap-CSS-Klassen wieder.

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace ITVisions
{

  public class XSTagHelper : TagHelper
  {
    public XSTagHelper(int size)
    {
      this.Size = size;
  }

    public int Size { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "div";
      output.Attributes.Add("class", "col-xs-" + Size);
    }
  }

  public class XS1TagHelper : TagHelper 
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "div";
      output.Attributes.Add("class", "col-xs-1");
    }
  }

  public class XS2TagHelper : TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "div";
      output.Attributes.Add("class", "col-xs-2");
    }
  }

  public class XS3TagHelper : TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "div";
      output.Attributes.Add("class", "col-xs-3");
    }
   }
…
}
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace ITVisions
{
  [RestrictChildren(
    "xs", "xs1", "xs2", "xs3", "xs4", "xs5", "xs6", "xs7","xs8", "xs9", "xs10", "xs11", "xs12",
    "sm", "sm1", "sm2", "sm3", "sm4", "sm5", "sm6", "sm7", "sm8", "sm9", "sm10", "sm11", "sm12",
    "md", "md1", "md2", "md3", "md4", "md5", "md6", "md7", "md8", "md9", "md10", "md11", "md12",
    "lg", "lg1", "lg2", "lg3", "lg4", "lg5", "lg6", "lg7", "lg8", "lg9", "lg10", "lg11", "lg12")]
  public class RowTagHelper : TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "div";
      output.Attributes.Add("class", "row");
    }
  }
} 

Mit der Annotation [RestrictChildren kann man festlegen, welche anderen Tags Inhalt eines Tag Helpers sein können (Listing 2). Damit kann man statt

Bootstrap-Layout klassisch
<div class="row">
  <span class="col-xs-6" style="background-color:green">Spalte 1</span>
  <span class="col-xs-3" style="background-color:yellow">Spalte 2</span>
  <span class="col-xs-3" style="background-color:blue">Spalte 3</span>
</div>

nun deutlich prägnanter schreiben:

Bootstrap-Layout mit Tag Helpern
<row>
  <xs6 style="background-color:green">Spalte 1</xs6>
  <xs3 style="background-color:yellow">Spalte 2</xs3>
  <xs3 style="background-color:blue">Spalte 3</xs3>
</row>

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -