Kurse:View Components

View Components in ASP.NET Core MVC (Deutsch)

Einführung

View Components sind wiederverwendbare, selbstständige UI-Bausteine in ASP.NET Core MVC. Sie sind stärker als Partial Views und leichter als vollständige Controller + Views.

Zweck

• Komplexität kapseln: UI-Logik in einer Einheit bündeln
• Wiederverwendbarkeit: In mehreren Views einsetzen
• Testbarkeit: Einfach zu testen durch Entkopplung
• Einsatz: Dynamische Widgets, Navigation, Formulare, Mini-Dashboards

Best Practices

• Benennung: Klassenname endet auf ViewComponent
• Struktur:
  • Klassen: ViewComponents/
  • Views: Views/Shared/Components/{Name}/{View}.cshtml
• Starke Typisierung: Übergabe per ViewModel statt ViewBag
• Asynchron: Nutze InvokeAsync für Datenoperationen
• Trennung der Logik: Nur UI-Logik, keine Geschäftslogik

Was vermeiden

• Übermäßiger Einsatz bei einfachen UI-Teilen
• Direkte Datenbankzugriffe – verwende Services
• Starke Kopplung an bestimmte Controller
• Umfangreiche Businesslogik innerhalb der Komponente

Struktur eines View Components

GridViewComponent.cs

public class GridViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var model = new PersonGridModel
        {
            GridTitle = "Personenliste",
            Persons = new List<Person>
            {
                new Person { PersonName = "John", JobTitle = "Manager" },
                new Person { PersonName = "Jones", JobTitle = "Stellv. Manager" },
                new Person { PersonName = "William", JobTitle = "Sachbearbeiter" }
            }
        };
        return View("Sample", model);
    }
}

View aufrufen (z. B. Index.cshtml)

@await Component.InvokeAsync("Grid")

View-Komponente Sample.cshtml

@model PersonGridModel

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

Übergabe von Parametern

ViewComponent mit Parameter

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

View (z. B. Index.cshtml)

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

Alternative mit Tag Helper

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

ViewComponentResult aus Controller

[Route("freunde")]
public IActionResult LoadFriendsList()
{
    var model = new PersonGridModel
    {
        GridTitle = "Freunde",
        Persons = new List<Person> { /* ... */ }
    };
    return ViewComponent("Grid", new { grid = model });
}

Zusammenfassung

• Struktur: ViewComponents-Ordner, Razor Views im Shared-Ordner
• Aufruf: @await Component.InvokeAsync("Name", new { ... })
• Asynchron: Immer InvokeAsync verwenden
• Starke Typisierung: Verwende ViewModels
• Trennung: Keine Geschäftslogik oder DB-Zugriff im ViewComponent