|
|
| Zeile 1: |
Zeile 1: |
| = Partial Views in ASP.NET Core MVC – Spickzettel =
| | * [[Kurse:HTTP]] - [[Kurse:HTTP Code Übungen]] |
| | | * [[Kurse:Middleware]] - [[Kurse:Tägich Middleware Übungen]] |
| == 🧩 Was ist eine Partial View? ==
| | * [[Kurse:Routing]] - [[Kurse:Täglich Routing Übungen]] |
| Eine '''Partial View''' ist ein wiederverwendbares Razor-Markup-Fragment (.cshtml), das in andere Views eingebettet werden kann.
| | * [[Kurse:Controllers]] - [[Kurse:Täglich Controllers Übungen]] |
| Sie dient der Strukturierung und Wiederverwendung von UI-Komponenten (z. B. Listen, Formulare, Widgets).
| | * [[Kurse:Model Binding]] - [[Kurse:Täglich Model Binding Übungen]] |
| | | * [[Kurse:Razor Views]] - [[Kurse:Täglich Razor Views]] |
| == ✅ Vorteile ==
| | * [[Kurse:Layout Views]] - [[Kurse:Täglich Layout Views Übungen]] |
| * '''Wiederverwendbarkeit''': Einmal erstellt, mehrfach einsetzbar | | * [[Kurse:Partial Views]] |
| * '''Modularität''': Zerlegung großer Views in kleine Bestandteile
| | * [[Kurse:View Components]] |
| * '''Dynamik''': Daten können flexibel übergeben werden | | * [[Kurse:Services]] |
| | | * [[Kurse:ASP.NET Core Environments]] |
| == 🛠️ Verwendung ==
| | * [[Kurse:ASP.NET Core Konfiguration]] |
| | | * [[Kurse:Crud Operations]] |
| === 🔸 Speicherort & Namenskonvention ===
| |
| * Normalerweise im Ordner: <code>Views/Shared/</code> oder im selben Ordner wie die aufrufende View
| |
| * Namenskonvention: <code>_ListPartialView.cshtml</code> (Unterstrich als Erkennungszeichen) | |
| | |
| === 🔸 Rendern ===
| |
| <pre>
| |
| <!-- Tag Helper -->
| |
| <partial name="_ListPartialView" />
| |
| <partial name="_ListPartialView" model="yourModel" />
| |
| | |
| <!-- HTML Helper -->
| |
| @await Html.PartialAsync("_ListPartialView")
| |
| @await Html.PartialAsync("_ListPartialView", yourModel)
| |
| </pre>
| |
| | |
| == 📄 Beispiel 1: Mit ViewBag / ViewData ==
| |
| | |
| === _ListPartialView.cshtml ===
| |
| <source lang="razor">
| |
| <div class="list-container">
| |
| <h3>@ViewBag.ListTitle</h3>
| |
| <ul class="list">
| |
| @foreach (string item in ViewBag.ListItems)
| |
| {
| |
| <li>@item</li>
| |
| }
| |
| </ul>
| |
| </div>
| |
| </source>
| |
| | |
| === Index.cshtml ===
| |
| <source lang="razor">
| |
| <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>
| |
| </source>
| |
| | |
| == 📄 Beispiel 2: Stark typisierte Partial View (empfohlen) ==
| |
| | |
| === ListModel.cs ===
| |
| <source lang="csharp">
| |
| public class ListModel
| |
| {
| |
| public string ListTitle { get; set; }
| |
| public List<string> ListItems { get; set; }
| |
| }
| |
| </source>
| |
| | |
| === _ListPartialView.cshtml ===
| |
| <source lang="razor">
| |
| @model ListModel
| |
| | |
| <div class="list-container">
| |
| <h3>@Model.ListTitle</h3>
| |
| <ul class="list">
| |
| @foreach (var item in Model.ListItems)
| |
| {
| |
| <li>@item</li>
| |
| }
| |
| </ul>
| |
| </div>
| |
| </source>
| |
| | |
| === Index.cshtml ===
| |
| <source lang="razor">
| |
| @using YourNamespace.Models
| |
| | |
| @{
| |
| var listModel = new ListModel {
| |
| ListTitle = "Länder",
| |
| ListItems = new List<string> { "USA", "Kanada", "Japan", "Deutschland", "Indien" }
| |
| };
| |
| }
| |
| <partial name="_ListPartialView" model="listModel" />
| |
| </source>
| |
| | |
| == 📄 Beispiel 3: PartialViewResult mit AJAX ==
| |
| | |
| === HomeController.cs ===
| |
| <source lang="csharp">
| |
| [Route("programming-languages")]
| |
| public IActionResult ProgrammingLanguages()
| |
| {
| |
| var listModel = new ListModel
| |
| {
| |
| ListTitle = "Programmiersprachen",
| |
| ListItems = new List<string> { "Python", "C#", "Go" }
| |
| };
| |
| return PartialView("_ListPartialView", listModel);
| |
| }
| |
| </source>
| |
| | |
| === Index.cshtml (AJAX Beispiel) ===
| |
| <source lang="html">
| |
| <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>
| |
| </source>
| |
| | |
| == 🧠 Zusammenfassung ==
| |
| | |
| === 🔹 Partial Views ===
| |
| * Zweck: Wiederverwendbare Razor-Fragmente (z. B. für Listen, Formulare) | |
| * Konvention: <code>_PartialName.cshtml</code>
| |
| * Speicherort: <code>Views/Shared</code> oder lokaler Ordner | |
| * Rendern: | |
| * <code><partial name="..." /></code>
| |
| * <code>@await Html.PartialAsync(...)</code>
| |
| | |
| === 🔹 ViewData / ViewBag ===
| |
| * Übergabe von Daten aus Controller oder Parent View
| |
| * In Partial View per <code>@ViewData["key"]</code> oder <code>@ViewBag.Key</code> | |
| | |
| === 🔹 Starke Typisierung ===
| |
| * Mit <code>@model YourNamespace.YourModel</code> | |
| * Zugriff auf <code>@Model.Property</code> | |
| * Vorteil: IntelliSense, Typprüfung, weniger Fehler | |
| | |
| === 🔹 PartialViewResult ===
| |
| * Rückgabe einer Partial View aus Controller
| |
| * Einsatz für AJAX-Szenarien:
| |
| <source lang="csharp">
| |
| return PartialView("_PartialName", model);
| |
| </source>
| |
| | |
| === 🔹 Best Practices ===
| |
| * Verwende ViewModels für saubere Trennung
| |
| * Nutze starke Typisierung wo möglich
| |
| * Vermeide Logik in Views
| |
| * Caching bedenken für statische Inhalte
| |