Dela via

Del 3, lägg till en vy i en ASP.NET Core MVC-app

Anmärkning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i supportpolicyn för .NET och .NET Core. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktigt!

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Av Rick Anderson

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

Om alternativet Visa alla mallar är tillgängligt i dialogrutan Lägg till nytt objekt väljer du det.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Layoutmallar tillåter:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

I dialogrutan Lägg till nytt objekt väljer du Visa alla mallar.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Layoutmallar tillåter:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Layoutmallar tillåter:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Layoutmallar tillåter:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
        }
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Med layoutmallar kan du:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
        }
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell

I det här avsnittet ändrar du HelloWorldController-klassen för att använda visningsfilerna Razor. Detta kapslar in processen för att generera HTML-svar till en klient.

Visa mallar skapas med hjälp av Razor. Razor-baserade vymallar:

  • Ha ett .cshtml filnamnstillägg.
  • Ge ett elegant sätt att skapa HTML-utdata med C#.

Index För närvarande returnerar metoden en sträng med ett meddelande i kontrollantklassen. HelloWorldController I klassen ersätter du Index metoden med följande kod:

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

Föregående kod:

  • Anropar kontrollerens View metod.
  • Använder en vymall för att generera ett HTML-svar.

Kontrollermetoder

  • Kallas åtgärdsmetoder. Till exempel Index åtgärdsmetoden i föregående kod.
  • Returnerar vanligtvis en IActionResult eller en klass som härletts från ActionResult, inte en typ som string.

Lägg till en vy

Högerklicka på mappen Vyer och lägg sedan till > ny mapp och ge mappen namnet HelloWorld.

Högerklicka på mappen Vyer/HelloWorld och lägg sedan till > nytt objekt.

I dialogrutan Lägg till nytt objekt – MvcMovie :

  • I sökrutan i det övre högra hörnet anger du view
  • Välj Razor Visa – tom
  • Behåll värdet för rutan Namn , Index.cshtml.
  • Välj Lägg till

Dialogrutan Lägg till nytt objekt

Ersätt innehållet i Views/HelloWorld/Index.cshtmlRazor vyfilen med följande:

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

<h2>Index</h2>

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

Gå till https://localhost:{PORT}/HelloWorld:

  • Metoden Index i HelloWorldController körde -instruktionen return View();, som angav att metoden ska använda en vymallfil för att återge ett svar till webbläsaren.

  • Ett filnamn för visningsmallen angavs inte, så MVC använde standardvyfilen som standard. När visningsfilens namn inte har angetts returneras standardvyn. Standardvyn har samma namn som åtgärdsmetoden Index i det här exemplet. Vymallen /Views/HelloWorld/Index.cshtml används.

  • Följande bild visar strängen "Hello from our View Template!" hårdkodad i vyn:

    Webbläsarfönster

Ändra vyer och layoutsidor

Välj menylänkarna MvcMovie, Homeoch Privacy. Varje sida visar samma menylayout. Menylayouten implementeras i Views/Shared/_Layout.cshtml filen.

Öppna Views/Shared/_Layout.cshtml-filen.

Med layoutmallar kan du:

  • Ange HTML-containerlayouten för en webbplats på ett ställe.
  • Använda HTML-containerlayouten på flera sidor på webbplatsen.

Hitta @RenderBody() raden. RenderBody är en platshållare där alla visningsspecifika sidor som du skapar visas , omslutna på layoutsidan. Om du till exempel väljer Privacy länken visas Views/Home/Privacy.cshtml vyn i RenderBody metoden.

Ersätt innehållet i Views/Shared/_Layout.cshtml filen med följande markering. Ändringarna är markerade:

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

Föregående markering gjorde följande ändringar:

  • Tre förekomster av MvcMovie till Movie App.
  • Ankarelementet <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> till <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

I den föregående markeringen utelämnades asp-area=""ankare Tag Helper-attribut och attributvärdet eftersom den här appen inte använder Områden.

Obs! Kontrollanten Movies har inte implementerats. I det här läget Movie App fungerar inte länken.

Spara ändringarna och välj länken Privacy . Observera hur rubriken på webbläsarfliken visar Privacy Princip – Filmapp i stället för Privacy Princip – MvcMovie

Privacy flik

Välj länken Home .

Observera att rubriken och ankarteksten visar Filmapp. Ändringarna gjordes en gång i layoutmallen och alla sidor på webbplatsen återspeglar den nya länktexten och den nya rubriken.

Views/_ViewStart.cshtml Granska filen:

@{
    Layout = "_Layout";
}

Filen Views/_ViewStart.cshtml inkluderar filen Views/Shared/_Layout.cshtml i varje vy. Egenskapen Layout kan användas för att ange en annan layoutvy eller ställa in den på så att null ingen layoutfil används.

Views/HelloWorld/Index.cshtml Öppna vyfilen.

Ändra rubrik och <h2> element så som markerat i följande:

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

<h2>My Movie List</h2>

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

Rubriken och <h2> elementet skiljer sig något åt så det är tydligt vilken del av koden som ändrar visningen.

ViewData["Title"] = "Movie List"; i koden ovan anger Title egenskapen för ViewData ordlistan till "Filmlista". Egenskapen Title används i <title> HTML-elementet på layoutsidan:

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

Spara ändringen och gå till https://localhost:{PORT}/HelloWorld.

Observera att följande har ändrats:

  • Webbläsarrubrik.
  • Huvudrubrik
  • Sekundära rubriker.

Om det inte finns några ändringar i webbläsaren kan det vara cachelagrat innehåll som visas. Tryck på Ctrl +F5 i webbläsaren för att tvinga svaret från servern att läsas in. Webbläsarrubriken skapas med ViewData["Title"] som vi anger i vymallen Index.cshtml, och ytterligare text "- Filmapp" läggs till i layoutfilen.

Innehållet i vymallen Index.cshtml sammanfogas med vymallen Views/Shared/_Layout.cshtml . Ett enda HTML-svar skickas till webbläsaren. Layoutmallar gör det enkelt att göra ändringar som gäller för alla sidor i en app. Mer information finns i Layout.

Filmlista vy

Den lilla biten av "data", meddelandet "Hello from our View Template!" är dock hårdkodad. MVC-programmet har ett "V" (vy), ett "C" (kontrollant), men inget "M" (modell) ännu.

Skicka data från kontrollanten till vyn

Kontrollantåtgärder anropas som svar på en inkommande URL-begäran. En kontrollantklass är där koden skrivs som hanterar inkommande webbläsarbegäranden. Kontrollanten hämtar data från en datakälla och bestämmer vilken typ av svar som ska skickas tillbaka till webbläsaren. Vymallar kan användas från en kontroller för att generera och formatera ett HTML-svar till webbläsaren.

Kontrollanter ansvarar för att tillhandahålla de data som krävs för att en vymall ska kunna återge ett svar.

Visa mallar bör inte:

  • Gör affärslogik
  • Interagera direkt med en databas.

En vymall bör endast fungera med de data som tillhandahålls av kontrollanten. Att upprätthålla den här "uppdelningen av problem" hjälper till att behålla koden:

  • Ren.
  • Testbara.
  • Underhållbar.

Welcome För närvarande tar metoden i HelloWorldController klassen en name och en ID parameter och matar sedan ut värdena direkt till webbläsaren.

I stället för att låta kontrollanten återge det här svaret som en sträng ändrar du kontrollanten så att den använder en vymall i stället. Vymallen genererar ett dynamiskt svar, vilket innebär att lämpliga data måste skickas från kontrollanten till vyn för att generera svaret. Gör detta genom att låta kontrollanten placera dynamiska data (parametrar) som visningsmallen behöver i en ViewData ordlista. Vymallen kan sedan komma åt dynamiska data.

I HelloWorldController.cs ändrar du Welcome-metoden för att lägga till ett Message och NumTimes värde i ViewData-ordlistan.

Ordlistan ViewData är ett dynamiskt objekt, vilket innebär att alla typer kan användas. Objektet ViewData har inga definierade egenskaper förrän något har lagts till. MVC-modellbindningssystemet mappar automatiskt de namngivna parametrarna name och numTimes från frågesträngen till parametrar i metoden. Den fullständiga 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();
        }
    }
}

Ordlisteobjektet ViewData innehåller data som skickas till vyn.

Skapa en välkomstvymall med namnet Views/HelloWorld/Welcome.cshtml.

Du skapar en loop i vymallen Welcome.cshtml som visar "Hello" NumTimes. Ersätt innehållet i Views/HelloWorld/Welcome.cshtml med följande:

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

<h2>Welcome</h2>

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

Spara ändringarna och bläddra till följande URL:

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

Data hämtas från URL:en och skickas till kontrollanten med MVC-modellbindningen. Kontrollern paketerar data i en ViewData ordlista och skickar objektet till vyn. Vyn renderar sedan data som HTML till webbläsaren.

Privacy vy som visar en välkomstetikett och frasen Hello Rick som visas fyra gånger

I föregående exempel användes ordlistan ViewData för att skicka data från kontroller till en vy. Senare i självstudien används en viewmodel för att överföra data från en controller till en vy. Vymodellmetoden för att skicka data föredras framför ViewData ordlistemetoden.

I nästa tutorial skapas en film-databas.

Föregående: Lägg till en kontrollantnästa: Lägg till en modell