Webframeworkk/ASP.NET Core/Partial Views

Einführung

In ASP.NET Core MVC ist eine Partial View (Teilansicht) ein wiederverwendbarer Block von Razor-Markup (.cshtml), der in andere Views eingebettet werden kann. Sie sind dafür konzipiert, spezifische UI-Elemente wie Listen, Formulare, Navigationsleisten oder Widgets zu kapseln.

Warum Partial Views verwenden?

• Wiederverwendbarkeit: Code einmal schreiben und in mehreren Views verwenden, was Duplikate und Inkonsistenzen reduziert.
• Modularität: Komplexe Views in kleinere, überschaubare Komponenten aufteilen, wodurch der Code leichter zu lesen und zu warten ist.
• Dynamischer Inhalt: Daten an Partial Views übergeben, um sie an verschiedene Kontexte anzupassen.

Grundlagen von Partial Views

Namenskonvention

Partial Views werden typischerweise mit einem führenden Unterstrich benannt (z. B. _ListPartialView.cshtml). Dies hilft, sie von vollständigen Views zu unterscheiden.

Speicherort

Standardmäßig sucht ASP.NET Core nach Partial Views in:

1. Dem gleichen Ordner wie die View, die sie rendert.
2. Dem Ordner Views/Shared.

Sie können bei Bedarf auch den vollständigen Pfad angeben.

Rendern von Partial Views

Sie können Partial Views in Ihren Haupt-Views mithilfe von Tag Helpers oder HTML Helpers rendern.

1. Tag Helpers (Empfohlen)

Der Tag Helper ist sauberer und leichter zu lesen.

<!-- Einfaches Rendern -->
<partial name="_ListPartialView" />

<!-- Mit einem Model -->
<partial name="_ListPartialView" model="yourModel" />

<!-- Mit ViewData -->
<partial name="_ListPartialView" view-data="yourViewData" />

2. HTML Helpers

Die Methoden Html.PartialAsync oder Html.RenderPartialAsync können ebenfalls verwendet werden.

<!-- Gibt IHtmlContent zurück -->
@await Html.PartialAsync("_ListPartialView")
@await Html.PartialAsync("_ListPartialView", yourModel)

<!-- Rendert direkt in den Antwort-Stream (void Rückgabe) -->
@{ await Html.RenderPartialAsync("_ListPartialView"); }

Hinweis: RenderPartialAsync ist im Allgemeinen schneller, da es direkt in den Antwort-Stream schreibt.

Datenübertragung: ViewBag vs. Streng Typisiert

Option 1: Verwendung von ViewBag (Nicht empfohlen für komplexe Daten)

Sie können ViewBag oder ViewData verwenden, um Daten zu übergeben, aber es fehlt die Typsicherheit.

Partial View (_ListPartialView.cshtml):

<div class="list-container">
    <h3>@ViewBag.ListTitle</h3>
    <ul class="list">
    @foreach (string item in ViewBag.ListItems)
    {
        <li>@item</li>
    }
    </ul>
</div>

Haupt-View (Index.cshtml):

@{
    // Daten über ein neues ViewDataDictionary übergeben, um das Haupt-ViewData nicht zu verunreinigen
    var myViewData = new ViewDataDictionary(ViewData);
    myViewData["ListTitle"] = "Länder";
    myViewData["ListItems"] = new List<string>() { "USA", "Deutschland", "Japan" };
}

<partial name="_ListPartialView" view-data="myViewData" />

Option 2: Streng typisierte Partial Views (Empfohlen)

Die Verknüpfung einer Partial View mit einer Modellklasse bietet Typsicherheit zur Kompilierzeit und IntelliSense.

Das Modell (ListModel.cs):

namespace PartialViewsExample.Models
{
    public class ListModel
    {
        public string ListTitle { get; set; } = "";
        public List<string> ListItems { get; set; } = new List<string>();
    }
}

Streng typisierte Partial View (_ListPartialView.cshtml):

@model ListModel

<div class="list-container">
    <h3>@Model.ListTitle</h3> 
    <ul class="list">
    @foreach (string item in Model.ListItems) 
    {
        <li>@item</li>
    }
    </ul>
</div>

Haupt-View (Index.cshtml):

@using PartialViewsExample.Models

@{
    ListModel listModel = new ListModel();
    listModel.ListTitle = "Länder";
    listModel.ListItems = new List<string>() { "USA", "Kanada", "Japan" };
}

<!-- Das Modell an die Partial View übergeben -->
<partial name="_ListPartialView" model="listModel" /> 

Rückgabe von Partial Views aus Controllern (PartialViewResult)

PartialViewResult wird verwendet, wenn Sie nur das HTML der Partial View zurückgeben möchten, oft für AJAX-Anfragen (z. B. Aktualisierung eines Teils der Seite ohne vollständiges Neuladen).

Controller Action

[Route("programming-languages")]
public IActionResult GetLanguages()
{
    ListModel listModel = new ListModel() {
        ListTitle = "Programmiersprachen",
        ListItems = new List<string>() { "Python", "C#", "Go" }
    };

    // Gibt nur das HTML der Partial View zurück
    return PartialView("_ListPartialView", listModel);
}

Client-seitiges Beispiel (AJAX)

<button id="load-btn">Sprachen laden</button>
<div id="content-area"></div>

<script>
    document.querySelector("#load-btn").addEventListener("click", async function() {
        // Das HTML der Partial View vom Controller abrufen
        var response = await fetch("programming-languages");
        var html = await response.text();
        
        // Das HTML in das div einfügen
        document.querySelector("#content-area").innerHTML = html;
    });
</script>

Wichtige Punkte

1. Kapselung: Verwenden Sie Partial Views, um Code zu organisieren und das DRY-Prinzip (Don't Repeat Yourself) einzuhalten.
2. Typsicherheit: Bevorzugen Sie streng typisierte Partial Views (@model) gegenüber ViewData/ViewBag für bessere Wartbarkeit und Fehlerprüfung.
3. Benennung: Stellen Sie Partial View-Dateinamen einen Unterstrich voran (z. B. _Header.cshtml).
4. AJAX: Verwenden Sie PartialViewResult in Controllern, um HTML-Fragmente für dynamische Seitenaktualisierungen bereitzustellen.