Inleiding tot Razor Views in ASP.NET MVC

ASP.NET MVC blijft een hoeksteen van webontwikkeling op de Microsoft stack, het aanbieden van een schone scheiding van zorgen en fijnkorrelige controle over HTTP antwoorden. In het hart van zijn zicht motor ligt Razor, een krachtige templating syntax waarmee je C# code mengen met HTML naadloos. Razor views (bestanden met de extensie) zijn de standaard manier om dynamische HTML-inhoud in moderne ASP.NET MVC-toepassingen te genereren. Ze stellen u in staat om gegevens van controllers om te zetten in rijke, interactieve webpagina's zonder het schrijven van omslachtige server-side controles of het mengen van zakelijke logica in presentatie lagen.

Deze uitgebreide gids duiken dieper in Razor views, die betrekking hebben op syntaxis, geavanceerde functies zoals lay-outs en gedeeltelijkes, modelbinding, validatie integratie, en prestaties best practices. Of u nu een kleine intranet applicatie of een grootschalige publieke website, mastering Razor zal u helpen bij het leveren van onderhoudbare, performante en SEO-vriendelijke pagina's.

Wat zijn Razor Views?

Scheermesweergaven zijn sjablonen aan de serverzijde die HTML-markering combineren met embedded C#-code. Wanneer een gebruiker een URL vraagt, leidt de MVC-pijpleiding het verzoek naar een controlleractie. Die actie geeft meestal een terug door aan te roepen. Het kader loceert dan het bijbehorende bestand, voert de Razor-code uit om een HTML-tekenreeks te produceren en stuurt die tekenreeks naar de clients-browser.

Het belangrijkste voordeel is dat Razor views compileert in .NET-klassen op runtime of tijd compileert (afhankelijk van de projectconfiguratie), zodat u de volledige kracht van de .NET runtime kunt gebruiken, inclusief loops, voorwaardelijken, complexe expressies en zelfs uitzonderingsbehandeling, direct binnen uw markup.

Bijvoorbeeld, een eenvoudige Razor uitzicht zou er als volgt uit kunnen zien:

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

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

Alles wat vooraf is vastgesteld met geeft een overgang van HTML naar C# aan. Het karakter is de kern van Razor syntaxis, en de motor is slim genoeg om te bepalen waar de C# code eindigt en HTML hervat, zelfs over spaties, haakjes, of HTML-taggrenzen.

Scheermes Syntaxis Deep Dive

Om effectieve weergaven van Razor te schrijven, moet u de verschillende code blokstijlen en expressiemodi die beschikbaar zijn begrijpen.

Inline expressies

De eenvoudigste vorm is een inline expressie, waarbij één gevolgd door een C# expressie het resultaat als tekst weergeeft. Bijvoorbeeld:

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

Als de expressie een geeft of implementeert , zal Razor de uitvoer niet HTML-coderen. Voor alle andere typen codeert Razor automatisch de waarde om cross-site scripting (XSS) kwetsbaarheden te voorkomen.

Codeblokken

Gebruik gevolgd door een paar krullende beugels om multi-statement C# blokken te schrijven:

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

Binnen codeblokken kunt u variabelen aangeven, aanroepen en logica uitvoeren. De HTML buiten de braces wordt nog steeds in volgorde weergegeven.

Controlestructuren

De trefwoorden van de standaard C#-besturingsstroom worden ondersteund door de schoorsteen, zoals , , , , en ]. Elk moet worden voorbereid met en gevolgd door een codeblok of een enkele verklaring. De beste praktijk is altijd beugels te gebruiken om dubbelzinnigheid te voorkomen:

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

Ook de lussen integreren natuurlijk:

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

Merk op dat de alleen vereist is op het openingstrefwoord. De sluithaak is gewoon C# en Razor hervat correct HTML wanneer de tag wordt tegengekomen.

Opmerkingen

Razor biedt zijn eigen commentaar syntax die content van de weergegeven HTML volledig stript:

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

HTML-commentaren () worden nog steeds naar de browser verzonden en zijn zichtbaar in de bron. Gebruik Razor-commentaren voor ontwikkelaarsnotities of om tijdelijk codeblokken uit te schakelen.

Speciale tekens

Om een letterlijk symbool weer te geven, gebruik . Voor e-mailadressen herkent Razor ze automatisch en hoeft niet te ontsnappen. Bijvoorbeeld, wordt behandeld als platte tekst.

Sterk-getypte weergaven en modelbinding

Een van de krachtigste patronen in ASP.NET MVC gebruikt sterk getypte weergaven. In plaats van te vertrouwen op of , verklaar je het modeltype bovenaan de weergave met behulp van de richtlijn (lowercase 

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

De controller passeert het model via de methode:

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

Sterk getypte weergaven vereenvoudigen ook formulierinzendingen met modelbinding. Wanneer een formulier wordt geplaatst, brengt het MVC-raamwerk automatisch gegevens in kaart met eigenschappen van de modelparameter in de controlleractie, mits de invoernamen overeenkomen met de eigendomsnamen van het model.

ViewBag, ViewData en TempData

Hoewel sterk getypte modellen de voorkeur krijgen, biedt het kader ook ongetypte containers voor het doorgeven van gegevens tussen controllers en views:

  • BekijkBag: Een dynamisch object waarmee u willekeurige eigenschappen kunt instellen. Het is een wikkelaar over . Voorbeeld: . Toegang tot het beeld met .
  • BekijkData: Een woordenboek van sleutelwaardeparen (). Toegang tot het woordenboek als ]. Waarden moeten worden gegoten naar het juiste type als u sterke typen nodig hebt.
  • TempData: Gelijkaardig aan ViewData maar blijft over één enkele redirect. Het wordt opgeslagen in sessie en gewist na gelezen te zijn. Nuttig voor het weergeven van eenmalige berichten zoals

Gebruik deze mechanismen spaarzaam. Overgebruik van ViewBag kan leiden tot runtime fouten en maakt weergaven moeilijker te handhaven. Reserveer ze voor zelden benodigde hulpgegevens die niet passen in het hoofdmodel.

Opmaak en weergaveStart

Indelingen geven uw toepassing een consistente blik en gevoel door een gemeenschappelijke hoofdpagina te definiëren. Een lay-out is een bestand dat de buitenste structuur van een pagina (header, navigatie, footer) en een aanroep bevat waar de inhoud van individuele weergaven wordt ingevoegd.

Bijvoorbeeld, een typische zou er als volgt uit kunnen zien:

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

Individuele weergaven kunnen aangeven welke lay-out te gebruiken is. Volgens de overeenkomst stelt het bestand in de map de standaard indeling voor alle weergaven in die map in:

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

U kunt de layout in een specifieke weergave overschrijven door de eigenschap opnieuw toe te wijzen. Dit is vooral handig voor pagina's die een compleet andere indeling nodig hebben, zoals loginpagina's of foutpagina's.

Gedeeltelijke weergave en weergavecomponenten

Gedeeltelijke weergaven zijn herbruikbare fragmenten van UI die in andere weergaven kunnen worden ingebed. Ze zijn vooral nuttig voor complexe vormen, lijstitems of een component die op meerdere plaatsen verschijnt. Om een gedeeltelijke weergave te maken, maak gewoon een bestand dat conventioneel wordt genoemd met een toonaangevende onderstreping (bijv. ).

U geeft een gedeeltelijk beeld vanuit een ander beeld weer met of :

@Html.Partial("_ProductCard", item)

Het verschil is dat een HTML-tekenreeks teruggeeft, terwijl direct naar de responsstroom schrijft (iets sneller voor grote partities, maar niet binnen een codeblok kan worden gebruikt).

Voor meer complexe, logische herbruikbare componenten (zoals een samenvatting van een winkelwagen die databasetoegang vereist), overwegen Bekijk Componenten. Bekijk Componenten zijn volwaardige klassen met hun eigen Invoce/InvoceAsync methode, waardoor het injecteren van diensten en complexe verwerking mogelijk is. Zij zijn de moderne opvolger van kindacties:

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

Oproep vanuit een zicht met .

Secties en Rendersectie

Door secties kunt u regio's definiëren in een lay-out die individuele weergaven kunnen invullen. Veelgebruikte gevallen omvatten het injecteren van paginaspecifieke scripts, stylesheets of inhoud van zijbalk. In de lay-out, verklaar een sectie met . In een view, definieer de inhoud:

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

Als een sectie is gemarkeerd als vereist (), moet elke weergave die de lay-out gebruikt, deze definiëren, of er zal een uitzondering worden gemaakt. Gebruik de vereiste secties voor items die van fundamenteel belang zijn voor de pagina, zoals een titelgebied of hoofdinhoud.

U kunt ook controleren of een sectie is gedefinieerd in de weergave met binnen de layout, waarmee u standaardinhoud kunt leveren.

HTML-helpers vs Tag Helpers

Scheermesweergaven bieden twee families van server-side tools voor het genereren van HTML: HTML Helpers en Tag Helpers.

  • HTML Helpers zijn methoden die in het zicht worden genoemd, zoals of %]]. Ze geven HTML-tekenreeksen terug en zijn bekend met ontwikkelaars die met eerdere versies van MVC hebben gewerkt.
  • Tag Helpers werden geïntroduceerd in ASP.NET Core maar zijn ook beschikbaar in ASP.NET MVC 5.x via een NuGet pakket (). Ze laten je toe om HTML-achtige tags te schrijven die de server verwerkt, bijvoorbeeld . Tag Helpers zijn natuurlijker voor front-end ontwikkelaars en maken rijker Intellisense en validatie integratie mogelijk.

Bijvoorbeeld, het creëren van een formulier met Tag Helpers ziet eruit als:

<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 Helpers binden zich automatisch aan modeleigenschappen, render validatie-attributen en genereren correcte URL's. Ze hebben meestal de voorkeur voor nieuwe ontwikkeling omdat ze naadloos integreren met onopvallende validatie en gemakkelijker te onderhouden zijn.

Validatie en foutafhandeling

Scheermesweergaven werken in overleg met het validatiesysteem in ASP.NET MVC. U kunt validatiefouten op modelniveau en op property-level weergeven met behulp van HTML Helpers of Tag Helpers. De toont alle fouten tegelijk, en toont fouten voor een specifiek veld.

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

Wanneer u Tag Helpers gebruikt, wordt de valideringsspanwijdte automatisch toegevoegd en bevolkt tijdens modelbinding als de validatie mislukt. Deze cliënt-side validatiemarkering wordt gegenereerd met behulp van dataannotaties op uw model, zoals , , en .

Om onopvallende cliënt-side validatie in te schakelen, moet u ervoor zorgen dat de noodzakelijke JavaScript bibliotheken ([] en ) in uw lay-out worden opgenomen, meestal in de sectie.

Scheermes met AJAX en gedeeltelijke rendering

Scheermesweergaven zijn niet beperkt tot volledige paginaladingen. U kunt ze gebruiken om gedeeltelijke HTML terug te geven die via AJAX wordt geretourneerd en in de DOM wordt ingevoegd. Maak een controlleractie aan die een gedeeltelijke weergave geeft:

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

Gebruik jQuery of de ingebouwde helper van de client om het gedeeltelijke resultaat in een container te laden:

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

U moet het script voor de helpers om te werken opnemen. Als alternatief kunt u een simpele jQuery aanroep schrijven die de container handmatig updates geeft. Het voordeel van het gebruik van Razor-partities voor AJAX is dat uw server-side logica en markup consistent blijven, waardoor overlapping tussen volledige pagina en gedeeltelijke reacties wordt vermeden.

Prestatieoverwegingen voor scheermesweergaven

Hoewel Razor views zijn samengesteld, zijn er nog steeds prestatie valkuilen te vermijden:

  • Vermijd overdreven logica in de weergaven. Houd de weergaven zo eenvoudig mogelijk; verplaats complexe berekeningen, gegevenstransformaties en bedrijfsregels naar de controller, servicelaag of het weergavemodel.
  • Gebruik caching verstandig.[ Voor uitzichten die zelden veranderen (bv. statische navigatie), overwegen om output caching toe te passen met de attribuut op de controller actie. Voor gedeeltelijke views die duur zijn om te renderen, gebruik met (custom extension) of een caching framework zoals .
  • Minimaliseer het aantal gedeeltelijke weergaven per pagina. Elke oproep voegt overhead toe. Als een deel wordt gebruikt vele malen in een lus, overwegen de HTML in de controller te bouwen met behulp van een StringBuilder of een aangepaste HTML-generator.
  • Gebruik async acties voor I/O-gebonden operaties.[ Als uw weergave afhankelijk is van gegevens die database queries of externe API oproepen, definieer de actie van de controller als en bel voordat u het model passeert. Dit maakt threads vrij tijdens I/O-wacht.
  • Voorkom Razorweergaven in productie met behulp van of de ingebouwde in ASP.NET MVC 5 (via ) ingesteld op in projecteigenschappen). Dit elimineert de eerste aanvraag compilatievertraging.

Beste praktijken voor het handhaven van Scheermes weergaven

  • Gebruik altijd sterk getypte modellen en vermijd ViewBag voor hoofdgegevens. Dit verbetert de controle en leesbaarheid van compilatietijd.
  • Volg naamgeving conventies: weergaven moeten overeenkomen met namen van de besturingsacties, en deelstukken moeten worden vooraf bevestigd met onderstreept.
  • Gebruik display en editor templates voor herbruikbare gegevenstype displays. Bijvoorbeeld, maak om data consistent te formatteren.
  • Separeer CSS en JavaScript vanuit het zicht. Zet slechts minimale inline stijlen; gebruik bundeling en minificatie voor externe bronnen.
  • Schrijfeenheidstests voor controllers en weergavemodellen.[ Hoewel de weergaven zelf moeilijk te testen zijn, moet ervoor worden gezorgd dat de gegevens correct zijn. Overweeg UI testkaders zoals Selenium of Playwright voor validatie op integratieniveau.
  • Laat de lay-outs gericht blijven. Zet geen zware logica of data-opsporing in een lay-out. Indelingen mogen alleen steigers bevatten HTML en oproepen naar en secties.

Conclusie

Razor views zijn de ruggengraat van dynamische HTML-generatie in ASP.NET MVC. Hun schone syntaxis, naadloze integratie met C#, en ondersteuning voor sterke typen, lay-outs, gedeeltelijke onderdelen, en validatie maken hen een krachtig hulpmiddel voor het bouwen van onderhoudbare webapplicaties. Door het beheersen van geavanceerde functies zoals Tag Helpers, View Components, en AJAX gedeeltelijke rendering, kunt u rijke gebruikerservaringen te creëren zonder opoffering van prestaties of codekwaliteit. Terwijl u verder te ontwikkelen met ASP.NET MVC, blijven verkennen van de Razor view engine . .Tools editionsit evolueert met elke versie van het .NET-raamwerk, waardoor nog meer productiviteitsverbeteringen aan uw webontwikkeling workflow.

Voor meer informatie, raadpleeg de officiële Microsoft documentatie over Razor Syntax, Deelmatige weergaven, en Tag Helpers in ASP.NET Core (die ook van toepassing zijn op MVC 5 met geschikte pakketverwijzingen).