imported>Import: Version 187

2026-02-18T13:07:32Z

Version 187

Neue Seite

''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''
----

== 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:

# Dem gleichen Ordner wie die View, die sie rendert.
# 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 <partial> Tag Helper ist sauberer und leichter zu lesen.

<syntaxhighlight lang="html">
<partial name="_ListPartialView" />


<partial name="_ListPartialView" model="yourModel" />


<partial name="_ListPartialView" view-data="yourViewData" /></syntaxhighlight>
=== 2. HTML Helpers ===

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

<syntaxhighlight lang="csharp">
@await Html.PartialAsync("_ListPartialView")
@await Html.PartialAsync("_ListPartialView", yourModel)


@{ await Html.RenderPartialAsync("_ListPartialView"); }</syntaxhighlight>
''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):'''

<syntaxhighlight lang="html"><div class="list-container">
<h3>@ViewBag.ListTitle</h3>
<ul class="list">
@foreach (string item in ViewBag.ListItems)
{
<li>@item</li>
}
</ul>
</div></syntaxhighlight>
'''Haupt-View (Index.cshtml):'''

<syntaxhighlight lang="html">@{
// 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" /></syntaxhighlight>
=== 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):'''

<syntaxhighlight lang="csharp">namespace PartialViewsExample.Models
{
public class ListModel
{
public string ListTitle { get; set; } = "";
public List<string> ListItems { get; set; } = new List<string>();
}
}</syntaxhighlight>
'''Streng typisierte Partial View (_ListPartialView.cshtml):'''

<syntaxhighlight lang="html">@model ListModel

<div class="list-container">
<h3>@Model.ListTitle</h3>
<ul class="list">
@foreach (string item in Model.ListItems)
{
<li>@item</li>
}
</ul>
</div></syntaxhighlight>
'''Haupt-View (Index.cshtml):'''

<syntaxhighlight lang="html">@using PartialViewsExample.Models

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


<partial name="_ListPartialView" model="listModel" /> </syntaxhighlight>

-----

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

<syntaxhighlight lang="csharp">[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);
}</syntaxhighlight>
=== Client-seitiges Beispiel (AJAX) ===

<syntaxhighlight lang="html"><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></syntaxhighlight>

-----

== Wichtige Punkte ==

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

----
''Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).''

Thorsten: Die Seite wurde neu angelegt: „== 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…“

2026-02-18T13:07:32Z

Die Seite wurde neu angelegt: „== 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…“

Änderungen zeigen

Webframeworkk/ASP.NET Core/Partial Views - Versionsgeschichte

imported>Import: Version 187