Weergaven in ASP.NET Core MVC

Door Steve Smith en Dave Brock

In dit document worden weergaven uitgelegd die worden gebruikt in ASP.NET Core MVC-toepassingen. Zie De architectuur en concepten van pagina's in ASP.NET Core voor meer informatie over Pagina'sRazor.Razor

In het MVC-patroon (Model-View-Controller) verwerkt de weergave de gegevenspresentatie en gebruikersinteractie van de app. Een weergave is een HTML-sjabloon met ingesloten Razor markeringen. Razor markeringen zijn code die communiceert met HTML-markeringen om een webpagina te produceren die naar de client wordt verzonden.

In ASP.NET Core MVC zijn .cshtml weergaven bestanden die gebruikmaken van de C#-programmeertaal in Razor markeringen. Normaal gesproken worden weergavebestanden gegroepeerd in mappen met de naam voor elk van de controllers van de app. De mappen worden opgeslagen in een Views map in de hoofdmap van de app:

De Home controller wordt vertegenwoordigd door een Home map in de Views map. De Home map bevat de weergaven voor de Aboutwebpagina's , Contacten Index (startpagina). Wanneer een gebruiker een van deze drie webpagina's aanvraagt, bepalen controlleracties in de Home controller welke van de drie weergaven worden gebruikt om een webpagina naar de gebruiker te bouwen en te retourneren.

Gebruik indelingen om consistente webpaginasecties te bieden en codeherhaling te verminderen. Indelingen bevatten vaak de koptekst, navigatie en menu-elementen en de voettekst. De kop- en voettekst bevatten meestal standaardmarkeringen voor veel metagegevenselementen en koppelingen naar script- en stijlassets. Met indelingen kunt u deze standaardopmaak in uw weergaven voorkomen.

Gedeeltelijke weergaven verminderen duplicatie van code door herbruikbare delen van weergaven te beheren. Een gedeeltelijke weergave is bijvoorbeeld handig voor een biografie van een auteur op een blogwebsite die in verschillende weergaven wordt weergegeven. Een biografie van een auteur is gewone weergave-inhoud en vereist geen code om de inhoud voor de webpagina te produceren. Auteur biografische inhoud is alleen beschikbaar voor de weergave door modelbinding, dus het gebruik van een gedeeltelijke weergave voor dit type inhoud is ideaal.

Weergaveonderdelen zijn vergelijkbaar met gedeeltelijke weergaven omdat u terugkerende code kunt verminderen, maar ze zijn geschikt voor het weergeven van inhoud waarvoor code moet worden uitgevoerd op de server om de webpagina weer te geven. Weergaveonderdelen zijn handig wanneer de weergegeven inhoud interactie met de database vereist, zoals voor een winkelwagen van een website. Weergaveonderdelen zijn niet beperkt tot modelbinding om webpagina-uitvoer te produceren.

Voordelen van het gebruik van weergaven

Weergaven helpen bij het vaststellen van de scheiding van problemen binnen een MVC-app door de markering van de gebruikersinterface van andere onderdelen van de app te scheiden. Het volgende SoC-ontwerp maakt uw app modulair, wat verschillende voordelen biedt:

• De app is eenvoudiger te onderhouden omdat deze beter is georganiseerd. Weergaven worden over het algemeen gegroepeerd op app-functie. Hierdoor kunt u gemakkelijker gerelateerde weergaven vinden wanneer u aan een functie werkt.
• De onderdelen van de app zijn losjes gekoppeld. U kunt de weergaven van de app afzonderlijk van de onderdelen voor bedrijfslogica en gegevenstoegang bouwen en bijwerken. U kunt de weergaven van de app wijzigen zonder dat u andere onderdelen van de app hoeft bij te werken.
• Het is eenvoudiger om de onderdelen van de gebruikersinterface van de app te testen, omdat de weergaven afzonderlijke eenheden zijn.
• Vanwege een betere organisatie is het minder waarschijnlijk dat u per ongeluk secties van de gebruikersinterface herhaalt.

Een weergave maken

Weergaven die specifiek zijn voor een controller, worden in de Views/[ControllerName] map gemaakt. Weergaven die worden gedeeld tussen controllers, worden in de Views/Shared map geplaatst. Als u een weergave wilt maken, voegt u een nieuw bestand toe en geeft u het dezelfde naam als de bijbehorende controlleractie met de .cshtml bestandsextensie. Als u een weergave wilt maken die overeenkomt met de About actie in de Home controller, maakt u een About.cshtml bestand in de Views/Home map:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Razor Markeringen beginnen met het @ symbool. Voer C#-instructies uit door C#-code in Razor codeblokken te plaatsen die zijn ingesteld door accolades ({ ... }). Zie bijvoorbeeld de toewijzing 'Info' die ViewData["Title"] hierboven wordt weergegeven. U kunt waarden in HTML weergeven door te verwijzen naar de waarde met het @ symbool. Bekijk de inhoud van de <h2> bovenstaande elementen <h3> .

De bovenstaande weergave-inhoud maakt alleen deel uit van de hele webpagina die aan de gebruiker wordt weergegeven. De rest van de indeling van de pagina en andere algemene aspecten van de weergave worden opgegeven in andere weergavebestanden. Zie het onderwerp Indeling voor meer informatie.

Hoe controllers weergaven opgeven

Weergaven worden meestal geretourneerd vanuit acties als een ViewResult, een type ActionResult. Uw actiemethode kan rechtstreeks een ViewResult actiemethode maken en retourneren, maar dat wordt meestal niet gedaan. Aangezien de meeste controllers overnemen van Controller, gebruikt u gewoon de View helpermethode om het ViewResultvolgende te retourneren:

HomeController.cs:

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Wanneer deze actie wordt geretourneerd, wordt de About.cshtml weergave die in de laatste sectie wordt weergegeven als de volgende webpagina:

De View helpermethode heeft verschillende overbelastingen. U kunt desgewenst het volgende opgeven:

• Een expliciete weergave die moet worden geretourneerd:

  return View("Orders");
  

• Een model dat moet worden doorgegeven aan de weergave:

  return View(Orders);
  

• Zowel een weergave als een model:

  return View("Orders", Orders);
  

Detectie weergeven

Wanneer een actie een weergave retourneert, vindt een proces met de naam weergavedetectie plaats. Dit proces bepaalt welk weergavebestand wordt gebruikt op basis van de weergavenaam.

Het standaardgedrag van de View methode (return View();) is het retourneren van een weergave met dezelfde naam als de actiemethode waaruit deze wordt aangeroepen. De methodenaam van de controller wordt bijvoorbeeld gebruikt om te zoeken naar een weergavebestand met de AboutActionResult naam About.cshtml. Eerst zoekt de runtime in de Views/[ControllerName] map voor de weergave. Als er geen overeenkomende weergave wordt gevonden, wordt in de Shared map naar de weergave gezocht.

Het maakt niet uit of u impliciet de ViewResult weergavenaam met return View(); of expliciet doorgeeft aan de View methode.return View("<ViewName>"); In beide gevallen zoekt detectie naar een overeenkomend weergavebestand in deze volgorde:

1. Views/\[ControllerName]/\[ViewName].cshtml
2. Views/Shared/\[ViewName].cshtml

U kunt een bestandspad voor weergaven opgeven in plaats van een weergavenaam. Als u een absoluut pad gebruikt dat begint bij de hoofdmap van de app (optioneel te beginnen met '/' of '~/'), moet de .cshtml extensie worden opgegeven:

return View("Views/Home/About.cshtml");

U kunt ook een relatief pad gebruiken om weergaven in verschillende mappen op te geven zonder de .cshtml extensie. In de HomeControllerweergave kunt u de Index weergave van uw Manage weergaven retourneren met een relatief pad:

return View("../Manage/Index");

Op dezelfde manier kunt u de huidige controllerspecifieke map aangeven met het voorvoegsel './':

return View("./About");

Gedeeltelijke weergaven en weergaveonderdelen maken gebruik van vergelijkbare (maar niet identieke) detectiemechanismen.

U kunt de standaardconventie aanpassen voor hoe weergaven zich in de app bevinden met behulp van een aangepaste IViewLocationExpander.

Weergavedetectie is afhankelijk van het zoeken van weergavebestanden op bestandsnaam. Als het onderliggende bestandssysteem hoofdlettergevoelig is, zijn weergavenamen waarschijnlijk hoofdlettergevoelig. Voor compatibiliteit tussen besturingssystemen moet u hoofdletters en kleine letters vergelijken tussen controller- en actienamen en gekoppelde weergavemappen en bestandsnamen. Als er een fout optreedt dat een weergavebestand niet kan worden gevonden tijdens het werken met een hoofdlettergevoelig bestandssysteem, controleert u of de hoofdletters overeenkomen tussen het aangevraagde weergavebestand en de werkelijke weergavebestandsnaam.

Volg de aanbevolen procedure voor het ordenen van de bestandsstructuur voor uw weergaven om de relaties tussen controllers, acties en weergaven weer te geven voor onderhoudbaarheid en duidelijkheid.

Gegevens doorgeven aan weergaven

Gegevens doorgeven aan weergaven met behulp van verschillende benaderingen:

• Sterk getypte gegevens: viewmodel
• Zwak getypte gegevens
  • ViewData (ViewDataAttribute)
  • ViewBag

Sterk getypte gegevens (viewmodel)

De meest robuuste benadering is het opgeven van een modeltype in de weergave. Dit model wordt meestal een viewmodel genoemd. U geeft een exemplaar van het type viewmodel door aan de weergave vanuit de actie.

Door een viewmodel te gebruiken om gegevens door te geven aan een weergave, kan de weergave profiteren van sterke typecontrole. Sterk typen (of sterk getypt) betekent dat elke variabele en constante een expliciet gedefinieerd type heeft (bijvoorbeeld string, intof DateTime). De geldigheid van de typen die in een weergave worden gebruikt, wordt gecontroleerd tijdens het compileren.

Visual Studio - en Visual Studio Code-lijst hebben sterk getypte klasseleden met behulp van een functie met de naam IntelliSense. Als u de eigenschappen van een viewmodel wilt zien, typt u de naam van de variabele voor het viewmodel gevolgd door een punt (.). Hierdoor kunt u sneller code schrijven met minder fouten.

Geef een model op met behulp van de @model instructie. Gebruik het model met @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Als u het model wilt opgeven voor de weergave, geeft de controller het door als een parameter:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

Er zijn geen beperkingen voor de modeltypen die u voor een weergave kunt opgeven. We raden u aan om poCO-viewmodels (Plain Old CLR Object) te gebruiken met weinig of geen gedrag (methoden) gedefinieerd. Normaal gesproken worden viewmodel-klassen opgeslagen in de Models map of in een afzonderlijke ViewModels map in de hoofdmap van de app. Het Address viewmodel dat in het bovenstaande voorbeeld wordt gebruikt, is een POCO-viewmodel dat is opgeslagen in een bestand met de naam Address.cs:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Niets voorkomt dat u dezelfde klassen gebruikt voor zowel uw viewmodel-typen als uw bedrijfsmodeltypen. Door afzonderlijke modellen te gebruiken, kunnen uw weergaven echter onafhankelijk van de bedrijfslogica en gegevenstoegangsonderdelen van uw app verschillen. Scheiding van modellen en viewmodels biedt ook beveiligingsvoordelen wanneer modellen modelbinding en -validatie gebruiken voor gegevens die door de gebruiker naar de app worden verzonden.

Zwak getypte gegevens (ViewDatakenmerk [ViewData] en ViewBag)

ViewBag is niet standaard beschikbaar voor gebruik in Razor PaginaklassenPageModel.

Naast sterk getypte weergaven hebben weergaven toegang tot een zwak getypte verzameling gegevens (ook wel losjes getypt). In tegenstelling tot sterke typen betekent zwakke typen (of losse typen) dat u niet expliciet het type gegevens declareert dat u gebruikt. U kunt de verzameling van zwak getypte gegevens gebruiken voor het doorgeven van kleine hoeveelheden gegevens in en uit controllers en weergaven.

Naar deze verzameling kan worden verwezen via de ViewData of ViewBag eigenschappen op controllers en weergaven. De ViewData eigenschap is een woordenlijst met zwak getypte objecten. De ViewBag eigenschap is een wrapper rond ViewData die dynamische eigenschappen biedt voor de onderliggende ViewData verzameling. Opmerking: belangrijke zoekacties zijn hoofdlettergevoelig voor zowel ViewData als ViewBag.

ViewData en ViewBag dynamisch worden opgelost tijdens runtime. Omdat ze geen controle van het type compileertijd bieden, zijn beide over het algemeen foutgevoeliger dan het gebruik van een viewmodel. Daarom geven sommige ontwikkelaars er de voorkeur aan minimaal of nooit te gebruiken ViewData en ViewBag.

ViewData

ViewData is een ViewDataDictionary object dat toegankelijk is via string sleutels. Tekenreeksgegevens kunnen rechtstreeks zonder cast worden opgeslagen en gebruikt, maar u moet andere ViewData objectwaarden naar specifieke typen casten wanneer u ze extraheert. U kunt ViewData gegevens doorgeven van controllers aan weergaven en binnen weergaven, inclusief gedeeltelijke weergaven en indelingen.

Hier volgt een voorbeeld waarin waarden worden ingesteld voor een begroeting en een adres dat in een actie wordt gebruikt ViewData :

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Werken met de gegevens in een weergave:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

[ViewData]-kenmerk

Een andere benadering die gebruikmaakt van de ViewDataDictionary is ViewDataAttribute. Eigenschappen op controllers of Razor paginamodellen die zijn gemarkeerd met het [ViewData] kenmerk, hebben hun waarden opgeslagen en geladen uit de woordenlijst.

In het volgende voorbeeld bevat de Home controller een Title eigenschap die is gemarkeerd met [ViewData]. Met About de methode wordt de titel voor de weergave Info ingesteld:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

In de indeling wordt de titel gelezen uit de ViewData-woordenlijst:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBag

ViewBag is niet standaard beschikbaar voor gebruik in Razor PaginaklassenPageModel.

ViewBag is een Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData object dat dynamische toegang biedt tot de objecten die zijn opgeslagen in ViewData. ViewBag kan handiger zijn om mee te werken, omdat er geen cast-conversie nodig is. In het volgende voorbeeld ziet u hoe u dit kunt gebruiken ViewBag met hetzelfde resultaat als ViewData hierboven:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Gelijktijdig gebruiken ViewData en ViewBag gebruiken

ViewBag is niet standaard beschikbaar voor gebruik in Razor PaginaklassenPageModel.

Aangezien ViewData en ViewBag verwijzen naar dezelfde onderliggende ViewData verzameling, kunt u zowel ViewData en ViewBag combineren en vergelijken tussen deze verzameling bij het lezen en schrijven van waarden.

Stel de titel in met ViewBag behulp van de beschrijving ViewData boven aan een About.cshtml weergave:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Lees de eigenschappen, maar draai het gebruik van ViewData en ViewBagom. Haal in het _Layout.cshtml bestand de titel op met behulp van ViewData en haal de beschrijving op met behulp van ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Houd er rekening mee dat voor tekenreeksen geen cast ViewDatais vereist. U kunt het gebruiken @ViewData["Title"] zonder casten.

Het gebruik van beide ViewData en ViewBag tegelijkertijd werkt, net als het combineren en vergelijken van de eigenschappen en het schrijven van de eigenschappen. De volgende markeringen worden weergegeven:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

Overzicht van de verschillen tussen ViewData en ViewBag

ViewBag is niet standaard beschikbaar voor gebruik in Razor PaginaklassenPageModel.

• ViewData
  • Afgeleid van ViewDataDictionary, zodat het woordenlijsteigenschappen heeft die nuttig kunnen zijn, zoals ContainsKey, Add, Removeen Clear.
  • Sleutels in de woordenlijst zijn tekenreeksen, dus witruimte is toegestaan. Voorbeeld: ViewData["Some Key With Whitespace"]
  • Elk ander type dan een string ander type moet in de weergave worden gegoten om te gebruiken ViewData.
• ViewBag
  • Afgeleid van Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.DynamicViewData, zodat het het maken van dynamische eigenschappen met behulp van punt notatie (@ViewBag.SomeKey = <value or object>) toestaat, en er is geen cast vereist. De syntaxis van ViewBag maakt het sneller om toe te voegen aan controllers en weergaven.
  • Eenvoudiger om te controleren op null-waarden. Voorbeeld: @ViewBag.Person?.Name

Wanneer gebruikt ViewData of ViewBag

Beide ViewData en ViewBag zijn even geldige benaderingen voor het doorgeven van kleine hoeveelheden gegevens tussen controllers en weergaven. De keuze van welke u wilt gebruiken, is gebaseerd op voorkeur. U kunt objecten combineren en ViewBag vergelijkenViewData, maar de code is gemakkelijker te lezen en te onderhouden met één benadering die consistent wordt gebruikt. Beide benaderingen worden dynamisch opgelost tijdens runtime en dus gevoelig voor het veroorzaken van runtimefouten. Sommige ontwikkelteams vermijden ze.

Dynamische weergaven

Weergaven die geen modeltype declareren, @model maar waaraan een modelinstantie is doorgegeven (bijvoorbeeld return View(Address);) kunnen dynamisch verwijzen naar de eigenschappen van het exemplaar:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Deze functie biedt flexibiliteit, maar biedt geen compilatiebeveiliging of IntelliSense. Als de eigenschap niet bestaat, mislukt het genereren van webpagina's tijdens runtime.

Meer weergavefuncties

Tag Helpers maken het eenvoudig om gedrag aan de serverzijde toe te voegen aan bestaande HTML-tags. Als u Tag Helpers gebruikt, hoeft u geen aangepaste code of helpers in uw weergaven te schrijven. Taghelpers worden toegepast als kenmerken voor HTML-elementen en worden genegeerd door editors die ze niet kunnen verwerken. Hiermee kunt u weergavemarkeringen bewerken en weergeven in verschillende hulpprogramma's.

Het genereren van aangepaste HTML-markeringen kan worden bereikt met veel ingebouwde HTML-helpers. Complexere logica voor gebruikersinterfaces kan worden verwerkt door Onderdelen weergeven. Weergaveonderdelen bieden dezelfde SoC die controllers en weergaven bieden. Ze kunnen de noodzaak van acties en weergaven die betrekking hebben op gegevens die worden gebruikt door algemene gebruikersinterface-elementen voorkomen.

Net als veel andere aspecten van ASP.NET Core ondersteunen weergaven afhankelijkheidsinjectie, waardoor services in weergaven kunnen worden geïnjecteerd.

h1 {
    color: red;
}

<link rel="stylesheet" href="~/{APP ASSEMBLY}.styles.css" />

<link rel="stylesheet" href="WebApp.styles.css" />

/* /Pages/Index.cshtml.rz.scp.css */
h1[b-3xxtam6d07] {
    color: red;
}

<h1 b-3xxtam6d07>

<ItemGroup>
  <None Update="{Pages|Views}/Index.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<ItemGroup>
  <None Update="{Pages|Views}/BaseView.cshtml.css" CssScope="custom-scope-identifier" />
  <None Update="{Pages|Views}/DerivedView.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<ItemGroup>
  <None Update="{Pages|Views}/*.cshtml.css" CssScope="custom-scope-identifier" />
</ItemGroup>

<PropertyGroup>
  <StaticWebAssetBasePath>_content/$(PackageId)</StaticWebAssetBasePath>
</PropertyGroup>

<PropertyGroup>
  <DisableScopedCssBundling>true</DisableScopedCssBundling>
</PropertyGroup>

<link href="_content/ClassLib/ClassLib.bundle.scp.css" rel="stylesheet">