Es gibt ein tiefes Bedürfnis für UI Entwickler wieder verwendbare UI Steuerelemente zu verwenden. Entweder man greift auf fertige Komponenten zurück oder entwickelt zur Not auch eigene.
Als Razor Entwickler haben Sie die Wahl zwischen sogenannten Partial Views aus ASP.NET MVC oder den neueren View Components.
Um eine View Component zu entwickeln muss man einigen Konventionen folgen
- Unterverzeichnis Pages- Components
- Klasse mit PostFix ViewVomponent
- Razor View ohne @page
Wie bereits angeschnitten wird im Visual Studio Web Projekt eine neue Klasse hinzugefügt. Hier mit dem Namen CompDemoViewComponent.cs, dazu eine default.cshtml.
Die Sicht der Komponente wird zusammengesetzt aus HTML und Razor C# Logik. In diesem Prototyp wird ein einfacher Parameter vom Typ String gesetzt. Deswegen ist das model einfach ausgefallen und lässt sich entsprechend flach per @Model binden.
1: @model string
2: <hr />
3: <h1>@Model</h1>
4: <hr />
Die ViewComponent Klasse erbt von selbiger. Leider habe ich keine explizites Template in Visual Studio gefunden, so das man auch die Invoke Methode mit passenden Unterface auscodieren muss. Es wird der View aufgerufen und in dem Fall ein Parameter übergeben. Nur um das klar zu sagen, default weil die Datei default.cshtml heißt.
1: public class CompDemoViewComponent:ViewComponent
2: {
3: public IViewComponentResult Invoke(string paraEins)
4: {
5: return View("Default", paraEins);
6: }
7:
8: }
Noch ein Wort zur Benennung: Nutzen Sie Camel Case Notation für die Klassennamen und Parameter. In der späteren Verwendung im HTML Code wird daraus die lower Kebab Notation. Diese kennen ich seit Jahren von Angular. Aus paraEins wird dann para-eins. Aus CompDemoViewComponent wird comp-demo, weil der Typ hinten wegfällt. Wir haben nun funktionell das ASCX Usercontrol aus Webforms abgebildet.
In der eigentlichen Razor Page wird im ersten Anlauf mit Code eine Instanz der Komponente generiert.
1: @await Component.InvokeAsync("CompDemo", new {
2: paraEins = "hallo hannes"
3: })
Aus der Sicht eines WYSIWYG Entwicklers ist das alles andere als schön. Hier kommen die TagHelper zum tragen, die sich zumindest anfühlen wie ein ASP.NET Webforms Steuerelement. Also einfach selbst erfundene HTML Elemente einfügen. Als Prefix wird vc: genommen. Kann man ändern, aber warum auch. Wie versprochen als comp-demo, allerdings ohne Intellisense und optisch wie HTML.
Das liegt daran, das man den passenden Tag Helper in der Page erst bekannt machen muss. Find ich blöd, aber mich fragt ja keiner. Oben in der Page mit dem Namen der Applikation bzw Namensraum als zweiten Parameter.
1: @addTagHelper *, CoreBill
Nun zeigt Visual Studio die bekannten Attribute lila und Intellisense ist auch da.
1: <vc:comp-demo para-eins="Demo1"></vc:comp-demo>
Naheliegend das das Konzept auch von Razor direkt genutzt wird. Es gibt eine Reihe von eingebauten Tag Helpern, die komplett als Control arbeiten oder auch nur ein bestehendes HTML Element erweitern. Eine andere Page kann so als Partial inkludiert werden.
1: <partial name="Shared/_ProductPartial.cshtml"
2: for="Product" />