Přidání zobrazení (2012)

Rick Anderson

Poznámka

Aktualizovaná verze tohoto kurzu je k dispozici tady, která používá ASP.NET MVC 5 a Visual Studio 2013. Je bezpečnější, je mnohem jednodušší ho sledovat a ukazuje více funkcí.

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 , který byl zaveden v ASP.NET MVC 3. Š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 vracela View objekt, 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 akce), jako Index je například výše uvedená metoda, obvykle vrací ActionResult (nebo třídu odvozenou z ActionResult), nikoli primitivní typy, jako je řetězec.

V projektu přidejte šablonu zobrazení, kterou můžete použít s metodou Index . Uděláte to tak, že kliknete pravým tlačítkem myši do Index metody a kliknete na Přidat zobrazení.

Zobrazí se dialogové okno Přidat zobrazení . Ponechte výchozí hodnoty tak, jak jsou, a klikněte na tlačítko Přidat :

Vytvoří se složka MvcMovie\Views\HelloWorld a soubor MvcMovie\Views\HelloWorld\Index.cshtml . Můžete je zobrazit v Průzkumník řešení:

Následující příklad ukazuje vytvořený soubor Index.cshtml :

Pod značku přidejte následující kód HTML <h2> .

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

Kompletní soubor MvcMovie\Views\HelloWorld\Index.cshtml je zobrazený níže.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Pokud používáte Visual Studio 2012, klikněte v Průzkumníku řešení pravým tlačítkem na soubor Index.cshtml a vyberte Zobrazit v nástroji Kontrola stránky.

Další informace o tomto novém nástroji najdete v kurzu Kontrola stránky .

Případně spusťte aplikaci a přejděte do HelloWorld kontroleru (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 k vykreslení odpovědi do prohlížeče použít soubor šablony zobrazení. 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 . Na obrázku níže je řetězec "Hello from our View Template!" pevně zakódovaný v zobrazení.

Vypadá to docela dobře. Všimněte si ale, že se v záhlaví prohlížeče zobrazuje "Index My ASP.NET A" (Index My ASP.NET A) a velký odkaz v horní části stránky "your logo here" (Tady je vaše logo). Pod odkazem "tady vaše logo" jsou odkazy pro registraci a přihlášení a pod odkazy na stránku Domů, Informace a Kontakt. Pojďme některé z nich změnit.

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

Nejdřív chcete změnit nadpis "tady vaše logo" 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 aplikace. 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 to sdílené prostředí, které používají všechny ostatní stránky.

Šablony rozložení umožňují určit rozložení kontejneru HTML 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 všechny stránky pro konkrétní zobrazení, které vytvoříte, zobrazují "zabalené" na stránce rozložení. Pokud například vyberete odkaz O aplikaci, v metodě se vykreslí RenderBody zobrazení Views\Home\About.cshtml.

Změňte nadpis webu v šabloně rozložení z "vaše logo tady" na "Video MVC".

<div class="float-left">
    <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p>
</div>

Nahraďte obsah elementu title následujícím kódem:

<title>@ViewBag.Title - Movie App</title>

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 také video MVC. V šabloně rozložení jsme mohli provést změnu jednou a všechny stránky na webu mají nový název.

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: na prvním místě text, který se zobrazí v názvu prohlížeče, a pak v sekundárním záhlaví (elementu <h2> ). Mírně je odlišíte, abyste viděli, která část kódu se v které části aplikace mě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 ). Když se podíváte zpět na zdrojový kód šablony rozložení, všimnete si, že šablona používá tuto hodnotu v elementu <title> jako součást <head> oddílu HTML, který jsme upravili dříve. ViewBag Tímto způsobem můžete snadno předat další parametry mezi šablonou zobrazení a souborem rozložení.

Spusťte aplikaci a přejděte na http://localhost:xx/HelloWorldadresu . 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, možná si prohlížíte obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynuť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 do souboru rozložení se přidá další "- Movie App".

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 ve vaší aplikaci.

Naše trocha "dat" (v tomto případě zpráva "Hello from our View Template!" ( 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, povíme si nejdřív 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 naformátování odpovědi HTML do prohlížeče.

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

Welcome V současné době metoda akce 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 vykreslovat tuto odpověď 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 umístí dynamická data (parametry), která šablona zobrazení potřebuje, do objektu ViewBag , ke kterému pak šablona zobrazení získá přístup.

Vraťte se do souboru HelloWorldController.cs a změňte metodu WelcomeMessage tak, aby do objektu přidala ViewBag hodnotu a NumTimes . ViewBag je dynamický objekt, což znamená, že do něj můžete vložit, co chcete; objekt ViewBag nemá žádné definované vlastnosti, dokud do něj něco nevložíte. Systém vazby modelu ASP.NET MVC automaticky mapuje pojmenované parametry (name a numTimes) z řetězce dotazu na panelu Adresa na parametry ve vaší metodě. Kompletní 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 Build (Sestavení ) vyberte Build MvcMovie (Sestavit MvcMovie ) a ujistěte se, že je projekt zkompilovaný.

Pak klikněte pravým tlačítkem myši do Welcome metody a klikněte na Přidat zobrazení.

Dialogové okno Přidat zobrazení vypadá takto:

Klikněte na Přidat a pak přidejte následující kód pod <h2> element v novém souboru Welcome.cshtml . Vytvoříte smyčku s textem "Hello" tolikrát, kolikrát uživatel říká, že má. Kompletní soubor Welcome.cshtml je uvedený níže.

@{
    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í. V druhém 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ší