Sdílet prostřednictvím


Použití kontrolerů a zobrazení k implementaci uživatelského rozhraní seznamu a podrobností

od Microsoftu

Stáhnout PDF

Toto je krok 4 bezplatného kurzu aplikace NerdDinner , který vás provede sestavením malé, ale kompletní webové aplikace pomocí ASP.NET MVC 1.

Krok 4 ukazuje, jak do aplikace přidat Kontroler, který využívá náš model a poskytuje uživatelům navigační prostředí pro výpis dat a podrobnosti pro večeře na našem webu NerdDinner.

Pokud používáte ASP.NET MVC 3, doporučujeme postupovat podle kurzů Začínáme S MVC 3 nebo MVC Music Store.

NerdDinner Krok 4: Kontrolery a zobrazení

U tradičních webových architektur (klasické ASP, PHP, ASP.NET Web Forms atd.) se příchozí adresy URL obvykle mapují na soubory na disku. Příklad: Žádost o adresu URL, jako je /Products.aspx nebo /Products.php, může být zpracována souborem "Products.aspx" nebo "Products.php".

Webové architektury MVC mapují adresy URL na serverový kód trochu jiným způsobem. Místo mapování příchozích adres URL na soubory mapují adresy URL na metody ve třídách. Tyto třídy se nazývají "Kontrolery" a jsou zodpovědné za zpracování příchozích požadavků HTTP, zpracování vstupu uživatele, načítání a ukládání dat a určení odpovědi pro odeslání zpět klientovi (zobrazení HTML, stažení souboru, přesměrování na jinou adresu URL atd.).

Teď, když jsme vytvořili základní model pro naši aplikaci NerdDinner, bude naším dalším krokem přidání kontroleru do aplikace, který ho využije k tomu, aby uživatelům poskytl navigační prostředí výpisu dat a podrobností pro večeře na našem webu.

Přidání kontroleru DinnersController

Začneme tak, že v našem webovém projektu klikneme pravým tlačítkem na složku Kontrolery a pak vybereme příkaz nabídky Add-Controller> (tento příkaz můžete spustit také zadáním Ctrl-M, Ctrl-C):

Snímek obrazovky s oknem Průzkumník řešení se složkou Kontrolery a modře zvýrazněnými položkami nabídky Přidat a Kontroler

Tím se zobrazí dialogové okno Přidat kontroler:

Snímek obrazovky s dialogovým oknem Přidat kontroler zobrazující pole Název kontroleru vyplněné textem Dinners Controller

Nový kontroler pojmenujeme "DinnersController" a klikneme na tlačítko Přidat. Visual Studio pak přidá soubor DinnersController.cs do adresáře \Controllers:

Snímek obrazovky s Průzkumník řešení oknem zobrazujícím modrý zvýrazněný soubor Ovladače večeře

Otevře se také nová třída DinnersController v editoru kódu.

Přidání metod akcí Index() a Details() do třídy DinnersController

Chceme návštěvníkům, kteří používají naši aplikaci, umožnit procházení seznamu nadcházejících večeří a umožnit jim, aby klikli na libovolnou večeři v seznamu a zobrazili si o ní konkrétní podrobnosti. Provedeme to publikováním následujících adres URL z naší aplikace:

Adresa URL Účel
/Večeře/ Zobrazení seznamu nadcházejících večeří ve formátu HTML
/Večeře/Podrobnosti/[id] Zobrazení podrobností o konkrétní večeři označené parametrem "id" vloženým v adrese URL , který se bude shodovat s ID večeře v databázi. Příklad: /Dinners/Details/2 by se zobrazila stránka HTML s podrobnostmi o večeři, jejíž Hodnota DinnerID je 2.

Počáteční implementace těchto adres URL publikujeme přidáním dvou veřejných metod akcí do třídy DinnersController, jak je znázorněno níže:

public class DinnersController : Controller {

    //
    // HTTP-GET: /Dinners/

    public void Index() {
        Response.Write("<h1>Coming Soon: Dinners</h1>");
    }

    //
    // HTTP-GET: /Dinners/Details/2

    public void Details(int id) {
        Response.Write("<h1>Details DinnerID: " + id + "</h1>");
    }
}

Pak spustíme aplikaci NerdDinner a pomocí prohlížeče ji vyvoláme. Když zadáte adresu URL "/Dinners/" , naše metoda Index() se spustí a odešle zpět následující odpověď:

Snímek obrazovky s oknem odpovědi vygenerovaným spuštěním aplikace NerdDinner s textem Coming Soon: Dinners

Zadání adresy URL "/Dinners/Details/2" způsobí spuštění metody Details() a odeslání následující odpovědi:

Snímek obrazovky s oknem odpovědi vygenerovaným spuštěním aplikace NerdDinner s textem Details Dinner I D: 2

Možná vás zajímá, jak ASP.NET MVC věděl, že vytvoří třídu DinnersController a vyvolá tyto metody? Abychom to pochopili, pojďme se rychle podívat na to, jak funguje směrování.

Principy směrování ASP.NET MVC

ASP.NET MVC obsahuje výkonný modul směrování adres URL, který poskytuje velkou flexibilitu při řízení způsobu mapování adres URL na třídy kontroleru. Umožňuje nám to zcela přizpůsobit, jak ASP.NET MVC zvolí třídu kontroleru, která se má vytvořit, kterou metodu na ní vyvolat, a také nakonfigurovat různé způsoby, jak lze proměnné automaticky parsovat z adresy URL nebo řetězce dotazu a předat metodě jako argumenty parametrů. Poskytuje flexibilitu pro úplnou optimalizaci webu pro SEO (optimalizace pro vyhledávače) a také publikování jakékoli struktury url, kterou chceme z aplikace.

Nové projekty ASP.NET MVC mají ve výchozím nastavení předkonfigurovanou sadu pravidel směrování adres URL, která je už zaregistrovaná. To nám umožňuje snadno začít s aplikací, aniž byste museli něco explicitně konfigurovat. Výchozí registrace pravidel směrování najdete ve třídě Application našich projektů, kterou můžeme otevřít poklikáním na soubor Global.asax v kořenovém adresáři projektu:

Snímek obrazovky s oknem Průzkumník řešení zobrazující soubor Globální tečka a x zvýrazněný modře a červeně zakroužkovaný

Výchozí pravidla směrování ASP.NET MVC jsou registrována v rámci metody RegisterRoutes této třídy:

public void RegisterRoutes(RouteCollection routes) {

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default",                                       // Route name
        "{controller}/{action}/{id}",                    // URL w/ params
        new { controller="Home", action="Index",id="" }  // Param defaults
    );
}

"trasy. Volání metody MapRoute()" výše zaregistruje výchozí pravidlo směrování, které mapuje příchozí adresy URL na třídy kontroleru pomocí formátu adresy URL: /{controller}/{action}/{id}, kde "controller" je název třídy kontroleru pro vytvoření instance, "action" je název veřejné metody, která se na ní má vyvolat, a "id" je volitelný parametr vložený do adresy URL, který lze předat jako argument metodě. Třetí parametr předaný volání metody MapRoute() je sada výchozích hodnot, které se mají použít pro hodnoty controller/action/id v případě, že se nenachází v adrese URL (Controller = "Home", Action="Index", Id="").

Níže je tabulka, která ukazuje, jak se různé adresy URL mapují pomocí výchozího pravidla trasy /{controllers}/{action}/{id}:

Adresa URL Controller – třída Action – metoda Předané parametry
/Večeře/Podrobnosti/2 Ovládací prvek večeře Podrobnosti(ID) id=2
/Večeře/Edit/5 Ovládací prvek večeře Edit(ID) id=5
/Večeře/Vytvořit Ovládací prvek večeře Create()
/Večeře Ovládací prvek večeře Index()
/Domů HomeController Index()
/ HomeController Index()

Poslední tři řádky zobrazují použité výchozí hodnoty (Controller = Home, Action = Index, Id = "). Vzhledem k tomu, že metoda Index je registrována jako výchozí název akce, pokud není zadaný, adresy URL "/Dinners" a "/Home" způsobí vyvolání metody akce Index() ve třídách Kontroleru. Vzhledem k tomu, že kontroler "Home" je registrován jako výchozí kontroler, pokud není zadaný, adresa URL "/" způsobí vytvoření HomeController a vyvolání metody akce Index().

Pokud se vám tato výchozí pravidla směrování adres URL nelíbí, dobrou zprávou je, že se dají snadno změnit – stačí je upravit v rámci výše uvedené metody RegisterRoutes. U naší aplikace NerdDinner ale nebudeme měnit žádná výchozí pravidla směrování adres URL – místo toho je použijeme tak, jak jsou.

Použití aplikace DinnerRepository z našeho kontroleleru DinnersController

Pojďme teď nahradit naši aktuální implementaci metod akcí Index() a Details() pro DinnersController implementacemi, které používají náš model.

K implementaci tohoto chování použijeme třídu DinnerRepository, které jsme vytvořili dříve. Začneme přidáním příkazu using, který odkazuje na obor názvů NerdDinner.Models, a pak deklarujeme instanci naší DinnerRepository jako pole v naší třídě DinnerController.

Později v této kapitole představíme koncept "injektáže závislostí" a ukážeme další způsob, jak kontrolery získat odkaz na DinnerRepository, který umožňuje lepší testování jednotek – ale právě teď vytvoříme instanci naší Třídy DinnerRepository jako níže.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using NerdDinner.Models;

namespace NerdDinner.Controllers {

    public class DinnersController : Controller {

        DinnerRepository dinnerRepository = new DinnerRepository();

        //
        // GET: /Dinners/

        public void Index() {
            var dinners = dinnerRepository.FindUpcomingDinners().ToList();
        }

        //
        // GET: /Dinners/Details/2

        public void Details(int id) {
            Dinner dinner = dinnerRepository.GetDinner(id);
        }
    }
}

Teď jsme připraveni vygenerovat odpověď HTML zpět pomocí načtených objektů datového modelu.

Použití zobrazení s naším kontrolerem

I když je možné v rámci našich metod akcí napsat kód pro sestavení HTML a pak použít pomocnou metodu Response.Write() k jeho odeslání zpět klientovi, tento přístup se stává poměrně těžkopádným rychle. Mnohem lepším přístupem je, abychom prováděli logiku aplikace a dat pouze uvnitř našich metod akcí DinnersController a pak předávali data potřebná k vykreslení odpovědi HTML do samostatné šablony zobrazení, která je zodpovědná za výstup reprezentace HTML. Jak za chvíli uvidíme, šablona zobrazení je textový soubor, který obvykle obsahuje kombinaci značek HTML a vloženého vykreslovacího kódu.

Oddělení logiky kontroleru od vykreslování zobrazení přináší několik velkých výhod. Pomáhá zejména vynucovat jasné "oddělení oblastí zájmu" mezi kódem aplikace a formátováním nebo vykreslováním kódu uživatelského rozhraní. Díky tomu je mnohem jednodušší testovat logiku aplikace izolovaně od logiky vykreslování uživatelského rozhraní. Usnadňuje pozdější úpravu šablon vykreslování uživatelského rozhraní, aniž by bylo nutné provádět změny kódu aplikace. A může vývojářům a návrhářům usnadnit spolupráci na projektech.

Třídu DinnersController můžeme aktualizovat tak, aby naznačovala, že chceme použít šablonu zobrazení k odeslání odpovědi uživatelského rozhraní HTML změnou signatur metod našich dvou metod akcí z návratového typu "void" na návratový typ "ActionResult". Pak můžeme volat pomocnou metodu View() v základní třídě Controller, abychom vrátili objekt ViewResult, jak je znázorněno níže:

public class DinnersController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // GET: /Dinners/

    public ActionResult Index() {

        var dinners = dinnerRepository.FindUpcomingDinners().ToList();

        return View("Index", dinners);
    }

    //
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View("Details", dinner);
    }
}

Podpis pomocné metody View() , který používáme výše, vypadá takto:

Snímek obrazovky pomocné metody View s textem View Result View (název zobrazení řetězce, objektový model)

Prvním parametrem pomocné metody View() je název souboru šablony zobrazení, který chceme použít k vykreslení odpovědi HTML. Druhý parametr je objekt modelu, který obsahuje data, která šablona zobrazení potřebuje k vykreslení odpovědi HTML.

V rámci metody akce Index() voláme metodu pomocné rutiny View() a označujeme, že chceme vykreslit seznam večír ve formátu HTML pomocí šablony zobrazení Index. Šabloně zobrazení předáváme posloupnost objektů Dinner, ze které se vygeneruje seznam:

//
    // GET: /Dinners/

    public ActionResult Index() {
    
        var dinners = dinnerRepository.FindUpcomingDinners().ToList();
        
        return View("Index", dinners);
    }

V rámci naší metody akce Details() se pokusíme načíst objekt Dinner pomocí ID zadaného v adrese URL. Pokud se najde platná funkce Dinner, zavoláme metodu pomocné rutiny View(), která označuje, že chceme k vykreslení načteného objektu Dinner použít šablonu zobrazení Podrobnosti. Pokud je požadována neplatná večeře, vykreslíme užitečnou chybovou zprávu, která indikuje, že večeře neexistuje, pomocí šablony zobrazení Nenalezeno (a přetížené verze pomocné metody View(), která pouze přebírá název šablony):

//
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.FindDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View("Details", dinner);
    }

Pojďme teď implementovat šablony zobrazení Nenalezeno, Podrobnosti a Index.

Implementace šablony zobrazení Nenalezeno

Začneme implementací šablony zobrazení Nenalezeno, která zobrazí popisnou chybovou zprávu s oznámením, že požadovaná večeře nebyla nalezena.

Novou šablonu zobrazení vytvoříme tak, že umístíme textový kurzor do metody akce kontroleru a potom klikneme pravým tlačítkem a zvolíme příkaz nabídky Přidat zobrazení (tento příkaz můžeme také spustit zadáním Ctrl-M, Ctrl-V):

Snímek obrazovky projektu s poklikanou položkou nabídky Přidat zobrazení zvýrazněnou modře a červeně zakroužkovanou položkou nabídky

Zobrazí se dialogové okno Přidat zobrazení, jak je znázorněno níže. Ve výchozím nastavení dialogové okno předem vyplní název zobrazení, které se má vytvořit, aby odpovídalo názvu metody akce, ve které byl kurzor při spuštění dialogového okna (v tomto případě "Podrobnosti"). Protože chceme nejprve implementovat šablonu Nenalezeno, přepíšeme název tohoto zobrazení a nastavíme ho na Nenalezeno:

Snímek obrazovky s oknem Přidat zobrazení s polem Název zobrazení nastaveným na Nenalezeno, zaškrtnutým polím Vybrat stránku předlohy a id držitele místa obsahu na hlavní obsah

Když klikneme na tlačítko Přidat, Visual Studio pro nás v adresáři \Views\Dinners vytvoří novou šablonu zobrazení NotFound.aspx (kterou také vytvoří, pokud adresář ještě neexistuje):

Snímek obrazovky s hierarchií složek okna Průzkumník řešení se modrým zvýrazněným souborem Nenalezena tečka a s p x

Otevře se také naše nová šablona zobrazení NotFound.aspx v editoru kódu:

Snímek obrazovky okna editoru kódu s nenalezeným souborem s p x otevřeným v editoru kódu

Šablony zobrazení mají ve výchozím nastavení dvě oblasti obsahu, do kterých můžeme přidat obsah a kód. První nám umožňuje přizpůsobit "název" stránky HTML odeslané zpět. Druhý nám umožňuje přizpůsobit "hlavní obsah" stránky HTML odeslané zpět.

K implementaci naší šablony zobrazení Nenalezeno přidáme základní obsah:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Dinner Not Found
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Dinner Not Found</h2>

    <p>Sorry - but the dinner you requested doesn't exist or was deleted.</p>

</asp:Content>

Pak si to můžeme vyzkoušet v prohlížeči. Za tímto účelem si vyžádáme adresu URL /Dinners/Details/9999 . Bude to označovat večeři, která v databázi aktuálně neexistuje, a způsobí, že metoda akce DinnersController.Details() vykreslí šablonu zobrazení Nenalezeno:

Snímek obrazovky okna Moje aplikace MVC s červeně zakroužkovaným oknem / Večeře / Podrobnosti / 9999 U R L v poli adresy

Na výše uvedeném snímku obrazovky si všimnete, že naše základní šablona zobrazení zdědila spoustu html, které obklopuje hlavní obsah na obrazovce. Je to proto, že naše šablona zobrazení používá šablonu stránky předlohy, která nám umožňuje používat konzistentní rozložení ve všech zobrazeních na webu. O tom, jak stránky předlohy fungují, se podrobněji podíváme v pozdější části tohoto kurzu.

Implementace šablony zobrazení Podrobnosti

Pojďme teď implementovat šablonu zobrazení Podrobnosti, která vygeneruje KÓD HTML pro jeden model Večeře.

Provedeme to tak, že umístíme textový kurzor do metody akce Podrobnosti a pak klikneme pravým tlačítkem a zvolíme příkaz nabídky Přidat zobrazení (nebo stiskněte Ctrl-M, Ctrl-V):

Snímek obrazovky s oknem editoru kódu zobrazující červeně zvýrazněnou položku nabídky Add View dot dot

Tím se zobrazí dialogové okno Přidat zobrazení. Ponecháme výchozí název zobrazení ("Podrobnosti"). V dialogovém okně také zaškrtneme políčko Vytvořit zobrazení silného typu a vybereme (pomocí rozevíracího seznamu se seznamem) název typu modelu, který předáváme z kontroleru do Zobrazení. Pro toto zobrazení předáváme objekt Dinner (plně kvalifikovaný název pro tento typ je: "NerdDinner.Models.Dinner"):

Snímek obrazovky s oknem Přidat zobrazení s rozevíracím seznamem Zobrazit obsah nastaveným na Podrobnosti a datovou třídou Zobrazení nastavenou na Nerd Dinner dot Models dot Dinner

Na rozdíl od předchozí šablony, kde jsme se rozhodli vytvořit "prázdné zobrazení", tentokrát zvolíme automatické "generování" zobrazení pomocí šablony "Podrobnosti". Můžeme to označit změnou rozevíracího seznamu Zobrazit obsah v dialogovém okně výše.

"Generování uživatelského rozhraní" vygeneruje počáteční implementaci naší šablony zobrazení podrobností na základě objektu Dinner, který do ní předáváme. To nám poskytuje snadný způsob, jak rychle začít s implementací šablony zobrazení.

Když klikneme na tlačítko Přidat, Visual Studio pro nás v adresáři \Views\Dinners vytvoří nový soubor šablony zobrazení Details.aspx:

Snímek obrazovky s oknem Průzkumník řešení zobrazující hierarchii složek se složkou Večeře zvýrazněnou modře

Otevře se také naše nová šablona zobrazení Details.aspx v editoru kódu. Bude obsahovat počáteční implementaci uživatelského rozhraní pro zobrazení podrobností na základě modelu Večeře. Modul generování používá reflexi .NET k zobrazení veřejných vlastností vystavených ve třídě, která mu byla předána, a přidá příslušný obsah na základě každého nalezeného typu:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Details
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Details</h2>

    <fieldset>
        <legend>Fields</legend>
        <p>
            DinnerID:
            <%=Html.Encode(Model.DinnerID) %>
        </p>
        <p>
            Title:
            <%=Html.Encode(Model.Title) %>
        </p>
        <p>
            EventDate:
            <%= Html.Encode(String.Format("{0:g}", Model.EventDate)) %>
        </p>
        <p>
            Description:
            <%=Html.Encode(Model.Description) %>
        </p>
        <p>
            HostedBy:
            <%=Html.Encode(Model.HostedBy) %>
        </p>
        <p>
            ContactPhone:
            <%=Html.Encode(Model.ContactPhone) %>
        </p>
        <p>
            Address:
            <%=Html.Encode(Model.Address) %>
        </p>
        <p>
            Country:
            <%=Html.Encode(Model.Country) %>
        </p>
        <p>
            Latitude:
            <%= Html.Encode(String.Format("{0:F}",Model.Latitude)) %>
        </p>
        <p>
            Longitude:
            <%= Html.Encode(String.Format("{0:F}",Model.Longitude)) %>
        </p>
    </fieldset>
    
    <p>
        <%=Html.ActionLink("Edit","Edit", new { id=Model.DinnerID }) %>|
        <%=Html.ActionLink("Back to List", "Index") %>
    </p>
    
</asp:Content>

Můžeme požádat o adresu URL "/Dinners/Details/1" , abychom viděli, jak tato implementace vygenerovaného uživatelského rozhraní "podrobnosti" vypadá v prohlížeči. Pomocí této adresy URL se zobrazí jedna z večeří, které jsme do databáze ručně přidali, když jsme ji poprvé vytvořili:

Snímek obrazovky s oknem odpovědi aplikace zobrazující červeně zakroužkované pole adresy / Večeře / Podrobnosti / 1 U R L

To nás rychle zprovozní a poskytne nám počáteční implementaci našeho zobrazení Details.aspx. Pak ho můžeme upravit a přizpůsobit uživatelské rozhraní k naší spokojenosti.

Když se podrobněji podíváme na šablonu Details.aspx, zjistíme, že obsahuje statický kód HTML i vložený vykreslovací kód. <% code> nuggets spustí kód, když se šablona zobrazení vykreslí, a <%= %> kód nuggets spustí kód obsažený v nich a potom vykreslí výsledek do výstupního streamu šablony.

V rámci našeho zobrazení můžeme napsat kód, který přistupuje k objektu modelu "Dinner", který byl předán z kontroleru, pomocí vlastnosti Model silného typu. Visual Studio nám při přístupu k této vlastnosti Model v editoru poskytuje úplný kód intellisense:

Snímek obrazovky s oknem editoru kódu s rozevíracím seznamem s položkou Popis zvýrazněnou modře

Pojďme udělat pár úprav, aby zdroj naší finální šablony zobrazení podrobností vypadal takto:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Dinner: <%=Html.Encode(Model.Title) %>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%=Html.Encode(Model.Title) %></h2>
    <p>
        <strong>When:</strong> 
        <%=Model.EventDate.ToShortDateString() %> 

        <strong>@</strong>
        <%=Model.EventDate.ToShortTimeString() %>
    </p>
    <p>
        <strong>Where:</strong> 
        <%=Html.Encode(Model.Address) %>,
        <%=Html.Encode(Model.Country) %>
    </p>
     <p>
        <strong>Description:</strong> 
        <%=Html.Encode(Model.Description) %>
    </p>       
    <p>
        <strong>Organizer:</strong> 
        <%=Html.Encode(Model.HostedBy) %>
        (<%=Html.Encode(Model.ContactPhone) %>)
    </p>
    
    <%= Html.ActionLink("Edit Dinner", "Edit", new { id=Model.DinnerID })%> |
    <%= Html.ActionLink("Delete Dinner","Delete", new { id=Model.DinnerID})%>   
     
</asp:Content>

Když znovu získáme přístup k adrese URL "/Dinners/Details/1" , zobrazí se teď takto:

Snímek obrazovky s oknem odpovědi aplikace zobrazující novou stylizaci zobrazení dot NET Futures

Implementace šablony zobrazení Index

Teď implementujme šablonu zobrazení Index, která vygeneruje seznam nadcházejících večeří. K tomu umístíme textový kurzor do metody akce Index a potom klikneme pravým tlačítkem a zvolíme příkaz nabídky Přidat zobrazení (nebo stiskněte Ctrl-M, Ctrl-V).

V dialogovém okně Přidat zobrazení ponecháme šablonu zobrazení s názvem Index a zaškrtneme políčko Vytvořit zobrazení se silnými typy. Tentokrát se rozhodneme automaticky vygenerovat šablonu zobrazení Seznam a jako typ modelu předaný zobrazení vybereme NerdDinner.Models.Dinner (což, protože jsme uvedli, že vytváříme vygenerované uživatelské rozhraní "Seznam", způsobí to, že dialogové okno Přidat zobrazení předpokládá, že předáváme posloupnost objektů Dinner z kontroleru do zobrazení):

Snímek obrazovky s oknem Přidat zobrazení s názvem zobrazení nastaveným na Index, zaškrtnutým polím Vytvořit zobrazení silného typu a zaškrtnutým polím Vybrat stránku předlohy

Když klikneme na tlačítko Přidat, Visual Studio pro nás v adresáři \Views\Dinners vytvoří nový soubor šablony zobrazení Index.aspx. Vygeneruje v ní počáteční implementaci, která poskytuje tabulku HTML se seznamem večeře, které předáváme do zobrazení.

Když aplikaci spustíme a získáme přístup k adrese URL "/Dinners/" , vykreslí se náš seznam večeří takto:

Snímek obrazovky s oknem odpovědi aplikace zobrazující seznam večeří v rozložení mřížky po aktualizaci Přidat zobrazení

Výše uvedené tabulkové řešení nám poskytuje rozložení dat Večeře ve formátu mřížky, což není úplně to, co bychom chtěli pro seznam večeří pro zákazníky. Pomocí následujícího kódu můžeme aktualizovat šablonu zobrazení Index.aspx a upravit ji tak, aby zobrazovala méně sloupců dat, a použít <element ul> k jejich vykreslení místo tabulky:

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Upcoming Dinners</h2>

    <ul>
        <% foreach (var dinner in Model) { %>
        
            <li>                 
                <%=Html.Encode(dinner.Title) %>            
                on 
                <%=Html.Encode(dinner.EventDate.ToShortDateString())%>
                @
                <%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
            </li>
            
        <% } %>
    </ul>
    
</asp:Content>

V rámci výše uvedeného příkazu foreach používáme klíčové slovo "var", protože v modelu projdeme každou večeři. Ti, kdo jazyk C# 3.0 nezná, si můžou myslet, že použití "var" znamená, že objekt večeře je pozdně vázán. Místo toho to znamená, že kompilátor používá odvozování typu pro vlastnost Model se silnými typy (která je typu IEnumerable<Dinner>) a kompiluje místní proměnnou "dinner" jako typ Dinner – to znamená, že získáme úplnou technologii IntelliSense a kontrolu doby kompilace v blocích kódu:

Snímek obrazovky s oknem editoru kódu s rozevírací nabídkou se zvýrazněnou položkou seznam adres v šedém tečkovaném poli

Když na adrese URL /Dinners v našem prohlížeči narazíme na refresh, naše aktualizované zobrazení teď vypadá takto:

Snímek obrazovky s oknem odpovědi aplikace se seznamem nadcházejících večeří po příkazu pro aktualizaci

Vypadá to lépe, ale ještě to tak úplně není. Naším posledním krokem je umožnit koncovým uživatelům kliknout v seznamu na jednotlivé večeře a zobrazit si o nich podrobnosti. Implementujeme to vykreslením elementů hypertextových odkazů HTML, které odkazují na metodu akce Details na našem ovládacím prvku DinnersController.

Tyto hypertextové odkazy můžeme vygenerovat v zobrazení Index jedním ze dvou způsobů. První je ručně vytvořit HTML <> elementy jako níže, kde vložíme <%> bloků do elementu <> HTML:

Snímek obrazovky s oknem editoru kódu se zvýrazněným textem třídy a procenta bloku a červeně zakroužkovanými

Alternativním přístupem, který můžeme použít, je využít předdefinované pomocné metody Html.ActionLink() v rámci ASP.NET MVC, která podporuje programové vytvoření elementu> HTML<, který odkazuje na jinou metodu akce na kontroleru:

<%= Html.ActionLink(dinner.Title, "Details", new { id=dinner.DinnerID }) %>

Prvním parametrem pomocné metody Html.ActionLink() je odkazový text, který se má zobrazit (v tomto případě název večeře), druhým parametrem je název akce Kontroleru, na který chceme vygenerovat odkaz (v tomto případě metoda Details), a třetím parametrem je sada parametrů, které se mají odeslat do akce (implementované jako anonymní typ s názvem vlastnosti/hodnotami). V tomto případě zadáváme parametr "id" večeře, na který chceme vytvořit odkaz, a protože výchozí pravidlo směrování adresy URL v ASP.NET MVC je {Controller}/{Action}/{id}, pomocná metoda Html.ActionLink() vygeneruje následující výstup:

<a href="/Dinners/Details/1">.NET Futures</a>

Pro zobrazení Index.aspx použijeme metodu pomocné rutiny Html.ActionLink() a každou večeři v seznamu budeme mít na odkazu na příslušnou adresu URL podrobností:

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Upcoming Dinners
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Upcoming Dinners</h2>

    <ul>
        <% foreach (var dinner in Model) { %>
        
            <li>     
                <%=Html.ActionLink(dinner.Title, "Details", new { id=dinner.DinnerID }) %>
                on 
                <%=Html.Encode(dinner.EventDate.ToShortDateString())%>
                @
                <%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
            </li>
            
        <% } %>
    </ul>
</asp:Content>

A když teď narazíme na adresu URL /Dinners , náš seznam večeří vypadá takto:

Snímek obrazovky s oknem odpovědi aplikace zobrazující seznam nadcházejících večeří s novými odkazy odpovídajícími položkám seznamu

Když klikneme na některou z večeří v seznamu, přejdeme k zobrazení podrobností:

Snímek obrazovky s oknem odpovědi aplikace, které zobrazuje vybranou položku seznamu a podrobnosti, které jí odpovídají při zadání do databáze

Vytváření názvů na základě konvencí a adresářová struktura \Views

ASP.NET aplikace MVC ve výchozím nastavení používají při řešení šablon zobrazení strukturu názvů adresářů založenou na konvencích. To vývojářům umožňuje vyhnout se tomu, aby při odkazování na zobrazení v rámci třídy Controller museli plně kvalifikovat cestu k umístění. Ve výchozím nastavení ASP.NET MVC vyhledá soubor šablony zobrazení v adresáři *\Views[ControllerName]* pod aplikací.

Pracovali jsme například na třídě DinnersController, která explicitně odkazuje na tři šablony zobrazení: Index, Details a NotFound. ASP.NET MVC ve výchozím nastavení vyhledá tato zobrazení v adresáři \Views\Dinners pod kořenovým adresářem aplikace:

Snímek obrazovky okna Průzkumník řešení zobrazující hierarchii složek se zvýrazněnou složkou Večeře v modrém obdélníku

Všimněte si, že v projektu jsou aktuálně tři třídy kontroleru (DinnersController, HomeController a AccountController – poslední dvě byly přidány ve výchozím nastavení při vytváření projektu) a v adresáři \Views jsou tři podadresáře (jeden pro každý kontroler).

Zobrazení odkazovaná z řadičů domů a účtů automaticky přeloží šablony zobrazení z příslušných adresářů \Views\Home a \Views\Account . Podadresář \Views\Shared poskytuje způsob, jak uložit šablony zobrazení, které se opakovaně používají na více řadičích v rámci aplikace. Když se ASP.NET MVC pokusí přeložit šablonu zobrazení, zkontroluje se nejprve v konkrétním adresáři \Views[Controller], a pokud tam nenajde šablonu zobrazení, bude vypadat v adresáři \Views\Shared .

Pokud jde o pojmenování šablon jednotlivých zobrazení, doporučujeme, aby šablona zobrazení sdílela stejný název jako metoda akce, která způsobila, že se vykresluje. Například nad naší metodou akce Index se k vykreslení výsledku zobrazení používá zobrazení Index a metoda akce Podrobnosti k vykreslení výsledků používá zobrazení "Podrobnosti". Díky tomu snadno zjistíte, která šablona je přidružená k jednotlivým akcím.

Vývojáři nemusí explicitně zadávat název šablony zobrazení, pokud má šablona zobrazení stejný název jako metoda akce vyvolána na kontroleru. Místo toho můžeme objekt modelu předat pomocné metodě View() (bez zadání názvu zobrazení) a ASP.NET MVC automaticky odvodí, že k jeho vykreslení chceme použít šablonu zobrazení \Views[ControllerName][ActionName] na disku.

To nám umožňuje trochu vyčistit kód kontroleru a vyhnout se dvojímu duplikování názvu v našem kódu:

public class DinnersController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // GET: /Dinners/

    public ActionResult Index() {

        var dinners = dinnerRepository.FindUpcomingDinners().ToList();

        return View(dinners);
    }

    //
    // GET: /Dinners/Details/2

    public ActionResult Details(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (dinner == null)
            return View("NotFound");
        else
            return View(dinner);
    }
}

Výše uvedený kód je vše, co je potřeba k implementaci pěkné večeře výpis / podrobnosti prostředí pro web.

Další krok

Nyní máme pěkné večeře procházení prostředí.

Pojďme teď povolit podporu úprav datových formulářů CRUD (Vytvořit, Číst, Aktualizovat, Odstranit).