Seite 3: Tag-Helper-Praxis

Inhaltsverzeichnis

Tag-Helper-Praxis für Twitter Bootstrap

Mit Tag-Helper-Klassen kann man HTML-Code stark verkürzen. Das folgende Beispiel für Twitter Bootstrap zeigt das. Typischer HTML-Quellcode unter Einsatz von Twitter Bootstrap sieht so aus:

<div class="row">
 <div class="col-xs-4">
  Eigene Tag Helper-Klassen
 </div>
 <div class="col-xs-8">
  <p class="bg-danger">Gefahr</p>
 </div>
</div>

Beim Schreiben von ein paar Tag-Helper-Klassen lässt sich das verkürzen:

<row>
 <xs4>
  Eigene Tag-Helper-Klassen
 </xs4>
 <xs8>
  <danger>Gefahr<danger>
 </xs8>
</row>

Die Implementierung der hier verwendeten Tag Helper <row>, <xs4>, <xs8> und <danger> zeigen die folgende C#-Codefragemente.

1. Klasse für RowTagHelper

using Microsoft.AspNet.Razor.Runtime.TagHelpers;

namespace ASPNET5
{
 public class RowTagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "row");
  }
 }
}

2. Helper-Klassen für die zwölf verschiedenen XS-Tags

using Microsoft.AspNet.Razor.Runtime.TagHelpers;

namespace ASPNET5
{
 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");
  }
 }

 public class XS4TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-4");
  }
 }
  public class XS5TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-5");
  }
 }
 public class XS6TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-6");
  }
 }
 public class XS7TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-7");
  }
 }
 public class XS8TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-8");
  }
 }
 public class XS9TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-9");
  }
 }
 public class XS10TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-10");
  }
 }
 public class XS11TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-11");
  }
 }
 public class XS12TagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("class", "col-xs-12");
  }
 }

}

3. DangerTagHelper

using Microsoft.AspNet.Razor.Runtime.TagHelpers;

namespace ASPNET5
{
 public class DangerTagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.TagName = "p";
   output.Attributes.Add("class", "bg-danger");
  }
 }
}

Ein alternativer (oder zusätzlicher) Ansatz zu den zwölf XS-Tag-Helper-Klassen ist, nur eine einzige Tag-Helper-Klasse mit Property zu schreiben:

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

Dieses <xs>-Tag kann man dann so verwenden:

<xs size="4">
  Inhalt
</xs>

Standard-HTML-Tags umdefinieren

Ein letztes Beispiel ist die Klasse TableTagHelper, die dafür sorgt, dass alle HTML-Tabellen automatisch einige Bootstrap-Klassen zugewiesen bekommen. Alle Tabellenzeilen haben somit einen anderen Farbton (Bootstrap-CSS-Klasse table-striped) und werden beim Überfahren mit der Maus hervorgehoben (Bootstrap-CSS-Klasse table-hover).

using Microsoft.AspNet.Razor.Runtime.TagHelpers;

namespace ASPNET5
{
 public class TableTagHelper : TagHelper
 {
  public override void Process(TagHelperContext context, 
                               TagHelperOutput output)
  {
   output.Attributes.Add("class", "table table-striped table-hover");
  }
 }
}