imported>Import: Version 188

2026-02-18T20:36:13Z

Version 188

Neue Seite

''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''
----

Dieses Tutorial erklärt, was View Components in ASP.NET Core sind, wann man sie verwendet und wie man sie effektiv implementiert. Es deckt Standard-View Components, stark typisierte Implementierungen, die Übergabe von Parametern und die Rückgabe aus Controllern ab.

== 1. Was sind View Components? ==

View Components (Ansichtskomponenten) sind eigenständige, wiederverwendbare UI-Bausteine in ASP.NET Core MVC. Sie sind dafür konzipiert, Rendering-Logik zu kapseln, die komplexer ist als das, was man typischerweise in eine Partial View (Teilansicht) packen würde, aber nicht die Komplexität eines vollwertigen Controllers rechtfertigt.

=== Hauptmerkmale ===

* '''Komplexität kapseln''': Gruppieren Sie zusammenhängende UI-Rendering-Logik in einer zusammenhängenden Einheit.
* '''Wiederverwendbarkeit''': Verwenden Sie View Components in mehreren Ansichten, um Code-Duplizierung zu vermeiden.
* '''Testbarkeit''': Aufgrund ihrer eigenständigen Natur leichter per Unit Test zu testen.
* '''Rendering-Logik''': Ideal für dynamische Widgets, Navigationsmenüs, Login-Formulare, Warenkorb-Zusammenfassungen oder jedes UI-Element, das Datenabrufe oder Logik vor dem Rendern erfordert.

=== Wann man View Components verwendet ===

* '''Komplexe UI-Elemente''': Wenn ein UI-Element komplexe Rendering-Logik erfordert.
* '''Datengetriebene Elemente''': Wenn Sie Daten abrufen oder Berechnungen durchführen müssen, bevor gerendert wird.
* '''Wiederverwendbare Widgets''': Wenn Sie ein wiederverwendbares Widget für verschiedene Teile Ihrer Anwendung erstellen möchten.

-----

== 2. Implementierungsschritte ==

Um eine View Component zu implementieren, folgen Sie im Allgemeinen diesen drei Schritten:

# Erstellen einer View Component Klasse: Leiten Sie von <code>ViewComponent</code> ab.
# Erstellen einer View: Erstellen Sie eine Razor-View-Datei (<code>.cshtml</code>).
# Aufruf in Ihrer View: Verwenden Sie die Helper-Methode oder den Tag Helper.

=== Schritt 1: Die View Component Klasse ===

Erstellen Sie eine Klasse, die von <code>ViewComponent</code> erbt. Sie sollte normalerweise in einem Ordner <code>ViewComponents</code> platziert werden. Die Klasse muss eine <code>Invoke</code> oder <code>InvokeAsync</code> Methode implementieren.

'''Best Practice''': Benennen Sie die Klasse mit dem Suffix <code>ViewComponent</code> (z. B. <code>GridViewComponent</code>).

<syntaxhighlight lang="csharp">// GridViewComponent.cs
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using System.Collections.Generic;

public class GridViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
// Daten kommen normalerweise aus einer Datenbank oder einem Service
PersonGridModel model = new PersonGridModel()
{
GridTitle = "Personenliste",
Persons = new List<Person>() {
new Person() { PersonName = "John", JobTitle = "Manager" },
// ... mehr Daten
}
};
// Gibt die View zurück (sucht nach Default.cshtml oder dem angegebenen View-Namen)
return View("Sample", model);
}
}</syntaxhighlight>
=== Schritt 2: Die View ===

Erstellen Sie eine Razor-View-Datei. Der Suchpfad für die View ist: <code>Views/Shared/Components/{ViewComponent Name}/{View Name}.cshtml</code>

Für das obige Beispiel würde sich die Datei hier befinden: <code>Views/Shared/Components/Grid/Sample.cshtml</code>

=== Schritt 3: Aufrufen der View Component ===

Sie können die Komponente in jeder Razor-View (z. B. <code>Index.cshtml</code>) mit <code>Component.InvokeAsync</code> oder einem Tag Helper aufrufen.

<syntaxhighlight lang="html">
@await Component.InvokeAsync("Grid")


<vc:grid></vc:grid></syntaxhighlight>

-----

== 3. Stark typisierte View Components ==

Genau wie Standard-Views sollten View Components stark typisierte Modelle für Typsicherheit, IntelliSense und Wartbarkeit verwenden.

=== Das View Model ===

Definieren Sie eine Klasse, um die Daten zu halten:

<syntaxhighlight lang="csharp">public class PersonGridModel
{
public string GridTitle { get; set; }
public List<Person> Persons { get; set; }
}</syntaxhighlight>
=== Die Component View (<code>Sample.cshtml</code>) ===

Verwenden Sie die <code>@model</code> Direktive, um die View an die Klasse zu binden.

<syntaxhighlight lang="html">@model PersonGridModel

<div class="box">
<h3>@Model.GridTitle</h3>
<table class="table w-100">
<thead>
<tr>
<th>Lfd. Nr.</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@foreach (Person person in Model.Persons)
{
<tr>
<td>@person.PersonName</td>
<td>@person.JobTitle</td>
</tr>
}
</tbody>
</table>
</div></syntaxhighlight>

-----

== 4. Parameter übergeben ==

Sie können Parameter an <code>InvokeAsync</code> übergeben, um die Ausgabe anzupassen.

'''View Component Klasse:''' Aktualisieren Sie <code>InvokeAsync</code>, um Argumente zu akzeptieren.

<syntaxhighlight lang="csharp">public class GridViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(PersonGridModel grid)
{
return View("Sample", grid);
}
}</syntaxhighlight>
'''Aufruf mit Parametern:''' Übergeben Sie ein anonymes Objekt, bei dem die Eigenschaftsnamen mit den Parameternamen übereinstimmen.

<syntaxhighlight lang="html">@{
PersonGridModel myData = new PersonGridModel() { /* ... init ... */ };
}

@await Component.InvokeAsync("Grid", new { grid = myData }) </syntaxhighlight>
'''Tag Helper Syntax:'''

<syntaxhighlight lang="html"><vc:grid grid="myData"></vc:grid> </syntaxhighlight>

-----

== 5. Rückgabe aus Controllern (ViewComponentResult) ==

Sie können eine View Component direkt aus einer Controller-Action zurückgeben. Dies ist nützlich für API-ähnliche Endpunkte, die HTML-Fragmente zurückgeben (z. B. für AJAX-Updates).

<syntaxhighlight lang="csharp">[Route("friends-list")]
public IActionResult LoadFriendsList()
{
PersonGridModel personGridModel = new PersonGridModel()
{
GridTitle = "Freunde",
Persons = new List<Person>() { /* ... */ }
};

// Gibt das View Component Result zurück
return ViewComponent("Grid", new { grid = personGridModel });
}</syntaxhighlight>

-----

== 6. Best Practices ==

* '''Benennung''': Klassennamen sollten mit <code>ViewComponent</code> enden.
* '''Speicherort''': Detaillierte Ordnerstruktur (<code>Views/Shared/Components/...</code>).
* '''Asynchron''': Verwenden Sie <code>InvokeAsync</code>, um blockierende Threads zu vermeiden.
* '''Einfachheit''': Halten Sie Geschäftslogik aus der Komponente heraus; delegieren Sie an Services.
* '''Typsicherheit''': Bevorzugen Sie immer stark typisierte Modelle gegenüber <code>ViewBag</code> oder <code>ViewData</code>.

== 7. Dinge, die man vermeiden sollte ==

* '''Übermäßiger Gebrauch''': Verwenden Sie View Components nicht für einfache UI-Teile, die eine Partial View handhaben könnte.
* '''Starke Kopplung''': Koppeln Sie Komponenten nicht an spezifische Controller.
* '''Direkter Datenbankzugriff''': Verwenden Sie stattdessen Dependency Injection und Services.

----
''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''

Webframeworkk/ASP.NET Core/View Components - Versionsgeschichte

imported>Import: Version 188