Lezen in het Engels

Delen via

Deel 3: een weergave toevoegen aan een ASP.NET Core MVC-app

  • Artikel
  • 10-04-2025

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Door Rick Anderson

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Razor-gebaseerde weergavesjablonen

  • Heb een .cshtml-bestandsextensie.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de View methode van de controller aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Over het algemeen wordt een IActionResult of een klasse die is afgeleid van ActionResult geretourneerd, in plaats van een type zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

Als in het dialoogvenster Nieuw item toevoegen de optie Alle sjablonen weergeven beschikbaar is, selecteert u dit.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Typ bekijken in het zoekvak in de rechterbovenhoek
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • In de volgende afbeelding ziet u de tekenreeks "Hello from our View Template!" hardgecodeerd in de weergave.

    Browservenster

Weergaven en pagina-indelingen wijzigen

Selecteer het menulinks MvcMovie, Home, en Privacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen staan het volgende toe:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MvcMovie.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2025 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie voorvallen van MvcMovie naar Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markup is het kenmerk van de asp-area=""Tag Helper voor ankers en de attribuutwaarde weggelaten omdat deze app geen gebruik maakt van Gebieden.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand importeert het Views/Shared/_Layout.cshtml bestand in elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en het <h2> element zoals gemarkeerd in het volgende:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code wordt de Title eigenschap van de ViewData woordenlijst ingesteld op 'Movie List'. De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Hoofdtitel.
  • Subkoppen.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gecreëerd met ViewData["Title"] die we instellen in de Index.cshtml weergavesjabloon en de toevoeging van "- Movie App" in het indelingsbestand.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen moeten niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

Wijzig de Welcome-methode in HelloWorldController.cs om een Message- en NumTimes-waarde toe te voegen aan het ViewData-woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy weergave met een welkomstlabel en de woordgroep Hallo Rick heeft vier keer weergegeven

In het voorgaande voorbeeld is de ViewData woordenlijst gebruikt om gegevens van de controller door te geven aan een weergave. Verderop in de zelfstudie wordt een weergavemodel gebruikt om gegevens van een controller door te geven aan een weergave. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende handleiding wordt een database met films gemaakt.

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Razor-gebaseerde weergavesjablonen:

  • Een .cshtml bestandsextensie hebben.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de View-methode van de controller aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Retourneer over het algemeen een IActionResult of een klasse die is afgeleid van ActionResult, zorg ervoor dat het geen type is zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

Selecteer Alle sjablonen weergeven in het dialoogvenster Nieuw item toevoegen.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Voer weergave in het zoekvak rechtsboven in.
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • In de volgende afbeelding ziet u de tekenreeks Hello from our View Template!, vastgelegd in de weergave:

    Browservenster

Weergaven en pagina-indelingen wijzigen

Kies de menu-links MvcMovie, Home, en Privacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen staan het volgende toe:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

De titel, voettekst en menukoppeling in het indelingsbestand wijzigen

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie voorkomens van MvcMovie naar Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markeringen zijn het kenmerk en de kenmerkwaarde van de asp-area=""anker Tag Helper weggelaten omdat deze app geen gebruik maakt van gebieden.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand voegt het Views/Shared/_Layout.cshtml bestand toe aan elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en het <h2> element zoals hieronder gemarkeerd.

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code wordt de Title eigenschap van de ViewData woordenlijst ingesteld op 'Movie List'. De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Primaire koptekst.
  • Secundaire koppen.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gemaakt met ViewData["Title"] dat we hebben ingesteld in de Index.cshtml weergavesjabloon, en de extra toevoeging "- Movie App" in het indelingsbestand.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen mogen niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

In HelloWorldController.cs, wijzig de methode Welcome om een Message en NumTimes waarde toe te voegen aan het ViewData woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy weergave met een welkomstlabel en de woorden Hallo Rick worden vier keer weergegeven

In het voorgaande voorbeeld is de ViewData dictionary gebruikt om gegevens van de controller over te dragen aan een weergave. Later in de zelfstudie wordt een viewmodel gebruikt om gegevens van een controller naar een view te sturen. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende handleiding wordt een database met films gemaakt.

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Op Razor gebaseerde weergavesjablonen

  • Hebben een .cshtml bestandsextensie.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de View methode van de controller aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Over het algemeen retourneer een IActionResult of een klasse die van ActionResult is afgeleid, en geen type zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Voer in het zoekvak rechtsboven weergave in.
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • In de volgende afbeelding ziet u de tekenreeks "Hello from our View Template!", hard gecodeerd in de weergave.

    Browservenster

Weergaven en indelingspagina's wijzigen

Selecteer de menukoppelingen MvcMovie en HomePrivacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen staan het volgende toe:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

De titel, voettekst en menukoppeling in het indelingsbestand wijzigen

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2022 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie keer van MvcMovie naar Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markering zijn de eigenschap en de waarde van de asp-area=""Anchor Tag Helper weggelaten omdat deze app geen gebruik maakt van Gebieden.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand brengt het Views/Shared/_Layout.cshtml bestand in elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en het <h2> element zoals gemarkeerd in het volgende:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code wordt de Title eigenschap van het ViewData woordenboek ingesteld op "Movie List". De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Primaire titel.
  • Secundaire koppen.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gemaakt met ViewData["Title"] die we in het Index.cshtml weergavesjabloon hebben ingesteld en de toevoeging "- Movie App" die in het indelingsbestand is toegevoegd.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen mogen niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

Wijzig in HelloWorldController.cs, de Welcome methode om een Message en NumTimes waarde toe te voegen aan het ViewData woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy weergave met een welkomstlabel en de zin Hallo Rick wordt vier keer getoond

In het voorgaande voorbeeld is de ViewData dictionary gebruikt om gegevens van de controller door te geven aan een weergave. Verderop in de zelfstudie wordt een weergavemodel gebruikt om gegevens van een controller naar een weergave te verplaatsen. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende zelfstudie wordt een database met films gemaakt.

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Razor-gebaseerde weergavesjablonen:

  • Een .cshtml bestandsextensie hebben.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de methode van de controller View aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Over het algemeen retourneer een IActionResult of een klasse die van ActionResult is afgeleid, niet een type zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Typ weergave in het zoekvak rechtsboven in
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • De volgende afbeelding toont de hard-gecodeerde tekenreeks "Hello from our View Template!" in de weergave.

    Browservenster

Weergaven en indelingspagina's wijzigen

Selecteer de menukoppelingen MvcMovie en HomePrivacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen staan het volgende toe:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

De titel, voettekst en menukoppeling in het indelingsbestand wijzigen

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie exemplaren van MvcMovie naar Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markeringen is het kenmerk en de attribuutwaarde van de asp-area=""anker Tag Helper weggelaten omdat deze app geen gebruik maakt van gebieden.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand voegt het Views/Shared/_Layout.cshtml bestand toe aan elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en het <h2> element zoals gemarkeerd in het volgende:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code stelt de Title-eigenschap van het ViewData-woordenboek in op 'Movie List'. De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Hoofdtitel.
  • Secundaire koppen.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gemaakt met ViewData["Title"] die we instellen in het Index.cshtml weergavesjabloon en de toevoeging van "- Movie App" in het indelingsbestand.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen mogen niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

Wijzig de Welcome-methode in HelloWorldController.cs om een Message- en NumTimes-waarde toe te voegen aan het ViewData-woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]!; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy weergave die een welkomstlabel toont en de zin Hallo Rick vier keer laat zien

In het voorgaande voorbeeld is het ViewData woordenboek gebruikt om gegevens van de controller door te geven aan een weergave. Later in de zelfstudie wordt een weergavemodel gebruikt om gegevens van een controller over te dragen aan een weergave. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende handleiding wordt een database met films gemaakt.

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Razor-gebaseerde weergavesjablonen

  • Hebben een .cshtml bestandsextensie.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de methode van View de controller aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Retouneer over het algemeen een IActionResult of een klasse die is afgeleid van ActionResult, niet een type zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Typ bekijken in het zoekvak in de rechterbovenhoek
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • In de volgende afbeelding ziet u de tekenreeks "Hello from our View Template!" hard-gecodeerd in de weergave.

    Browservenster

Weergaven en pagina-indelingen wijzigen

Selecteer de menukoppelingen MvcMovie, Home, en Privacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen maken het volgende mogelijk:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

De titel, voettekst en menukoppeling in het indelingsbestand wijzigen

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie keer MvcMovie tot Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markeringen is het kenmerk en de kenmerkwaarde van de asp-area=""Anker Tag Helper weggelaten omdat deze app geen gebruik maakt van Areas.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand voegt het Views/Shared/_Layout.cshtml bestand toe aan elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en het <h2> element zoals aangegeven in het volgende:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code wordt de Title eigenschap van de ViewData woordenlijst ingesteld op 'Movie List'. De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Hoofdkop.
  • Secundaire koppen.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gecreëerd met ViewData["Title"] ingesteld in het Index.cshtml weergavesjabloon en de extra toevoeging "- Movie App" zoals toegevoegd in het indelingsbestand.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen mogen niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

Wijzig in HelloWorldController.cs de methode Welcome om een Message- en NumTimes-waarde toe te voegen aan het ViewData woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy weergave die een welkomstlabel toont en de zin Hallo Rick vier keer laat zien

In het voorgaande voorbeeld is het ViewData woordenboek gebruikt om gegevens van de controller door te geven aan een view. Later in de handleiding wordt een weergavemodel gebruikt om gegevens van een controller door te geven aan een weergave. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende zelfstudie wordt een database met films gemaakt.

In deze sectie wijzigt u de HelloWorldController klasse voor het gebruik van Razor weergavebestanden. Hierdoor wordt het proces voor het genereren van HTML-antwoorden op een client volledig ingekapseld.

Weergavesjablonen worden gemaakt met behulp van Razor. Razor-gebaseerde weergavesjablonen:

  • .cshtml Een bestandsextensie hebben.
  • Geef een elegante manier om HTML-uitvoer te maken met C#.

Momenteel retourneert de Index methode een tekenreeks met een bericht in de controllerklasse. Vervang de Index methode in de HelloWorldController klasse door de volgende code:

public IActionResult Index()
{
    return View();
}

De voorgaande code:

  • Roept de View methode van de controller aan.
  • Maakt gebruik van een weergavesjabloon om een HTML-antwoord te genereren.

Controllermethoden:

  • Worden actiemethoden genoemd. Bijvoorbeeld de Index actiemethode in de voorgaande code.
  • Over het algemeen retourneer een IActionResult of een klasse die is afgeleid van ActionResult, niet een type zoals string.

Een weergave toevoegen

Klik met de rechtermuisknop op de map Weergaven en voeg vervolgens nieuwe map toe > en noem de map HelloWorld.

Klik met de rechtermuisknop op de map Views/HelloWorld en voeg nieuw item toe>.

In het dialoogvenster Nieuw item toevoegen - MvcMovie :

  • Voer weergave in het zoekvak in de rechterbovenhoek in
  • Selecteer Razor Weergave - Leeg
  • Behoud de waarde van het vak Naam. Index.cshtml
  • Selecteer Toevoegen

Dialoogvenster Nieuw item toevoegen

Vervang de inhoud van het Views/HelloWorld/Index.cshtmlRazor weergavebestand door het volgende:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Ga naar https://localhost:{PORT}/HelloWorld:

  • De Index methode in de HelloWorldController instructie return View();heeft uitgevoerd, waarmee is opgegeven dat de methode een weergavesjabloonbestand moet gebruiken om een reactie op de browser weer te geven.

  • Er is geen weergavesjabloonbestandsnaam opgegeven, dus MVC heeft standaard het standaardweergavebestand gebruikt. Wanneer de bestandsnaam van de weergave niet is opgegeven, wordt de standaardweergave geretourneerd. In dit voorbeeld heeft de standaardweergave dezelfde naam als de actiemethode Index . De weergavesjabloon /Views/HelloWorld/Index.cshtml wordt gebruikt.

  • In de volgende afbeelding ziet u de tekenreeks Hello from our View Template!, vastgelegd in de weergave:

    Browservenster

Weergaven en indelingspagina's wijzigen

Selecteer de menukoppelingen MvcMovie, Home, en Privacy. Elke pagina bevat dezelfde menu-indeling. De menu-indeling wordt geïmplementeerd in het Views/Shared/_Layout.cshtml bestand.

Open het Views/Shared/_Layout.cshtml-bestand.

Indelingssjablonen maken het volgende mogelijk:

  • De HTML-containerindeling van een site op één plaats opgeven.
  • De HTML-containerindeling toepassen op meerdere pagina's op de site.

Zoek de @RenderBody() lijn. RenderBody is een tijdelijke aanduiding waarbij alle weergavespecifieke pagina's die u maakt, worden weergegeven, verpakt op de indelingspagina. Als u bijvoorbeeld de Privacy koppeling selecteert, wordt de Views/Home/Privacy.cshtml weergave weergegeven in de RenderBody methode.

De titel, voettekst en menukoppeling in het indelingsbestand wijzigen

Vervang de inhoud van het Views/Shared/_Layout.cshtml bestand door de volgende markeringen. De wijzigingen zijn gemarkeerd:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

De voorgaande markeringen hebben de volgende wijzigingen aangebracht:

  • Drie gevallen van MvcMovie naar Movie App.
  • Het ankerelement <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> aan <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

In de voorgaande markeringen is het kenmerk en de kenmerkwaarde van de asp-area=""anker-Tag Helper weggelaten omdat deze app geen gebruik maakt van Areas.

Opmerking: de Movies controller is niet geïmplementeerd. Op dit moment is de Movie App koppeling niet functioneel.

Sla de wijzigingen op en selecteer de Privacy koppeling. U ziet hoe de titel op het browsertabblad Beleid - Film-app weergeeftPrivacy in plaats van Privacy Beleid - MvcMovie

Privacy tabblad

Selecteer de koppeling Home.

U ziet dat de titel en ankertekst film-app weergeven. De wijzigingen zijn eenmaal aangebracht in de indelingssjabloon en alle pagina's op de site weerspiegelen de nieuwe koppelingstekst en nieuwe titel.

Bekijk het Views/_ViewStart.cshtml bestand:

@{
    Layout = "_Layout";
}

Het Views/_ViewStart.cshtml bestand brengt het Views/Shared/_Layout.cshtml bestand in elke weergave. De Layout eigenschap kan worden gebruikt om een andere indelingsweergave in te stellen of zo in te null stellen dat er geen indelingsbestand wordt gebruikt.

Open het Views/HelloWorld/Index.cshtml weergavebestand.

Wijzig de titel en <h2> het element zoals gemarkeerd in het volgende:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

De titel en <h2> het element zijn iets anders, dus het is duidelijk welk deel van de code de weergave wijzigt.

ViewData["Title"] = "Movie List"; in de bovenstaande code wordt de Title eigenschap van de ViewData woordenlijst ingesteld op 'Movie List'. De Title eigenschap wordt gebruikt in het <title> HTML-element op de indelingspagina:

<title>@ViewData["Title"] - Movie App</title>

Sla de wijziging op en navigeer naar https://localhost:{PORT}/HelloWorld.

U ziet dat het volgende is gewijzigd:

  • Browsertitel.
  • Primaire koptekst.
  • Secundaire tussentitels.

Als er geen wijzigingen in de browser zijn, kan deze inhoud in de cache worden opgeslagen die wordt weergegeven. Druk op Ctrl+F5 in de browser om af te dwingen dat het antwoord van de server wordt geladen. De browsertitel wordt gemaakt met ViewData["Title"] de Index.cshtml weergavesjabloon en de extra film-app die in het indelingsbestand is toegevoegd.

De inhoud in de Index.cshtml weergavesjabloon wordt samengevoegd met de Views/Shared/_Layout.cshtml weergavesjabloon. Er wordt één HTML-antwoord verzonden naar de browser. Met indelingssjablonen kunt u eenvoudig wijzigingen aanbrengen die van toepassing zijn op alle pagina's in een app. Zie Indeling voor meer informatie.

Filmlijstweergave

Het kleine deel van de 'gegevens', het bericht 'Hallo van onze weergavesjabloon!', is echter in code vastgelegd. De MVC-toepassing heeft een 'V' (weergave), een 'C' (controller), maar nog geen 'M' (model).

Gegevens doorgeven van de controller aan de weergave

Controlleracties worden aangeroepen als reactie op een binnenkomende URL-aanvraag. Een controllerklasse is de plaats waar de code wordt geschreven die de binnenkomende browseraanvragen verwerkt. De controller haalt gegevens op uit een gegevensbron en bepaalt welk type reactie moet worden teruggestuurd naar de browser. Weergavesjablonen kunnen worden gebruikt vanaf een controller om een HTML-antwoord op de browser te genereren en op te maken.

Controllers zijn verantwoordelijk voor het verstrekken van de gegevens die nodig zijn om een weergavesjabloon een antwoord te laten weergeven.

Weergavesjablonen moeten niet:

  • Bedrijfslogica uitvoeren
  • Rechtstreeks communiceren met een database.

Een weergavesjabloon mag alleen werken met de gegevens die aan de sjabloon zijn verstrekt door de controller. Door deze 'scheiding van zorgen' te behouden, blijft de code behouden:

  • Schoon.
  • Testbaar.
  • Onderhoudbaar.

Momenteel neemt de Welcome methode in de HelloWorldController klasse een name en een ID parameter en voert de waarden vervolgens rechtstreeks naar de browser uit.

In plaats van dat de controller dit antwoord als een tekenreeks weergeeft, wijzigt u in plaats daarvan de controller om een weergavesjabloon te gebruiken. De weergavesjabloon genereert een dynamisch antwoord, wat betekent dat de juiste gegevens van de controller moeten worden doorgegeven aan de weergave om het antwoord te genereren. Doe dit door de controller de dynamische gegevens (parameters) te laten plaatsen die de weergavesjabloon nodig heeft in een ViewData woordenlijst. De weergavesjabloon heeft vervolgens toegang tot de dynamische gegevens.

Wijzig in HelloWorldController.cs de methode Welcome om een Message- en NumTimes-waarde toe te voegen aan het ViewData-woordenboek.

De ViewData woordenlijst is een dynamisch object, wat betekent dat elk type kan worden gebruikt. Het ViewData object heeft geen gedefinieerde eigenschappen totdat er iets is toegevoegd. Het bindingssysteem van het MVC-model wijst automatisch de benoemde parameters name en numTimes van de queryreeks toe aan parameters in de methode. Het volledige HelloWorldController:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Het ViewData woordenlijstobject bevat gegevens die worden doorgegeven aan de weergave.

Maak een welkomstweergavesjabloon met de naam Views/HelloWorld/Welcome.cshtml.

U maakt een lus in de Welcome.cshtml weergavesjabloon waarin 'Hallo' NumTimeswordt weergegeven. Vervang de inhoud van Views/HelloWorld/Welcome.cshtml door het volgende:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Sla uw wijzigingen op en blader naar de volgende URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Gegevens worden opgehaald uit de URL en doorgegeven aan de controller met behulp van de MVC-modelbinding. De controller verpakt de gegevens in een ViewData woordenlijst en geeft dat object door aan de weergave. De weergave geeft de gegevens vervolgens weer als HTML voor de browser.

Privacy een weergave die een label met Welkom toont en de woordgroep Hallo Rick vier keer wordt weergegeven

In het voorgaande voorbeeld is de ViewData dictionary gebruikt om gegevens van de controller door te geven aan een view. Later in de tutorial wordt een ViewModel gebruikt om gegevens van een controller door te geven aan een weergave. De weergavemodelbenadering voor het doorgeven van gegevens heeft de voorkeur boven de ViewData woordenlijstbenadering.

In de volgende zelfstudie wordt een database met films gemaakt.