Přidání zobrazení do aplikace MVC

Rick Anderson

Poznámka

Aktualizovaná verze tohoto kurzu je k dispozici zde pomocí nejnovější verze sady Visual Studio. Nový kurz používá ASP.NET Core MVC, který poskytuje mnoho vylepšení oproti tomuto kurzu.

Tento kurz učí ASP.NET Core MVC s kontrolery a zobrazeními. Razor Pages je novou alternativou v ASP.NET Core, programovacím modelu založeném na stránkách, který usnadňuje a produktivnější vytváření webového uživatelského rozhraní. Doporučujeme vyzkoušet kurz Razor Pages před verzí MVC. Kurz Razor Pages:

• Je snazší ho sledovat.
• Zahrnuje další funkce.
• Je upřednostňovaný přístup pro vývoj nových aplikací.

V této části upravíte HelloWorldController třídu tak, aby používala soubory šablony zobrazení k čistému zapouzdření procesu generování odpovědí HTML klientovi.

Soubor šablony zobrazení vytvoříte pomocí modulu zobrazení Razor. Šablony zobrazení založené na razoru mají příponu souboru .cshtml a poskytují elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#. Razor minimalizuje počet znaků a stisknutí kláves potřebných při psaní šablony zobrazení a umožňuje rychlý a plynulý pracovní postup kódování.

Index V současné době metoda vrací řetězec se zprávou, která je pevně zakódována ve třídě kontroleru. Změňte metodu Index tak, aby volala metodu kontrolerů View , jak je znázorněno v následujícím kódu:

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

Výše Index uvedená metoda používá šablonu zobrazení k vygenerování odpovědi HTML do prohlížeče. Metody kontroleru (označované také jako metody akcí), jako Index je například výše uvedená metoda, obecně vracejí ActionResult (nebo třídu odvozenou z ActionResult), nikoli primitivní typy, jako je string.

Klikněte pravým tlačítkem na složku Views\HelloWorld , klikněte na Přidat a potom klikněte na MVC 5 View Page with Layout (Razor).

V dialogovém okně Zadat název položky zadejte Index a klikněte na OK.

V dialogovém okně Vybrat stránku rozložení přijměte výchozí _Layout.cshtml a klikněte na OK.

V dialogovém okně výše je v levém podokně vybraná složka Views\Shared . Pokud jste měli soubor vlastního rozložení v jiné složce, mohli byste ho vybrat. O souboru rozložení si povíme později v tomto kurzu.

Vytvoří se soubor MvcMovie\Views\HelloWorld\Index.cshtml .

Přidejte následující zvýrazněnou značku.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Klikněte pravým tlačítkem na soubor Index.cshtml a vyberte Zobrazit v prohlížeči.

Můžete také kliknout pravým tlačítkem myši na soubor Index.cshtml a vybrat Zobrazit v Inspektoru stránky. Další informace najdete v kurzu Kontrola stránky .

Případně spusťte aplikaci a přejděte na HelloWorld kontroler (http://localhost:xxxx/HelloWorld). Metoda Index v kontroleru neudělala moc práce. Jednoduše spustila příkaz return View(), který určil, že metoda by měla použít soubor šablony zobrazení k vykreslení odpovědi v prohlížeči. Protože jste explicitně nezadali název souboru šablony zobrazení, který chcete použít, ASP.NET MVC ve výchozím nastavení použil soubor zobrazení Index.cshtml ve složce \Views\HelloWorld . Následující obrázek znázorňuje řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení.

Vypadá to docela dobře. Všimněte si ale, že v záhlaví prohlížeče se zobrazuje "Index – Moje ASP.NET aplikace" a velký odkaz v horní části stránky je "Název aplikace". V závislosti na tom, jak malé okno prohlížeče nastavíte, možná budete muset kliknout na tři pruhy v pravém horním rohu, abyste viděli odkazy Domů, Informace, Kontakt, Zaregistrovat a Přihlásit se.

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

Nejprve chcete změnit odkaz "Název aplikace" v horní části stránky. Tento text je společný pro každou stránku. Ve skutečnosti se implementuje jenom na jednom místě v projektu, i když se zobrazuje na každé stránce v aplikaci. V Průzkumník řešení přejděte do složky /Views/Shared a otevřete soubor _Layout.cshtml. Tento soubor se nazývá stránka rozložení a je ve sdílené složce, kterou používají všechny ostatní stránky.

Šablony rozložení umožňují určit rozložení kontejneru HTML vašeho webu na jednom místě a pak ho použít na více stránkách webu. Najděte čáru @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 odkaz O aplikaci, zobrazí se zobrazení Views\Home\About.cshtml uvnitř RenderBody metody.

Změňte obsah elementu title. Změňte ActionLink v šabloně rozložení z "Název aplikace" na "Video MVC" a kontroler z Home na Movies. Kompletní soubor rozložení je zobrazený níže:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Spusťte aplikaci a všimněte si, že se teď zobrazuje video MVC. Klikněte na odkaz O aplikaci a uvidíte, jak se na této stránce zobrazuje i video MVC. V šabloně rozložení jsme mohli provést změnu jednou a na všech stránkách webu se nový název projevil.

Když jsme poprvé vytvořili soubor Views\HelloWorld\Index.cshtml , obsahoval následující kód:

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

Výše uvedený kód Razor explicitně nastavuje stránku rozložení. Prozkoumejte soubor Views\_ViewStart.cshtml , který obsahuje přesně stejný kód Razor. Soubor Views\_ViewStart.cshtml definuje společné rozložení, které budou používat všechna zobrazení, a proto můžete tento kód okomentovat nebo odebrat ze souboru Views\HelloWorld\Index.cshtml .

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Pomocí vlastnosti můžete Layout nastavit jiné zobrazení rozložení nebo ho nastavit tak null , aby se nepoužíval žádný soubor rozložení.

Teď změníme název zobrazení Index.

Otevřete soubor MvcMovie\Views\HelloWorld\Index.cshtml. Změnu je potřeba provést na dvou místech: nejprve text, který se zobrazí v názvu prohlížeče, a pak v sekundární hlavičce (elementu <h2> ). Nastavíte je trochu jinak, abyste viděli, která část kódu se v které části aplikace změní.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

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

Pro označení názvu HTML, který se má zobrazit, výše uvedený kód nastaví Title vlastnost objektu ViewBag (která je v šabloně zobrazení Index.cshtml ). Všimněte si, že šablona rozložení ( Views\Shared\_Layout.cshtml ) používá tuto hodnotu v elementu <title> jako součást <head> oddílu HTML, který jsme upravili dříve.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Pomocí tohoto ViewBag přístupu můžete snadno předat další parametry mezi šablonou zobrazení a souborem rozložení.

Spusťte aplikaci. Všimněte si, že se změnil název prohlížeče, primární nadpis a sekundární nadpisy. (Pokud v prohlížeči nevidíte změny, je možné, že si prohlížíte 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 se vytvoří pomocí ViewBag.Title šablony zobrazení Index.cshtml, kterou jsme nastavili v šabloně zobrazení Index.cshtml , a další "- Movie App" přidanou do souboru rozložení.

Všimněte si také, jak byl obsah v šabloně zobrazení Index.cshtml sloučen se šablonou zobrazení _Layout.cshtml a do prohlížeče byla odeslána jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které platí na všech stránkách aplikace.

Naše trocha "dat" (v tomto případě zpráva "Hello from our View Template!") je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení) a máte "C" (kontroler), ale zatím žádné "M" (model). Za chvíli si ukážeme, jak vytvořit databázi a načíst z ní data modelu.

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

Než ale přejdeme k databázi a promluvíme si o modelech, pojďme si nejdřív promluvit o předávání informací z kontroleru do zobrazení. Třídy kontroleru jsou vyvolány v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde píšete kód, který zpracovává příchozí požadavky prohlížeče, načítá data z databáze a nakonec rozhoduje, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení se pak dají použít z kontroleru k vygenerování a formátování odpovědi HTML do prohlížeče.

Správci zodpovídají za poskytnutí jakýchkoli dat nebo objektů, které jsou potřeba k tomu, aby šablona zobrazení vykreslovat odpověď do prohlížeče. Osvědčený postup: Šablona zobrazení by nikdy neměla provádět obchodní logiku ani přímo interagovat s databází. Místo toho by šablona zobrazení měla pracovat pouze s daty, která jí poskytl kontroler. Udržování této "oddělení zájmů" pomáhá udržovat váš kód čistý, testovatelný a lépe udržovatelný.

Welcome V současné době metoda action ve HelloWorldController třídě přebírá name parametr a a numTimes pak vypíše hodnoty přímo do prohlížeče. Místo toho, aby kontroler tuto odpověď vykreslovat jako řetězec, změňme kontroler tak, aby místo toho používal šablonu zobrazení. Šablona zobrazení vygeneruje dynamickou odpověď, což znamená, že abyste mohli vygenerovat odpověď, musíte předat příslušné bity dat z kontroleru do zobrazení. Můžete to udělat tak, že kontroler vloží dynamická data (parametry), která šablona zobrazení potřebuje, do objektu ViewBag , ke kterému má šablona zobrazení přístup.

Vraťte se do souboru HelloWorldController.cs a změňte metodu Welcome tak, aby do objektu přidala MessageViewBag hodnotu aNumTimes. ViewBag je dynamický objekt, což znamená, že do něj můžete vložit, co chcete; ViewBag objekt nemá žádné definované vlastnosti, dokud do něj něco nesložíte. Systém vazeb modelu ASP.NET MVC automaticky mapuje pojmenované parametry (name a numTimes) z řetězce dotazu v adresním řádku na parametry ve vaší metodě. Úplný soubor HelloWorldController.cs vypadá takto:

using System.Web;
using System.Web.Mvc;

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

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

ViewBag Objekt teď obsahuje data, která se automaticky předají do zobrazení. Dále potřebujete šablonu uvítacího zobrazení. V nabídce Sestavení vyberte Sestavit řešení (nebo Ctrl+Shift+B), abyste měli jistotu, že je projekt zkompilovaný. Klikněte pravým tlačítkem na složku Views\HelloWorld , klikněte na Přidat a potom klikněte na MVC 5 View Page with Layout (Razor).

V dialogovém okně Zadat název položky zadejte Vítejte a klikněte na OK.

V dialogovém okně Vybrat stránku rozložení přijměte výchozí _Layout.cshtml a klikněte na OK.

Vytvoří se soubor MvcMovie\Views\HelloWorld\Welcome.cshtml .

Nahraďte značky v souboru Welcome.cshtml . Vytvoříte smyčku s textem "Hello" tolikrát, kolikrát uživatel řekne, že by měl. Níže je uvedený úplný soubor Welcome.cshtml .

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Spusťte aplikaci a přejděte na následující adresu URL:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Teď se data převezmou z adresy URL a předají se kontroleru pomocí pořadače modelu. Kontroler zabalí data do objektu ViewBag a předá tento objekt do zobrazení. Zobrazení pak uživateli zobrazí data ve formátu HTML.

Ve výše uvedené ukázce jsme použili ViewBag objekt k předání dat z kontroleru do zobrazení. Později v tomto kurzu použijeme model zobrazení k předávání dat z kontroleru do zobrazení. Přístup modelu zobrazení k předávání dat je obecně upřednostňovaný před přístupem k pohledové brašně. Další informace najdete v příspěvku blogu Dynamická zobrazení silného typu V .

No, to bylo něco jako "M" pro model, ale ne typ databáze. Pojďme si vzít, co jsme se naučili, a vytvořit databázi filmů.

PředchozíDalší