Anzeige- und Editorvorlagen in ASP.NET Core
Von Alexander Wicht
Anzeige- und Editorvorlagen geben das Benutzeroberflächenlayout von benutzerdefinierten Typen an. Sehen Sie sich das folgende Address-Modell an:
public class Address
{
public int Id { get; set; }
public string FirstName { get; set; } = null!;
public string MiddleName { get; set; } = null!;
public string LastName { get; set; } = null!;
public string Street { get; set; } = null!;
public string City { get; set; } = null!;
public string State { get; set; } = null!;
public string Zipcode { get; set; } = null!;
}
Ein Projekt, das als Gerüst für das Address-Modell dient, zeigt Address in der folgenden Form an:
Eine Website könnte eine Anzeigevorlage verwenden, um Address im Standardformat anzuzeigen:
Anzeige- und Editorvorlagen können auch Code-Duplikate und Wartungskosten reduzieren. Nehmen wir eine Website, die das Address-Modell auf 20 verschiedenen Seiten anzeigt. Wenn sich das Address-Modell ändert, müssen alle 20 Seiten aktualisiert werden. Wenn für das Address-Modell eine Anzeigevorlage verwendet wird, muss nur die Anzeigevorlage aktualisiert werden. Zum Beispiel könnte das Address-Modell aktualisiert werden, um das Land oder die Region einzubeziehen.
Taghilfsprogramme bieten eine Alternative, die es dem serverseitigen Code ermöglicht, sich an der Erstellung und Darstellung von HTML-Elementen in Razor-Dateien zu beteiligen. Weitere Informationen finden Sie unter Taghilfsprogramme im Vergleich zu HTML-Hilfsprogrammen.
Anzeigevorlagen
DisplayTemplates passen die Anzeige von Modellfeldern an oder schaffen eine Abstraktionsebene zwischen den Modellwerten und ihrer Anzeige.
Ein DisplayTemplate ist eine Razor-Datei, die im Ordner DisplayTemplates abgelegt wird:
- Für Razor-Pages-Apps im Ordner
Pages/Shared/DisplayTemplates. - Für MVC-Apps im Ordner
Views/Shared/DisplayTemplatesoder im OrdnerViews/ControllerName/DisplayTemplates. Anzeigevorlagen im OrdnerViews/Shared/DisplayTemplateswerden von allen Controllern in der App verwendet. Anzeigevorlagen im OrdnerViews/ControllerName/DisplayTemplateswerden nur vomControllerName-Controller aufgelöst.
Gemäß Konvention wird die DisplayTemplate-Datei nach dem Typ benannt, der angezeigt werden soll. Die in diesem Beispiel verwendete Vorlage Address.cshtml:
@model Address
<dl>
<dd>@Model.FirstName @Model.MiddleName @Model.LastName</dd>
<dd>@Model.Street</dd>
<dd>@Model.City @Model.State @Model.Zipcode</dd>
</dl>
Die Ansichts-Engine sucht automatisch nach einer Datei im Ordner DisplayTemplates, die mit dem Namen des Typs übereinstimmt. Wenn keine übereinstimmende Vorlage gefunden wird, greift sie auf die integrierten Vorlagen zurück.
Der folgende Code zeigt die Detailansicht des Gerüstprojekts:
@page
@model WebAddress.Pages.Adr.DetailsModel
@{
ViewData["Title"] = "Details";
}
<h1>Details</h1>
<div>
<h4>Address</h4>
<hr />
<dl class="row">
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.FirstName)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.FirstName)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.MiddleName)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.MiddleName)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.LastName)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.LastName)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.Street)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.Street)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.City)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.City)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.State)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.State)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Address.Zipcode)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address.Zipcode)
</dd>
</dl>
</div>
<div>
<a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
<a asp-page="./Index">Back to List</a>
</div>
Der folgende Code zeigt die Detailansicht mithilfe der Adressanzeigevorlage:
@page
@model WebAddress.Pages.Adr2.DetailsModel
@{
ViewData["Title"] = "Details";
}
<h1>Details</h1>
<div>
<h4>Address DM</h4>
<hr />
<dl class="row">
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address)
</dd>
</dl>
</div>
<div>
<a asp-page="./Edit" asp-route-id="@Model.Address?.Id">Edit</a> |
<a asp-page="./Index">Back to List</a>
</div>
Um auf eine Vorlage zu verweisen, deren Name nicht mit dem Typnamen übereinstimmt, verwenden Sie den Parameter templateName in der Methode DisplayFor. Das folgende Markup zeigt z. B. das Modell Address mit der Vorlage AddressShort an:
@page
@model WebAddress.Pages.Adr2.DetailsCCModel
@{
ViewData["Title"] = "Details Short";
}
<h1>Details Short</h1>
<div>
<h4>Address Short</h4>
<hr />
<dl class="row">
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Address,"AddressShort")
</dd>
</dl>
</div>
Verwenden Sie eine der verfügbaren DisplayFor-Überladungen, die den Parameter additionalViewData verfügbar machen, um zusätzliche Ansichtsdaten zu übergeben, die in die für die Vorlage erstellte Instanz des View Data Dictionary aufgenommen werden.
Editorvorlagen
Editorvorlagen werden in Formularsteuerelementen verwendet, wenn das Modell bearbeitet oder aktualisiert wird.
Ein EditorTemplate ist eine Razor-Datei, die im Ordner EditorTemplates abgelegt wird:
- Für Razor-Pages-Apps im Ordner
Pages/Shared/EditorTemplates. - Für MVC-Apps im Ordner
Views/Shared/EditorTemplatesoder im OrdnerViews/ControllerName/EditorTemplates.
Das folgende Markup zeigt die im Beispiel verwendete Pages/Shared/EditorTemplates/Address.cshtml:
@model Address
<dl>
<dd> Name:
<input asp-for="FirstName" /> <input asp-for="MiddleName" /> <input asp-for="LastName" />
</dd>
<dd> Street:
<input asp-for="Street" />
</dd>
<dd> city/state/zip:
<input asp-for="City" /> <input asp-for="State" /> <input asp-for="Zipcode" />
</dd>
</dl>
Das folgende Markup zeigt die Seite Edit.cshtml, die die Vorlage Pages/Shared/EditorTemplates/Address.cshtml verwendet:
@page
@model WebAddress.Pages.Adr.EditModel
@{
ViewData["Title"] = "Edit";
}
<h1>Edit</h1>
<h4>Address</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Address.Id" />
@Html.EditorFor(model => model.Address)
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="./Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Zusätzliche Ressourcen
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für