Kurse:Partial Views

Partial Views in ASP.NET Core MVC – Spickzettel

🧩 Was ist eine Partial View?

Eine Partial View ist ein wiederverwendbares Razor-Markup-Fragment (.cshtml), das in andere Views eingebettet werden kann. Sie dient der Strukturierung und Wiederverwendung von UI-Komponenten (z. B. Listen, Formulare, Widgets).

✅ Vorteile

• Wiederverwendbarkeit: Einmal erstellt, mehrfach einsetzbar
• Modularität: Zerlegung großer Views in kleine Bestandteile
• Dynamik: Daten können flexibel übergeben werden

🛠️ Verwendung

🔸 Speicherort & Namenskonvention

• Normalerweise im Ordner: Views/Shared/ oder im selben Ordner wie die aufrufende View
• Namenskonvention: _ListPartialView.cshtml (Unterstrich als Erkennungszeichen)

🔸 Rendern

<!-- Tag Helper -->
<partial name="_ListPartialView" />
<partial name="_ListPartialView" model="yourModel" />

<!-- HTML Helper -->
@await Html.PartialAsync("_ListPartialView")
@await Html.PartialAsync("_ListPartialView", yourModel)

📄 Beispiel 1: Mit ViewBag / ViewData

_ListPartialView.cshtml

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

Index.cshtml

<h1>Home</h1>

<partial name="_ListPartialView" />

@{
    var myViewData = new ViewDataDictionary(ViewData);
    myViewData["ListTitle"] = "Länder";
    myViewData["ListItems"] = new List<string> { "USA", "Kanada", "Japan", "Deutschland", "Indien" };
}

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

📄 Beispiel 2: Stark typisierte Partial View (empfohlen)

ListModel.cs

public class ListModel
{
    public string ListTitle { get; set; }
    public List<string> ListItems { get; set; }
}

_ListPartialView.cshtml

@model ListModel

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

Index.cshtml

@using YourNamespace.Models

@{
    var listModel = new ListModel {
        ListTitle = "Länder",
        ListItems = new List<string> { "USA", "Kanada", "Japan", "Deutschland", "Indien" }
    };
}
<partial name="_ListPartialView" model="listModel" />

📄 Beispiel 3: PartialViewResult mit AJAX

HomeController.cs

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

Index.cshtml (AJAX Beispiel)

<button id="button-load">Lade Programmiersprachen</button>
<div class="programming-languages-content"></div>

<script>
document.querySelector("#button-load").addEventListener("click", async () => {
    const response = await fetch("programming-languages");
    const html = await response.text();
    document.querySelector(".programming-languages-content").innerHTML = html;
});
</script>

🧠 Zusammenfassung

🔹 Partial Views

• Zweck: Wiederverwendbare Razor-Fragmente (z. B. für Listen, Formulare)
• Konvention: _PartialName.cshtml
• Speicherort: Views/Shared oder lokaler Ordner
• Rendern:

 * <partial name="..." />
 * @await Html.PartialAsync(...)

🔹 ViewData / ViewBag

• Übergabe von Daten aus Controller oder Parent View
• In Partial View per @ViewData["key"] oder @ViewBag.Key

🔹 Starke Typisierung

• Mit @model YourNamespace.YourModel
• Zugriff auf @Model.Property
• Vorteil: IntelliSense, Typprüfung, weniger Fehler

🔹 PartialViewResult

• Rückgabe einer Partial View aus Controller
• Einsatz für AJAX-Szenarien:

  return PartialView("_PartialName", model);

🔹 Best Practices

• Verwende ViewModels für saubere Trennung
• Nutze starke Typisierung wo möglich
• Vermeide Logik in Views
• Caching bedenken für statische Inhalte