Neues in ASP.NET 5, Teil 2: View Components
Seite 2: View und Fazit
Wie verhält es sich mit der View?
Der zweite Teil der View Component ist die View. Dies ist eine .cshtml-Datei, die entweder im Verzeichnis /Views/Shared/Components/ oder aber in /Components unterhalb der View liegt, die die View Component aufruft. In beiden Fällen folgen danach ein Unterverzeichnis mit dem Namen der View Component und darin der Name der View. Als Standard ist "default" gesetzt. Somit ergibt sich für die View der Dateiname default.cshtml. Der Controller kann aber für jede einzelne Aktion im Rückgabetyp einen anderen Namen festlegen und somit situationsabhängig verschiedene Views aufrufen. So führt der Aufruf return View("KeineGefunden", liste) im obigen Listing dazu, dass ASP.NET statt default.cshtml eine Datei KeineGefunden.cshtml lädt, falls keine passenden Flüge gefunden wurden.
Der folgende Code zeigt eine typisierte View für eine View Component, die für eine Liste von Instanzen der Klasse Flug eine tabellarische Darstellung mit Twitter-Bootstrap-CSS-Klassen erzeugt. Auch die Information aus ViewBag.Ort wird für die Anzeige verwendet.
@model System.Collections.Generic.List<EF7_GO.Flug>
@using System.Globalization
<div class="row">
<div class="col-md-4">
<strong>Anzahl Flüge von oder nach @ViewBag.Ort: @Model.Count</strong>
</div>
</div>
<br />
@foreach (EF7_GO.Flug f in Model)
{
<div class="row">
<span class="col-xs-2">@f.FlugNr</span>
<span class="col-xs-4">@f.Abflugort</span>
<span class="col-xs-4">@f.Zielort</span>
<span class="col-xs-2">@f.Datum.ToString("d",
new CultureInfo("de-DE"))</span>
</div>
}
Auf dem Bildschirm steht die tatsächliche Anzahl der geladenen Flüge, die kleiner oder gleich der dem Controller übergebenen Maximalanzahl ist. Das nächste Beispiel zeigt die Alternativ-View KeineGefunden.cshtml für diese View Component; sie nutzt keine Datenbankinhalte, sondern zeigt nur statischen Text und den Inhalt von @ViewBag.Ort an.
<div class="row">
<div class="col-md-12">
<strong>Leider haben wir keine freien Flüge von oder nach @ViewBag.Ort.
</strong>
</div>
</div>
Wenn Entwickler die beiden Views der View Component unter /Views/Shared/Components/FlugTabelle/default.cshtml und /Views/Shared/Components/FlugTabelle/nichtgefunden.cshtml ablegen, können sie die View Component nun in allen Views verwenden. Der folgende Code zeigt die View /Views/Fluege/default.cshtml, die die View Component aus den ersten drei Codestücken direkt zweimal einbindet, für zwei verschiedene Flughäfen.
<html>
...
<class="jumbotron">
<h1>Buchbare Flüge</h1>
<h3>Beispiel für den Einsatz von ASP.NET MVC 6.0 View Components</h3>
<h6>(C) Dr. Holger Schwichtenberg 2015</h6>
</div>
<p class="bg-danger">Buchbare Flüge mit View Component "Flugtabelle",
synchron geladen</p>
@Component.Invoke("FlugTabelle", "Dortmund", 5)
<p></p>
<p class="bg-danger">Buchbare Flüge mit View Component "Flugtabelle",
asynchron geladen</p>
@await Component.InvokeAsync("FlugTabelle", "Essen/Mülheim", 5)
</div>
...
</html>
Die Ergebnisseite zeigt Abbildung 1.
Beim ersten Aufruf wird die synchrone Invoke()-Methode verwendet, beim zweiten die asynchrone. In beiden Fällen erfolgt der Aufruf über die Hilfsklasse @Component unter Angabe des Namens der View Component im ersten Parameter. Als weitere Parameter müssen Entwickler die von den Aktionen des View Component Controller erwarteten Parameter "Ort" und "Anzahl" mitgeben. Durch die Indirection über ]@Component ist es allerdings nicht möglich, dass man in einer View Component andere Methoden außer Invoke() und InvokeAsync() aufrufen kann.
Fazit
View Components sind ein schönes Instrument, um Teile einer Webseite wiederverwendbar auszulagern. Dabei bleibt die von MVC gewohnte Trennung in View und Controller erhalten, sodass sich View Components gut mit Unit-Tests prüfen lassen. Anders als Tag Helper lassen sich View Components aber nicht komplett in externe Bibliotheken auslagern. Tag Helper kann man getrennt in eine DLL kompilieren und dann in binärer Form in mehrere Projekte einbinden. Zudem gibt es leider keine Eingabehilfe für die Aufrufe von View Components. Deren Name wird als Zeichenkette angegeben und Tippfehler fallen folglich erst zur Laufzeit auf.
Dr. Holger Schwichtenberg
leitet das Expertennetzwerk www.IT-Visions.de, das Beratung, Schulungen und Softwareentwicklung Umfeld von .NET und Web-Techniken anbietet. Er hält Vorträge auf Fachkonferenzen und ist Autor zahlreicher Fachbücher.
(ane)
