Neues in ASP.NET 5, Teil 1: Tag Helper
Seite 3: Tag-Helper-Praxis
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");
}
}
}