Sdílet prostřednictvím

Část 3: Přidání zobrazení do aplikace ASP.NET Core MVC

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

Varování

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální vydání najdete v verzi .NET 9 tohoto článku.

Autor: Rick Anderson

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

Pokud je možnost Zobrazit všechny šablony dostupná, vyberte ji v dialogovém okně Přidat novou položku.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

V dialogovém okně Přidat novou položku vyberte Zobrazit všechny šablony.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
        }
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
        }
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

V této části upravíte HelloWorldController třídu tak, aby používala Razor zobrazení souborů. Toto efektivně shrnuje proces generování HTML odpovědí pro klienta.

Šablony zobrazení se vytvářejí pomocí Razor. Razor-založené šablony zobrazení

  • Mají souborovou příponu .cshtml.
  • Poskytuje elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#.

V současné době metoda Index vrací řetězec se zprávou ve třídě kontroleru. Nahraďte ve třídě HelloWorldController metodu Index následujícím kódem:

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

Předchozí kód:

  • Volá metodu View kontroleru.
  • Používá šablonu zobrazení k vygenerování odpovědi HTML.

Metody kontroleru:

  • Označují se jako metody akcí. Například Index metoda akce v předchozím kódu.
  • Obecně vraťte instanci IActionResult nebo třídu odvozenou z ActionResult, ne typ jako string.

Přidej zobrazení

Klikněte pravým tlačítkem myši na složku Zobrazení a potom přidejte > novou složku a pojmenujte složku HelloWorld.

Klikněte pravým tlačítkem myši na složku Views/HelloWorld a pak přidejte > novou položku.

V dialogovém okně Přidat novou položku – MvcMovie :

  • Do vyhledávacího pole v pravém horním rohu zadejte view
  • Vybrat Razor Zobrazení – Prázdné
  • Ponechte hodnotu pole Název. Index.cshtml
  • Vyberte Přidat.

Dialogové okno Přidat novou položku

Views/HelloWorld/Index.cshtml Razor Obsah souboru zobrazení nahraďte následujícím kódem:

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

<h2>Index</h2>

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

Přejděte na https://localhost:{PORT}/HelloWorld:

  • Metoda Index v HelloWorldController spustila příkaz return View();, což určuje, že metoda má použít soubor šablony zobrazení k vykreslení odpovědi do prohlížeče.

  • Nebyl zadán název souboru šablony zobrazení, takže MVC ve výchozím nastavení používal výchozí soubor zobrazení. Pokud není zadaný název souboru zobrazení, vrátí se výchozí zobrazení. Výchozí zobrazení má stejný název jako metoda akce v Index tomto příkladu. Šablona /Views/HelloWorld/Index.cshtml zobrazení je použita.

  • Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení:

    Okno prohlížeče

Změna zobrazení a rozložení stránek

Vyberte odkazy nabídky MvcMovie, Home a Privacy. Každá stránka zobrazuje stejné rozložení nabídky. Rozložení nabídky je implementováno v souboru Views/Shared/_Layout.cshtml.

Otevřete soubor Views/Shared/_Layout.cshtml.

Šablony rozložení umožňují:

  • Určení rozložení kontejneru HTML webu na jednom místě
  • Použití rozložení kontejneru HTML na více stránkách na webu

Najděte řádek @RenderBody(). RenderBody je zástupný symbol, kde se zobrazí všechny stránky specifické pro zobrazení, které vytvoříte, zabalené na stránce rozložení. Pokud například vyberete Privacy odkaz, zobrazí se Views/Home/Privacy.cshtml zobrazení uvnitř RenderBody metody.

Views/Shared/_Layout.cshtml Obsah souboru nahraďte následujícím kódem. Změny jsou zvýrazněné:

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

Předchozí označení provedlo následující změny:

  • Tři výskyty MvcMovie na Movie App.
  • Element ukotvení <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> na <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

V předchozím kódu byl vynechán atribut asp-area=""pomocné rutiny značky ukotvení a hodnota atributu, protože tato aplikace nepoužívá Areas.

Poznámka: Kontroler Movies nebyl implementován. V tomto okamžiku Movie App není odkaz funkční.

Uložte změny a vyberte Privacy odkaz. Všimněte si, že název na kartě prohlížeče zobrazuje Privacy Zásady – Filmová aplikace místo Privacy zásad – MvcMovie

Privacy tabulátor

Vyberte odkaz Home.

Všimněte si, že název a kotvící text zobrazují Movie App. Změny byly provedeny jednou v šabloně rozložení a všechny stránky na webu odrážejí nový text odkazu a nový název.

Views/_ViewStart.cshtml Prozkoumejte soubor:

@{
    Layout = "_Layout";
}

Soubor Views/_ViewStart.cshtml zahrnuje soubor Views/Shared/_Layout.cshtml do každého zobrazení. Vlastnost Layout lze použít k nastavení jiného zobrazení rozložení, nebo ji nastavit na null, aby se nepoužíval žádný soubor rozložení.

Views/HelloWorld/Index.cshtml Otevřete soubor zobrazení.

Změňte název a <h2> prvek podle zvýraznění níže:

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

<h2>My Movie List</h2>

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

Název a <h2> prvek se mírně liší, takže je jasné, která část kódu změní zobrazení.

ViewData["Title"] = "Movie List"; v kódu výše nastaví Title vlastnost slovníku ViewData na "Seznam filmů". Vlastnost Title se používá v elementu <title> HTML na stránce rozložení:

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

Uložte změnu a přejděte na https://localhost:{PORT}/HelloWorld.

Všimněte si, že se změnily následující položky:

  • Název prohlížeče
  • Primární nadpis.
  • Sekundární nadpisy.

Pokud v prohlížeči nejsou žádné změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru. Název prohlížeče je vytvořen s nastavením ViewData["Title"] v šabloně zobrazení Index.cshtml a přidáním "- Movie App" do souboru rozložení.

Obsah v Index.cshtml šabloně zobrazení se sloučí se šablonou Views/Shared/_Layout.cshtml zobrazení. Do prohlížeče se odešle jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se vztahují na všechny stránky v aplikaci. Další informace najdete v tématu Rozložení.

Zobrazení Seznamu filmů

Malý bit "data", zpráva "Hello z naší šablony zobrazení!", je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení), "C" (kontroler), ale zatím žádný "M" (model).

Předávání dat ze kontroleru do zobrazení

Akce kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde je kód napsaný, který zpracovává příchozí požadavky prohlížeče. Kontroler načte data ze zdroje dat a rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení lze použít z kontroleru k vygenerování a formátování odpovědi HTML v prohlížeči.

Kontrolery zodpovídají za poskytování dat požadovaných k vykreslení odpovědi šablonou zobrazení.

Šablony zobrazení by neměly:

  • Pracovat s obchodní logikou
  • Přímé interakce s databází

Šablona zobrazení by měla fungovat jenom s daty, která mu správce poskytuje. Zachování tohoto "oddělení obav" pomáhá udržet kód:

  • Čistý.
  • Prověřitelný.
  • Udržitelný.

V současné době metoda Welcome ve HelloWorldController třídě přebírá name a ID parametr a pak vypíše hodnoty přímo do prohlížeče.

Místo toho, aby kontroler vykreslil tuto odpověď jako řetězec, změňte kontroler tak, aby používal šablonu zobrazení. Šablona zobrazení generuje dynamickou odpověď, což znamená, že příslušná data musí být předána ze kontroleru do zobrazení, aby se vygenerovala odpověď. Uděláte to tak, že kontroler umístí dynamická data (parametry), které šablona zobrazení potřebuje, do slovníku ViewData . Šablona zobrazení pak může přistupovat k dynamickým datům.

V HelloWorldController.cs změňte metodu Welcome přidáním hodnot Message a NumTimes do slovníku ViewData.

Slovník ViewData je dynamický objekt, což znamená, že lze použít libovolný typ. Objekt ViewData nemá žádné definované vlastnosti, dokud se něco nepřidá. Systém vazeb modelu MVC automaticky mapuje pojmenované parametry name a numTimes z řetězce dotazu na parametry v metodě. Kompletní 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();
        }
    }
}

Objekt ViewData slovníku obsahuje data, která budou předána do zobrazení.

Vytvořte šablonu úvodního zobrazení s názvem Views/HelloWorld/Welcome.cshtml.

V šabloně zobrazení Welcome.cshtml vytvoříte smyčku, která zobrazuje "Hello" NumTimes. Views/HelloWorld/Welcome.cshtml Obsah nahraďte následujícím kódem:

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

<h2>Welcome</h2>

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

Uložte změny a přejděte na následující adresu URL:

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

Data se přenesou z adresy URL a předají kontroleru pomocí pořadače modelů MVC. Kontroler zabalí data do slovníku ViewData a předá ho do zobrazení. Zobrazení pak vykreslí data jako HTML v prohlížeči.

Privacy zobrazení ukazuje uvítací popisek a frázi 'Ahoj Rick', která je zobrazena čtyřikrát

V předchozí ukázce byl ViewData slovník použit k předávání dat z kontroleru do zobrazení. Později v tomto kurzu se model zobrazení používá k předávání dat ze kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat se upřednostňuje před slovníkem ViewData .

V dalším kurzu se vytvoří databáze filmů.

Předchozí: Přidání kontrolerudalší: Přidání modelu

  • Last updated on