ASP.NET MVC v praxi od A do Z, 5. díl – View šablony
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

ASP.NET MVC v praxi od A do Z, 5. díl – View šablonyASP.NET MVC v praxi od A do Z, 5. díl – View šablony

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

ASP.NET MVC v praxi od A do Z, 5. díl – View šablony

Google       Google       23. 8. 2009       21 055×

Začneme přímo tam, kde minulý díl skončil - vytvoříme si view šablony.

Reklama
Reklama

Pokud tento díl čtete s delší přestávkou po dílu minulém, doporučuji si znovu přečíst posledních pár odstavců.

Šablona NotFound

Začneme vytvořením šablony pro view NotFound, která uživateli řekne, že požadovaná večeře nebyla nalezena.

Nejjednodušší způsob, jak vytvořit view, je kliknout někam do akční metody pravým tlačítkem a zvolit Add View (nebo použít klávesové zkratky Ctrl-M, Ctrl-V).

To zobrazí „Add View“ dialog. Ten je předvyplněn názvem odvozeným od názvu akční metody, přepíšeme ho na „NotFound“. Zbytek nastavení necháme tak, jak je.

Po kliknutí na tlačítko Add se vytvoří soubor NotFound.aspx v adresáři „/Views/Dinners“:

View šablony mají v základu dvě Content komponenty. První z nich je pojmenovaná Content1 a nastavuje se pomocí ní titulek stránky. Druhá se jmenuje Content2 a vkládá se do ní obsah stránky. První komponentu si přejmenujeme na Title a druhou na Main, ať v tom máme větší pořádek. Pokud vám tato věc připomíná masterpages z klasických WebForms, tak máte absolutní pravdu, také zde vkládáme do masterpage, která je umístěná v adresáři „/Views/Shared“. Po doplnění nějakého obsahu dostaneme v souboru NotFound.aspx třeba toto:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
	Večeře nenalezena
</asp:Content>

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

    <h2>Večeře nenalezena</h2>
    <p>Je nám líto, ale hledaná večeře neexistuje nebo byla smazána.</p>

</asp:Content>

Hned to můžeme zkusit v prohlížeči. Spustíme aplikaci (Ctrl+F5) a zkusíme zadat URL „/Dinners/Details/9999“. Žádná večeře s tímto ID neexistuje, proto se použije šablona NotFound.

Šablona Details

Teď je na řadě šablona Details, která bude zobrazovat informace o jedné konkrétní večeři. View přidáme stejně jako předtím, tentokrát necháme výchozí jméno Details a zaškrtneme možnost „Create a strongly-typed view“ a z ComboBoxu „View data class“ vybereme možnost „NerdDinner.Models.Dinner“, což je typ, který předáme z controlleru do view. Z ComboBoxu „View content“ vybereme položku „Details“, díky tomuto nám Visual Studio vygeneruje základní strukturu šablony na základě Dinner objektu, který předáváme.

Po kliknutí na „Add“ se do projektu přidá nový soubor Details.aspx, který bude obsahovat předpřipravený kód. Generování kódu využívá reflexe – podívá se po public vlastnostech typu, který předáváme, a podle nich vygeneruje jednotlivé položky v HTML.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.Dinner>" %>

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

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

    <h2>Details</h2>

    <fieldset>
        <legend>Fields</legend>
        <p>
            IsValid:
            <%= Html.Encode(Model.IsValid) %>
        </p>
        <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>

Spustíme-li aplikaci a zadáme URL „/Dinners/Details/3“, uvidíme toto:

Pojďme zdrojový kód šablony trochu upravit, ať je to hezky česky a ať nezobrazujeme tolik zbytečných informací:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.Dinner>" %>

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

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <h2>        <%=Html.Encode(Model.Title) %></h2>
    <p>
        <strong>Kdy:</strong>
        <%=Model.EventDate.ToShortDateString() %>
        <strong>@</strong>
        <%=Model.EventDate.ToShortTimeString() %>
    </p>
    <p>
        <strong>Kde:</strong>
        <%=Html.Encode(Model.Address) %>,
        <%=Html.Encode(Model.Country) %>
    </p>
    <p>
        <strong>Popis:</strong>
        <%=Html.Encode(Model.Description) %>
    </p>
    <p>
        <strong>Pořadatel:</strong>
        <%=Html.Encode(Model.HostedBy) %>
        (<%=Html.Encode(Model.ContactPhone) %>)
    </p>
    <%= Html.ActionLink("Upravit večeři", "Edit", new { id=Model.DinnerID })%>
    |
    <%= Html.ActionLink("Smazat večeři","Delete", new { id=Model.DinnerID})%>
</asp:Content>

Lepší, nemyslíte?

Šablona Index

Do třetice všeho dobrého, jdeme na šablonu Index, která bude zobrazovat seznam nadcházejících večeří. Jak přidat view šablonu už jistě dobře víte – stačí uvnitř metody Index kliknout pravým tlačítkem a zvolit „Add View“. Název šablony ponecháme „Index“, opět zvolíme „Create a strongly-typed view“ a stejně jako předtím nastavíme „View data class“ na „NerdDinner.Models.Dinner“. Změna ale nastane u položky „View content“, kde tentokrát nastavíme „List“ – díky tomu bude generátor očekávat, že šabloně budeme předávat kolekci objektů Dinner, ne jen jeden objekt.

Po kliknutí na tlačítko Add můžeme aplikaci spustit, ale s výsledkem nebudeme zatím moc spokojení:

Automaticky se vytvořila tabulková struktura, která opět ukazuje spoustu nepotřebných dat a celkově není tabulka v tomto případě moc uživatelsky přívětivá. Stačí ale kód trochu ořezat a bude to lepší.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<NerdDinner.Models.Dinner>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Chystané večeře
</asp:Content>

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

    <h2>Chystané večeře</h2>

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

Ještě chybí poslední dílek skládačky – bylo by vhodné, aby uživatel mohl na večeři kliknout, a tím se mu zobrazily podrobnosti. Použijeme obyčejný HTML hyperlink element, nic zázračného. Ale máme dva způsoby, jak toho dosáhnout.

První z nich je použít databinding a ID večeře do URL detailů dosazovat:

<% foreach (var dinner in Model)
   { %>
<li>
    <a href="/Dinners/Details/<%=dinner.DinnerID %>">
        <%=Html.Encode(dinner.Title) %>
    </a>
    dne
    <%=Html.Encode(dinner.EventDate.ToShortDateString())%>
    @
    <%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
</li>
<% } %>

Druhá možnost je použít metodu Html.ActionLink, která se používá pro vytvoření odkazu na jinou akční metodu. Použijeme tento druhý způsob, zdá se mi hezčí, ale jde jen o osobní preference.

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

První parametr této metody je text pro zobrazení (název večeře), druhý parametr je název akční metody, na kterou chceme odkázat, a třetí parametr je řada parametrů, které chceme akční metodě předat. Metoda vygeneruje takovýto kód:

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

Výsledek vypadá následovně:

Na libovolnou večeři můžeme kliknout a skutečně to funguje.

Doplněk – jmenné konvence ASP.NET MVC

Na závěr tohoto dílu si dovolím menší doplněk, který vysvětlí některé jevy. Určitě jste si všimli, že jsme nikde při použití controllerů nebo views nepsali celou cestu k danému souboru, vždy stačil jen název konkrétní komponenty.

Celé to funguje díky adresářové struktuře, kterou ASP.NET MVC dodržuje. Controllery se dávají do adresáře Controllers a jejich views se dávají do adresáře Views/{NazevControlleru}, takže framework automaticky ví, kam se podívat po věci, kterou zrovna potřebuje.

Když dojde na pojmenování view, je doporučeným postupem pojmenovat ho stejně jako akční metodu, která ho vrací – v našich příkladech akční metoda Index vrací view Index a tak podobně. To nám umožňuje ještě trochu vyčistit kód uvnitř controlleru:

// Místo kódu:
//return View("Index", dinners);
// stačí napsat:
return View(dinners);

Pokud to samé uděláme i v metodě Details, dostaneme tento kód:

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 ActionResult Index()
        {
            var dinners = dinnerRepository.FindUpcomingDinners().ToList();

            // Místo kódu:
            //return View("Index", dinners);
            // stačí napsat:
            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);
            }
        }
    }
}

Šablony máme úspěšně za sebou, děkuji za pozornost. V příštích dvou dílech budeme implementovat tzv. CRUD (Create, Read, Update, Delete).

Zdroj: http://nerddinnerbook.s3.amazonaws.com/Part4.htm

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý