Einführung in Razor Views in ASP.NET MVC

ASP.NET MVC bleibt ein Eckpfeiler der Webentwicklung auf dem Microsoft-Stack und bietet eine saubere Trennung von Bedenken und eine feinkörnige Kontrolle über HTTP-Antworten. Im Herzen seiner Ansichtsmaschine liegt Razor, eine leistungsstarke Templating-Syntax, mit der Sie C#-Code nahtlos mit HTML vermischen können. Razor-Ansichten (Dateien mit der -Erweiterung) sind der Standardweg, um dynamische HTML-Inhalte in modernen ASP.NET MVC-Anwendungen zu generieren. Sie ermöglichen es Ihnen, Daten von Controllern in reiche, interaktive Webseiten zu transformieren, ohne umständliche serverseitige Kontrollen zu schreiben oder Business-Logik in Präsentationsschichten zu mischen.

Dieser erweiterte Leitfaden taucht tiefer in Razor-Ansichten ein und umfasst Syntax, erweiterte Funktionen wie Layouts und Partials, Modellbindung, Validierungsintegration und Best Practices für die Leistung. Egal, ob Sie eine kleine Intranet-Anwendung oder eine große öffentliche Website erstellen, das Mastering von Razor hilft Ihnen, wartbare, performante und SEO-freundliche Seiten zu liefern.

Was sind Razor Views?

Razor-Ansichten sind serverseitige Vorlagen, die HTML-Markup mit eingebettetem C#-Code kombinieren. Wenn ein Benutzer eine URL anfordert, leitet die MVC-Pipeline die Anfrage an eine Controller-Aktion weiter. Diese Aktion gibt normalerweise eine zurück, indem sie aufruft. Das Framework sucht dann die entsprechende -Datei, führt den Razor-Code aus, um einen HTML-String zu erzeugen, und sendet diesen String an den Browser des Clients.

Der Hauptvorteil ist, dass Razor Ansichten zur Laufzeit oder zur Kompilierungszeit (abhängig von der Projektkonfiguration) in .NET-Klassen kompiliert, sodass Sie die volle Leistung der .NET-Laufzeit, einschließlich Schleifen, Bedingungen, komplexer Ausdrücke und sogar Ausnahmebehandlung, direkt in Ihrem Markup nutzen können.

Eine einfache Razor-Ansicht könnte beispielsweise so aussehen:

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

Alles vorangestellt mit signalisiert einen Übergang von HTML zu C#. Das Zeichen ist der Kern der Razor-Syntax, und die Engine ist intelligent genug, um zu schließen, wo der C#-Code endet und HTML wieder aufnimmt, auch über Leerzeichen, Klammern oder HTML-Tag-Grenzen hinweg.

Razor Syntax Deep Dive

Um effektive Razor-Ansichten zu schreiben, müssen Sie die verschiedenen verfügbaren Codeblockstile und Ausdrucksmodi verstehen.

Inline-Ausdrücke

Die einfachste Form ist ein Inline-Ausdruck, bei dem ein einzelner gefolgt von einem C#-Ausdruck das Ergebnis als Text ausgibt.

<p>Your account balance is @balance.ToString("C2")</p>

Wenn der Ausdruck eine zurückgibt oder implementiert, wird Razor die Ausgabe nicht HTML-kodieren.

Codeblöcke

Verwenden Sie gefolgt von einem Paar lockiger Zahnspangen, um Multi-Statement-C#-Blöcke zu schreiben:

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

Innerhalb von Codeblöcken können Sie Variablen deklarieren, Methoden aufrufen und Logik ausführen. Das HTML außerhalb der Zahnspangen wird immer noch in der Reihenfolge gerendert.

Kontrollstrukturen

Razor unterstützt Standard-C#-Kontrollfluss-Keywords wie , , , , , und Jeder muss mit vorangestellt werden und von einem Codeblock oder einer einzelnen Anweisung gefolgt werden.

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

In ähnlicher Weise integrieren sich Schleifen natürlich:

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

Beachten Sie, dass die nur für das Eröffnungsschlüsselwort erforderlich ist.

Anmerkungen

Razor bietet eine eigene Kommentarsyntax, die den Inhalt aus dem gerenderten HTML vollständig entfernt:

@* This is a Razor comment. It will not appear in the output. *@

HTML-Kommentare () werden weiterhin an den Browser gesendet und sind in der Quelle sichtbar.

Besondere Merkmale

Um ein literales Symbol anzuzeigen, verwenden Sie . Für E-Mail-Adressen erkennt Razor diese automatisch und muss nicht entkommen.

Stark typisierte Ansichten und Modellbindung

Eines der leistungsstärksten Muster in ASP.NET MVC ist die Verwendung stark typisierter Ansichten. Anstatt sich auf oder zu verlassen, deklarieren Sie den Modelltyp oben in der Ansicht mit der -Direktive (kleinbuchstabenhaft ‘m’).

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

Der Controller übergibt das Modell über die Methode:

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

Stark typisierte Ansichten vereinfachen auch die Einreichung von Formularen mit Modellbindung: Wenn ein Formular veröffentlicht wird, bildet das MVC-Framework die Anforderungsdaten automatisch den Eigenschaften des Modellparameters in der Controller-Aktion zu, sofern die Eingabenamen mit den Eigenschaftennamen des Modells übereinstimmen.

ViewBag, ViewData und TempData

Während stark typisierte Modelle bevorzugt werden, bietet das Framework auch untypisierte Container für die Übertragung von Daten zwischen Controllern und Ansichten:

  • ViewBag: Ein dynamisches Objekt, mit dem Sie beliebige Eigenschaften festlegen können. Es ist ein Wrapper über Beispiel: In der Ansicht mit darauf zugreifen.
  • ViewData: Ein Wörterbuch von Schlüssel-Wert-Paaren ().
  • TempData: Ähnlich wie ViewData, bleibt aber in einer einzigen Weiterleitung bestehen. Es wird in der Sitzung gespeichert und nach dem Lesen gelöscht. Nützlich für die Anzeige von einmaligen Nachrichten wie "Record erfolgreich gespeichert".

Übernutzung von ViewBag kann zu Laufzeitfehlern führen und die Wartung von Ansichten erschweren. Reservieren Sie sie für selten benötigte Hilfsdaten, die nicht in das Hauptmodell passen.

Layouts und ViewStart

Layouts geben Ihrer Anwendung ein einheitliches Erscheinungsbild, indem sie eine gemeinsame Masterseite definieren.Ein Layout ist eine -Datei, die die äußere Struktur einer Seite (Header, Navigation, Fußzeile) und einen -Aufruf enthält, in den der Inhalt einzelner Ansichten eingefügt wird.

Zum Beispiel könnte ein typisches aussehen wie:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

Die -Datei im -Ordner legt das Standardlayout für alle Ansichten in diesem Ordner fest:

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

Sie können das Layout in einer bestimmten Ansicht überschreiben, indem Sie die -Eigenschaft neu zuweisen. Dies ist besonders nützlich für Seiten, die ein völlig anderes Layout benötigen, wie Anmeldeseiten oder Fehlerseiten.

Partielle Ansichten und Ansichtskomponenten

Teilansichten sind wiederverwendbare Fragmente der Benutzeroberfläche, die in andere Ansichten eingebettet werden können. Sie sind besonders nützlich für komplexe Formulare, Listenelemente oder jede Komponente, die an mehreren Stellen erscheint.

Sie stellen eine Teilansicht aus einer anderen Ansicht mit oder dar:

@Html.Partial("_ProductCard", item)

Der Unterschied ist, dass einen HTML-String zurückgibt, während direkt in den Antwortstrom schreibt (etwas schneller für große Teilbereiche, kann aber nicht innerhalb eines Codeblocks verwendet werden).

Für komplexere, logisch-lastige wiederverwendbare Komponenten (wie eine Warenkorbzusammenfassung, die Datenbankzugriff erfordert) sollten Sie View Components View Components sind vollwertige Klassen mit ihrer eigenen Invoke/InvokeAsync-Methode, die die Einführung von Diensten und komplexe Verarbeitung ermöglicht.

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

Rufen Sie aus einer Ansicht mit an.

Abschnitte und RenderSection

In Abschnitten können Sie Regionen in einem Layout definieren, die einzelne Ansichten ausfüllen können. Übliche Anwendungsfälle sind das Einfügen von seitenspezifischen Skripten, Stylesheets oder Inhalten in der Seitenleiste.

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

Wenn ein Abschnitt als erforderlich markiert ist (), muss jede Ansicht, die das Layout verwendet, diesen definieren, oder es wird eine Ausnahme ausgelöst.

Sie können auch überprüfen, ob ein Abschnitt in der Ansicht mit innerhalb des Layouts definiert wurde, wodurch Sie Standardinhalte bereitstellen können.

HTML-Helfer vs Tag-Helfer

Razor-Ansichten bieten zwei Familien von serverseitigen Tools zur Generierung von HTML: HTML-Helfer und Tag-Helfer.

  • HTML Helpers sind Methoden, die in der Ansicht aufgerufen werden, wie oder Sie geben HTML-Strings zurück und sind Entwicklern bekannt, die mit früheren Versionen von MVC gearbeitet haben.
  • Tag Helpers wurden in ASP.NET Core eingeführt, sind aber auch in ASP.NET MVC 5.x über ein NuGet-Paket () verfügbar. Sie ermöglichen es Ihnen, HTML-ähnliche Tags zu schreiben, die der Server verarbeitet, z. B. . Tag Helpers sind natürlicher für Frontend-Entwickler und ermöglichen eine reichere Intellisense- und Validierungsintegration.

Das Erstellen eines Formulars mit Tag Helpers sieht beispielsweise so aus:

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

Tag-Helfer binden automatisch an Modelleigenschaften, rendern Validierungsattribute und generieren korrekte URLs. Sie werden im Allgemeinen für neue Entwicklungen bevorzugt, da sie sich nahtlos in die unaufdringliche Validierung integrieren und einfacher zu warten sind.

Validierung und Fehlerbehandlung

Razoransichten funktionieren in Verbindung mit dem Validierungssystem in ASP.NET MVC. Sie können Validierungsfehler auf Modell- und Eigenschaftsebene mit HTML-Helfern oder Tag-Helfern anzeigen. Die zeigt alle Fehler auf einmal an und zeigt Fehler für ein bestimmtes Feld an.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Wenn Sie Tag Helpers verwenden, wird die Validierungsspanne automatisch hinzugefügt und während der Modellbindung ausgefüllt, wenn die Validierung fehlschlägt.Dieses clientseitige Validierungs-Markup wird mit Datenanmerkungen für Ihr Modell generiert, wie , und .

Um eine unaufdringliche clientseitige Validierung zu ermöglichen, stellen Sie sicher, dass die erforderlichen JavaScript-Bibliotheken ( und ) in Ihrem Layout enthalten sind, normalerweise im Abschnitt .

Razor mit AJAX und Partial Rendering

Razoransichten sind nicht auf ganzseitige Ladevorgänge beschränkt. Sie können sie verwenden, um Teil-HTML zu rendern, das über AJAX zurückgegeben und in das DOM eingefügt wird. Erstellen Sie eine Controller-Aktion, die eine Teilansicht zurückgibt:

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

Auf der Client-Seite verwenden Sie jQuery oder den eingebauten -Helfer, um das Teilergebnis in einen Container zu laden:

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

Sie müssen das -Skript für die -Helfer einschließen, um zu arbeiten. Alternativ können Sie einen einfachen jQuery -Aufruf schreiben, der den Container manuell aktualisiert. Der Vorteil der Verwendung von Razor-Teilteilen für AJAX besteht darin, dass Ihre serverseitige Logik und Ihr Markup konsistent bleiben, wodurch Duplikationen zwischen ganzseitigen und teilweisen Antworten vermieden werden.

Leistungsüberlegungen für Razor Views

Obwohl Razor-Ansichten kompiliert werden, gibt es immer noch Performance-Falle, die zu vermeiden sind:

  • Vermeide übermäßige Logik in Ansichten. Halten Sie Ansichten so einfach wie möglich; verschieben Sie komplexe Berechnungen, Datentransformationen und Geschäftsregeln in den Controller, die Serviceschicht oder das Ansichtsmodell.
  • Caching mit Vorsicht verwenden. Für Ansichten, die sich selten ändern (z. B. statische Navigation), sollten Sie Output-Caching mit dem -Attribut auf die Controller-Aktion anwenden.
  • Minimiere die Anzahl der Teilansichten, die pro Seite gerendert werden. Jeder Aufruf fügt Overhead hinzu. Wenn ein Teil in einer Schleife oft verwendet wird, erwägen Sie, das HTML mit einem StringBuilder oder einem benutzerdefinierten HTML-Generator im Controller zu erstellen.
  • Verwende async-Aktionen für I/O-gebundene Operationen. Wenn deine Ansicht von Daten abhängt, die Datenbankabfragen oder externe API-Aufrufe beinhalten, definiere die Controller-Aktion als und rufe auf, bevor du das Modell übergibst.
  • Precompile Razor Views in der Produktion mit oder dem eingebauten in ASP.NET MVC 5 (via in den Projekteigenschaften auf gesetzt).

Best Practices für Wartbare Razor Ansichten

  • Verwende immer stark typisierte Modelle und vermeide ViewBag für Hauptdaten.
  • Follow Nameing Conventions: Views sollten mit Controller-Aktionsnamen übereinstimmen, und Partials sollten mit Unterstrich vorangestellt werden.
  • Verwenden Sie Anzeige- und Editorvorlagen für wiederverwendbare Datentypanzeigen.
  • CSS und JavaScript von Ansichten trennen. Setzen Sie nur minimale Inline-Styles ein; verwenden Sie Bündelung und Minimierung für externe Ressourcen.
  • Schreibgerätetests für Controller und Ansichtsmodelle. Während Ansichten selbst schwer zu testen sind, stellen Sie sicher, dass die an sie übergebenen Daten korrekt sind.
  • Layouts fokussieren. Setzen Sie keine schwere Logik oder Datenabruf in ein Layout. Layouts sollten nur Gerüst-HTML und Aufrufe an und Abschnitte enthalten.

Schlussfolgerung

Razor-Ansichten sind das Rückgrat der dynamischen HTML-Generierung in ASP.NET MVC. Ihre saubere Syntax, nahtlose Integration mit C# und die Unterstützung für starkes Tippen, Layouts, Partials und Validierung machen sie zu einem leistungsstarken Werkzeug für die Erstellung von wartbaren Webanwendungen. Durch die Beherrschung erweiterter Funktionen wie Tag Helpers, View Components und AJAX Partial Rendering können Sie eine reiche Benutzererfahrung schaffen, ohne die Leistung oder Codequalität zu beeinträchtigen. Während Sie mit ASP.NET MVC weiter entwickeln, erkunden Sie die Fähigkeiten der Razor View Engine - sie entwickelt sich mit jeder Version des .NET-Frameworks und bringt noch mehr Produktivitätsverbesserungen zu Ihrem Webentwicklungsworkflow.

Für weitere Informationen lesen Sie bitte die offizielle Microsoft-Dokumentation zu Razor Syntax, Partial Views und Tag Helpers in ASP.NET Core (die auch für MVC 5 mit geeigneten Paketreferenzen gelten).