ASP.NET MVC v praxi od A do Z, 9. díl – Partial Views a Master Pages
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

ASP.NET MVC v praxi od A do Z, 9. díl – Partial Views a Master PagesASP.NET MVC v praxi od A do Z, 9. díl – Partial Views a Master Pages

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

ASP.NET MVC v praxi od A do Z, 9. díl – Partial Views a Master Pages

Google       Google       8. 9. 2009       16 033×

Jedním z hesel MVC frameworku je: „neopakuj se“. Naše aplikace to ale ani zdaleka nedodržuje, měli bychom s tím něco udělat! Proto si dnes uvedeme tzv. „partial pages“ a ve druhé části článku i „master pages“, které dost možná znáte i z klasických WebForms.

Reklama
Reklama

Dobrá, říct, že naše aplikace ani zdaleka nedodržuje heslo „neopakuj se“, není tak úplně pravda. Vždyť jsme například oddělili validační logiku, takže je nezávislá na zbytku aplikace, v minulém dílu jsme vytvořili třídu DinnerFormViewModel, kterou používá jak metoda Edit, tak i metoda Create. Možná jste si ale u Edit a Create view šablon všimli, že si jsou velmi podobné, a nejen to, až na nadpis a titulek jsou absolutně identické! Máme tedy zbytečný duplicitní kód ve dvou souborech. Nevýhody jsou stejné jako u každého duplicitního kódu – pokud chceme udělat nějakou změnu ve formuláři, musíme ji provést hned dvakrát a může se snadno stát, že na úpravu druhé kopie zapomeneme. S vyřešením tohoto problému nám pomůžou právě partial šablony („částečné“ šablony).

Použití partial view šablon

V ASP.NET MVC můžeme nadefinovat „částečnou“ view šablonu, která definuje vzhled nějaké části stránky, samozřejmě tuto šablonu můžeme použít v tolika view, kolik se nám jen zachce.

Abychom přidali partial view, klikneme pravým tlačítkem na adresář Dinners ve složceViews a zvolíme možnost „Add > View“. Zobrazí se nám už dobře známý dialog, ale tentokrát ho nastavíme trochu jinak. Nový view pojmenujeme DinnerForm a zaškrtneme možnost „Create a partial view (.ascx)“.

Do nového souboru pak už stačí zkopírovat společný obsah pro obě původní view šablony, tedy to, co je v následující ukázce:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Controllers.DinnerFormViewModel>" %>

<%=Html.ValidationSummary("Opravte prosím všechny chyby a zkuste to znovu.") %>

<% using (Html.BeginForm()) {%>

    <fieldset>
        <p>
            <label for="Title">Název:</label>
            <%= Html.TextBox("Title", Model.Dinner.Title) %>
            <%= Html.ValidationMessage("Title", "*") %>
        </p>
        <p>
            <label for="EventDate">Datum:</label>
            <%=Html.TextBox("EventDate", Model.Dinner.EventDate) %>
            <%=Html.ValidationMessage("EventDate", "*") %>
        </p>
        <p>
            <label for="Description">Popis:</label>
            <%=Html.TextArea("Description", Model.Dinner.Description) %>
            <%=Html.ValidationMessage("Description", "*") %>
        </p>
        <p>
            <label for="Address">Adresa:</label>
            <%=Html.TextBox("Address", Model.Dinner.Address) %>
            <%=Html.ValidationMessage("Address", "*") %>
        </p>
        <p>
            <label for="Country">Země:</label>
            <%=Html.DropDownList("Country", Model.Countries) %> 
            <%=Html.ValidationMessage("Country", "*") %>
        </p>
        <p>
            <label for="ContactPhone">Telefon:</label>
            <%=Html.TextBox("ContactPhone", Model.Dinner.ContactPhone) %>
            <%=Html.ValidationMessage("ContactPhone", "*") %>
        </p>            
        <p>
            <label for="Latitude">Zem. šířka:</label>
            <%=Html.TextBox("Latitude", Model.Dinner.Latitude) %>
            <%=Html.ValidationMessage("Latitude", "*") %>
        </p>
        <p>
            <label for="Longitude">Zem. délka:</label>
            <%=Html.TextBox("Longitude", Model.Dinner.Longitude) %>
            <%=Html.ValidationMessage("Longitude", "*") %>
        </p>
        <p>
            <input type="submit" value="Uložit"/>
        </p>
    </fieldset>
<% } %>

Když teď chceme z Create a Edit šablon odkázat na použití nové partial šablony, tak nám jen stačí zavolat pomocnou metodu Html.RenderPartial:

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

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
     Vytvořit večeři
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Vytvořit večeři</h2>

    <% Html.RenderPartial("DinnerForm"); %>
</asp:Content>
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerFormViewModel>" %>

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

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Upravit večeři</h2>
    
    <% Html.RenderPartial("DinnerForm"); %>  
</asp:Content>

Použití partial šablon pro zpřehlednění kódu

Nejčastější způsob, proč použijeme partial šablony, bude použití opakujícího se kusu kódu. Často mají ale i druhé využití, i když se kód použije jen jednou. Když třeba máme složitou stránku, tak někdy může být vhodné vyčlenit nějaký složitější ovládací prvek do samostatného souboru, aby se nepletl (za chvíli uvidíme tento způsob využití u master pages).

Master pages

Kdo někdy pracoval s klasickými WebForms, tak master pages dost možná zná. Slouží k nadefinování společného vzhledu pro různé stránky aplikace, proto mají všechny stránky v naší aplikaci stejný modro-bílý design. Výchozí master page v ASP.NET MVC projektu se jmenuje Site.Master a najdeme ji v adresáři „/Views/Shared“ společně se souborem LogOnUserControl.ascx, který obsahuje definici tlačítka pro přihlášení uživatele a využívá konceptu partial šablon.

Základní master page v MVC projektu vypadá následovně. Všimněte si dvou ContentPlaceHolderů, do kterých jsme doteď dosazovali obsah všech našich view šablon.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
              
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div> 
            
            <div id="menucontainer">
            
                <ul id="menu">              
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>
            
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

To, jakou master page chceme pro content page (to je stránka nebo view, kterou do master page vkládáme) použít, určuje direktiva Page ve view šabloně:

<%@ Page Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerViewModel>" MasterPageFile="~/Views/Shared/Site.Master" %>

Teď je načase master page trochu upravit, abychom neměli název aplikace „My MVC Application“ a tak podobně:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>NerdDinner</h1>
            </div>
              
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div> 
            
            <div id="menucontainer">
            
                <ul id="menu">              
                    <li><%= Html.ActionLink("Seznam večeří", "Index", "Dinners")%></li>
                    <li><%= Html.ActionLink("Vytvořit večeři", "Create", "Dinners")%></li>
                    <li><%= Html.ActionLink("O webu", "About", "Home")%></li>
                </ul>
            
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
    </div>
</body>
</html>

Dnes jsme si ukázali, jak partial views a master pages můžou zpřehlednit a zjednodušit kód aplikace. Příště přidáme podporu stránkování pro seznam večeří. Zatím doporučuji, abyste si přidali několik večeří do databáze, abyste si také mohli stránkování vyzkoušet.

Zdroj: http://nerddinnerbook.s3.amazonaws.com/Part7.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.

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 V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Reklama
Reklama
Obrázek ke článku Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

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