Webframeworkk/ASP.NET Core/View Components

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:

1. Erstellen einer View Component Klasse: Leiten Sie von ViewComponent ab.
2. Erstellen einer View: Erstellen Sie eine Razor-View-Datei (.cshtml).
3. 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 ViewComponent erbt. Sie sollte normalerweise in einem Ordner ViewComponents platziert werden. Die Klasse muss eine Invoke oder InvokeAsync Methode implementieren.

Best Practice: Benennen Sie die Klasse mit dem Suffix ViewComponent (z. B. GridViewComponent).

// 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); 
    }
}

Schritt 2: Die View

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

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

Schritt 3: Aufrufen der View Component

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

<!-- Standard-Syntax (Bevorzugt) -->
@await Component.InvokeAsync("Grid")

<!-- Tag Helper Syntax -->
<vc:grid></vc:grid>

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:

public class PersonGridModel
{
    public string GridTitle { get; set; }
    public List<Person> Persons { get; set; }
}

Die Component View (Sample.cshtml)

Verwenden Sie die @model Direktive, um die View an die Klasse zu binden.

@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>

4. Parameter übergeben

Sie können Parameter an InvokeAsync übergeben, um die Ausgabe anzupassen.

View Component Klasse: Aktualisieren Sie InvokeAsync, um Argumente zu akzeptieren.

public class GridViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(PersonGridModel grid)  
    {
        return View("Sample", grid);
    }
}

Aufruf mit Parametern: Übergeben Sie ein anonymes Objekt, bei dem die Eigenschaftsnamen mit den Parameternamen übereinstimmen.

@{
    PersonGridModel myData = new PersonGridModel() { /* ... init ... */ };
}
 
@await Component.InvokeAsync("Grid", new { grid = myData }) 

Tag Helper Syntax:

<vc:grid grid="myData"></vc:grid> 

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).

[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 });
}

6. Best Practices

• Benennung: Klassennamen sollten mit ViewComponent enden.
• Speicherort: Detaillierte Ordnerstruktur (Views/Shared/Components/...).
• Asynchron: Verwenden Sie InvokeAsync, 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 ViewBag oder ViewData.

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.