[ASP.NET
MVC Mavericks Road] 12 – Abschnitt, Teilansicht und untergeordnete Aktion
Kurz gesagt, der Inhalt in View kann in statische und dynamische Teile unterteilt werden. Bei statischen Inhalten handelt es sich im Allgemeinen um HTML-Elemente, während sich dynamische Inhalte auf Inhalte beziehen, die dynamisch erstellt werden, wenn die Anwendung ausgeführt wird. Die Möglichkeiten zum Hinzufügen dynamischer Inhalte zu View lassen sich wie folgt zusammenfassen:
Inline-Code, kleine Codeausschnitte, wie z. B. if- und foreach-Anweisungen.
Html-Hilfsmethode, die zum Generieren einzelner oder mehrerer HTML-Elemente wie Ansichtsmodell, ViewBag usw. verwendet wird.
Abschnitt: Fügen Sie einen Teil des erstellten Inhalts an der angegebenen Stelle ein.
Teilansicht, die in einer separaten Ansichtsdatei vorhanden ist und als Unterinhalt von mehreren Ansichten gemeinsam genutzt werden kann.
Untergeordnete Aktionen entsprechen einer UI-Komponente, die Geschäftslogik enthält. Wenn eine untergeordnete Aktion verwendet wird, ruft sie die Aktion im Controller auf, um eine Ansicht zurückzugeben, und fügt das Ergebnis in den Ausgabestream ein.
Diese Klassifizierung ist nicht absolut. Die ersten beiden sind sehr einfach und wurden in früheren Artikeln verwendet. In diesem Artikel werden hauptsächlich die Anwendungen der letzten drei Methoden vorgestellt.
Inhaltsverzeichnis
Abschnitt
Razor View Engine unterstützt die Trennung eines Teils des Inhalts in der Ansicht zur Wiederverwendung bei Bedarf, wodurch Code reduziert wird Redundanz. Lassen Sie uns demonstrieren, wie Abschnitt verwendet wird.
Erstellen Sie eine MVC-Anwendung und wählen Sie eine Basisvorlage aus. Fügen Sie einen HomeController hinzu und bearbeiten Sie die generierte Indexmethode wie folgt:
public ActionResult Index() { string[] names = { "Apple", "Orange", "Pear" }; return View(names); }
Klicken Sie mit der rechten Maustaste auf die Indexmethode, fügen Sie eine Ansicht hinzu und bearbeiten Sie die Ansicht wie folgt:
@model string[] @{ ViewBag.Title = "Index"; } @section Header { <div class="view"> @foreach (string str in new [] {"Home", "List", "Edit"}) { @Html.ActionLink(str, str, null, new { style = "margin: 5px" }) } </div> } <div class="view"> This is a list of fruit names: @foreach (string name in Model) { <span><b>@name</b></span> } </div>@section Footer { <div class="view"> This is the footer </div> }
Wir fügen einen Abschnitt hinzu Über den @section-Tag-Namen werden hier zwei Abschnitte erstellt: Kopf- und Fußzeile. Es ist üblich, den Abschnitt am Anfang oder am Ende der Ansichtsdatei zu platzieren. Nachfolgend verwenden wir sie in der Datei /Views/Shared/_Layout.cshtml.
Bearbeiten Sie die Datei /Views/Shared/_Layout.cshtml wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <style type="text/css"> div.layout { background-color: lightgray;} div.view { border: thin solid black; margin: 10px 0;} </style> <title>@ViewBag.Title</title> </head> <body> @RenderSection("Header") <div class="layout"> This is part of the layout </div> @RenderBody() <div class="layout"> This is part of the layout </div> @RenderSection("Footer") <div class="layout"> This is part of the layout </div> </body> </html>
Wir rufen den Inhalt des Abschnitts über die @RenderSection-Methode auf und der Parameter gibt den Namen des Abschnitts an Abschnitt. Nach dem Ausführen des Programms können Sie die folgenden Ergebnisse sehen:
Beachten Sie, dass der Abschnitt nur in der aktuellen Ansicht oder ihrem Layout aufgerufen werden kann. Die @RenderSection-Methode löst eine Ausnahme aus, wenn sie den durch den Parameter angegebenen Abschnitt nicht findet. Wenn Sie nicht sicher sind, ob der Abschnitt vorhanden ist, müssen Sie den Wert des zweiten Parameters wie folgt als „false“ angeben:
... @RenderSection("scripts", false) ...
Wir können auch die IsSectionDefined-Methode verwenden, um zu bestimmen, ob ein Abschnitt in der aktuellen Ansicht definiert ist oder aufgerufen werden kann, wie zum Beispiel:
... @if (IsSectionDefined("Footer")) { @RenderSection("Footer") } else { <h4>This is the default footer</h4> } ...
Teilansicht
Teilansicht (Teilansicht) ist ein Teil-Razor und HTML-Tags werden in einer separaten Ansichtsdatei zur Wiederverwendung an verschiedenen Orten abgelegt. Als Nächstes stellen wir die Verwendung der Teilansicht vor.
Erstellen wir zunächst eine Teilansicht. Erstellen Sie eine neue Ansichtsdatei mit dem Namen MyPartial im Verzeichnis /Views/Shared und aktivieren Sie „Als Teilansicht erstellen“ wie folgt:
Die hinzugefügte Teilansichtsdatei ist eine leere Datei , fügen wir dieser Datei den folgenden Code hinzu:
<div> This is the message from the partial view. @Html.ActionLink("This is a link to the Index action", "Index") </div>
Diese MyPartial.cshtml-Ansicht erstellt einen Link zurück zur Startseite. Natürlich ist die @Html.ActionLink-Methode hier auch eine (Html-Hilfs-) Möglichkeit, Ansichtsinhalte dynamisch zu laden.
Fügen Sie dann wie folgt eine List-Aktionsmethode in HomeController hinzu:
public ActionResult List() { return View(); }
Fügen Sie hierfür weiterhin eine List.cshtml-Ansicht hinzu und rufen Sie die @Html.Partial-Methode auf, die wir rendern möchten Teilansicht wie folgt:
@{ ViewBag.Title = "List"; Layout = null; } <h3>This is the /Views/Home/List.cshtml View</h3> @Html.Partial("MyPartial")
Die Ansichts-Engine sucht in der angegebenen Reihenfolge in den Ordnern /Views/Home und /Views/Shared nach der MyPartial-Ansicht.
Führen Sie das Programm aus und navigieren Sie zu /Home/List. Wir können den folgenden Effekt sehen:
Es gibt keinen Unterschied zwischen der Verwendung der Teilansicht und Es können die normale Ansicht und die starke Typisierung verwendet werden. Beispielsweise geben wir den Modelltyp über @model in MyPartial.cshtml an:
@model IEnumerable<string> <div> This is the message from the partial view. @Html.ActionLink("This is a link to the Index action", "Index") <ul> @foreach (string str in Model) { <li>@str</li> } </ul> </div>
und ändern die Hauptansicht List.cshtml, die die Ansicht MyPartial.cshtml aufruft wie folgt:
@{ ViewBag.Title = "List"; Layout = null; } <h3>This is the /Views/Home/List.cshtml View</h3> @Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })
Der Unterschied zu oben besteht darin, dass wir hier den zweiten Parameter für @Html.Partial angeben und ein Array an das Modellobjekt von MyPartial.cshtml übergeben. Der Laufeffekt ist wie folgt:
Child Action
Child action 和 Patial view 类似,也是在应用程序的不同地方可以重复利用相同的子内容。不同的是,它是通过调用 controller 中的 action 方法来呈现子内容的,并且一般包含了业务的处理。任何 action 都可以作为子 action 。接下来介绍如何使用它。
在 HomeController 中添加一个 action,如下:
[ChildActionOnly] public ActionResult Time() { return PartialView(DateTime.Now); }
这个 action 通过调用 PartialView 方法来返回一个 partial view。ChildActionOnly 特性保证了该 action 只能作为子action被调用(不是必须的)。
接着我们继续为这个action添加一个相应的 Time.cshtml 视图,代码如下:
@model DateTime <p>The time is: @Model.ToShortTimeString()</p>
... @Html.Action("Time")
运行结果如下:
我们通过 @Html.Action 方法来调用了 Time action 方法来呈现子内容。在这个方法中我们只传了一个action名称参数,MVC将根据当前View所在Controller去查找这个action。如果是调用其它 controller 中的 action 方法,则需要在第二个参数中指定 controller 的名称,如下:
... @Html.Action("Time", "MyController")
该方法也可以给 action 方法的参数传值,如对于下面带有参数的 action:
... [ChildActionOnly] public ActionResult Time(DateTime time) { return PartialView(time); }我们可以这样使用 @Html.Action 方法:
... @Html.Action("Time", new { time = DateTime.Now })
以上就是[ASP.NET MVC 小牛之路]12 的内容,更多相关内容请关注PHP中文网(www.php.cn)!