3 – Vytvoření konzistentního vzhledu

 
 

 

Vytvoření opakovaně použitelných bloků obsahu (například záhlaví a zápatí) umožňuje efektivnější vytváření webových stránek a dosažení konzistentního vzhledu všech stránek.

Co se naučíte:

V této kapitole budou představeny následující funkce technologie ASP.NET:

 

 

Vytváření opakovaně použitelných bloků obsahu

Mnoho webů má obsah vyskytující se na všech stránkách, například záhlaví a zápatí nebo rámeček, podle kterého uživatelé poznají, že jsou přihlášeni. ASP.NET umožňuje vytvářet samostatné soubory s bloky obsahu, které mohou obsahovat text, značky a kód, stejně jako běžné webové stránky. Tyto bloky obsahu je poté možné vkládat do dalších stránek na webu, na kterých mají být tyto informace zobrazeny. To odstraňuje nutnost kopírovat a vkládat stejný obsah do všech stránek. Vytvoření takového společného obsahu také usnadňuje aktualizaci webu. Pokud je zapotřebí provést změnu obsahu, stačí aktualizovat jeden soubor, a změna se pak odrazí všude, kam byl obsah vložen.

Následující diagram ukazuje, jak bloky obsahu fungují. Když si prohlížeč od webového serveru vyžádá stránku, ASP.NET vloží bloky obsahu na místo, ze kterého je v hlavní stránce volána metoda RenderPage (Vykreslit stránku). Hotová (sloučená) stránka je pak odeslána prohlížeči.

ch03_layouts-1

V rámci tohoto postupu vytvoříme stránku, která se odkazuje na dva bloky obsahu (záhlaví a zápatí) nacházející se v samostatných souborech. Tyto bloky obsahu je možné použít v libovolné stránce na webu. Až budeme hotovi, získáme takovouto stránku:

ch03_layouts-2

  1. V kořenové složce svého webu vytvořte soubor s názvem Index.cshtml.
  2. Stávající kód značkovacího jazyka nahraďte následujícím kódem:
    <!DOCTYPE html> 
    <html> 
      <head> 
        <title>Main Page</title> 
      </head> 
      <body> 
     
        <h1>Index Page Content</h1> 
        <p>This is the content of the main page.</p> 
     
      </body> 
    </html>
  3. V kořenové složce vytvořte složku s názvem Shared (Sdílené).
    Poznámka   Soubory sdílené webovými stránkami obvykle ukládáme ve složce s názvem Shared.
  4. Ve složce Shared vytvořte soubor s názvem _Header.cshtml.
  5. Místo veškerého stávajícího obsahu vložte následující kód:
    <div class="header">This is header text.</div>

    Všimněte si názvu souboru _Header.cshtml, jehož předponu tvoří podtržítko (_). Stránku, jejíž název začíná podtržítkem, ASP.NET neodešle prohlížeči. To brání tomu, aby si uživatelé mohli tyto stránky vyžádat (neúmyslně či záměrně). Je vhodné používat podtržítka v názvech stránek obsahujících bloky obsahu, protože uživatelé by neměli být schopni si tyto stránky vyžádat – jsou určené výhradně k vložení do jiných stránek.

  6. Ve složce Shared vytvořte soubor s názvem _Footer.cshtml a místo stávajícího obsahu vložte:
      <div class="footer">© 2010 Contoso Pharmaceuticals. All rights reserved. 
     </div>
  7. Do souboru Index.cshtml přidejte následující kód, ve kterém jsou provedena dvě volání metody RenderPage (Vykreslit stránku):
    <!DOCTYPE html> 
    <html> 
      <head> 
        <title>Main Page</title> 
      </head> 
      <body> 
     
        @RenderPage("/Shared/_Header.cshtml") 
     
        <h1>Index Page Content</h1> 
        <p>This is the content of the main page.</p> 
     
        @RenderPage("/Shared/_Footer.cshtml") 
     
      </body> 
    </html>

    Tento kód ukazuje, jak vložit blok obsahu do webové stránky. Slouží k tomu volání metody RenderPage, které je předán název souboru, jehož obsah chceme na toto místo vložit. V našem příkladu vkládáme obsah souborů _Header.cshtml_Footer.cshtml do souboru Index.cshtml.

  8. Spusťte stránku Index.cshtml v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.)
  9. V prohlížeči si otevřete zdrojový kód stránky. (Kupříkladu v aplikaci Internet Explorer klikněte na stránku pravým tlačítkem a poté klikněte na příkaz Zobrazit zdrojový kód.)

    Zde si můžete prohlédnout kód značkovacího jazyka webové stránky odeslaný prohlížeči, ve kterém je sloučen kód značkovacího jazyka stránky Index s bloky obsahu. Následující příkaz ukazuje, jaký zdrojový kód stránky je vykreslen pro stránku Index.cshtml. Volání metody RenderPage, která jste vložili do stránky Index.cshtml, byla nahrazena vlastním obsahem souborů se záhlavím a zápatím.

    <!DOCTYPE html> 
    <html> 
      <head> 
        <title>Main Page</title> 
      </head> 
      <body> 
     
      <div class="header"> 
        This is header text. 
      </div> 
     
        <h1>Index Page Content</h1> 
        <p>This is the content of the main page.</p> 
     
      <div class="footer"> 
        © 2010 Contoso Pharmaceuticals. All rights reserved. 
      </div> 
     
      </body> 
    </html>

Vytvoření konzistentního vzhledu pomocí stránek s rozložením

Zatím jste se přesvědčili, jak snadné je zahrnout stejný obsah do více stránek. Strukturovanějším přístupem k dosažení konzistentního vzhledu webu je použití stránek s rozložením. Stránka s rozložením definuje strukturu webové stránky, ale neobsahuje žádný skutečný obsah. Po vytvoření stránky s rozložením mohou být vytvořeny webové stránky s obsahem a poté propojeny se stránkou s rozložením. Při zobrazení budou tyto stránky zformátovány podle stránky s rozložením. (Z tohoto hlediska stránka s rozložením slouží jako určitý druh šablony pro obsah definovaný v jiných stránkách.)

Stránka s rozložením se podobá libovolné jiné stránce HTML, s tím rozdílem, že obsahuje volání metody RenderBody (Vykreslit tělo). Pozice metody RenderBody ve stránce s rozložením určuje místo, na kterém budou zahrnuty informace ze stránky s obsahem.

Následující diagram ukazuje, jak jsou sloučením stránek s obsahem a stránek s rozložením za běhu vytvořeny hotové webové stránky. Prohlížeč zašle žádost o stránku s obsahem. Ve stránce s obsahem je použit kód určující, že pro strukturu stránky má být použita stránka s rozložením. Do stránky s rozložením je obsah vložen na místo, ze kterého je volána metoda RenderBody. Do stránky s rozložením mohou být vkládány také bloky obsahu pomocí volání metody RenderPage (Vykreslit stránku), stejným způsobem jako v předchozí části. Jakmile je webová stránka kompletní, je odeslána prohlížeči.

ch03_layouts-3

Následující postup ukazuje, jak vytvořit stránku s rozložením a připojit k ní stránky s obsahem.

  1. Ve složce Shared na webu vytvořte soubor s názvem _Layout1.cshtml.
  2. Místo veškerého stávajícího obsahu vložte následující kód:
    <!DOCTYPE html> 
      <head> 
        <title> Structured Content </title> 
        <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> 
      </head> 
      <body> 
        @RenderPage("/Shared/_Header2.cshtml") 
        <div id="main"> 
          @RenderBody() 
        </div> 
        <div id="footer"> 
          © 2010 Contoso Pharmaceuticals. All rights reserved. 
        </div> 
      </body> 
    </html>

    Bloky obsahu do stránky s rozložením vkládáme pomocí metody RenderPage (Vykreslit stránku). Stránka s rozložením může obsahovat jen jedno volání metody RenderBody (Vykreslit tělo).

    Poznámka   Některé webové servery nemusejí zpracovat reference hypertextových odkazů (atribut href odkazů) stejným způsobem. ASP.NET proto poskytuje pomocnou funkci (helper) @Href. Tato funkce jako parametr přijímá cestu a poskytuje ji webovému serveru v takové formě, jakou očekává.
  3. Ve složce Shared vytvořte soubor s názvem _Header2.cshtml a místo stávajícího obsahu vložte následující kód:
    <div id="header">Chapter 3: Creating a Consistent Look</div>
  4. V kořenové složce vytvořte novou složku s názvem Styles (Styly).
  5. Ve složce Styles vytvořte soubor s názvem Site.css a přidejte do něj následující definice stylů:
    h1 { 
        border-bottom: 3px solid #cc9900; 
        font: 2.75em/1.75em Georgia, serif; 
        color: #996600; 
    } 
     
    ul { 
        list-style-type: none; 
    } 
     
    body { 
        margin: 0; 
        padding: 1em; 
        background-color: #ffffff; 
        font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif; 
        color: #006600; 
    } 
     
    #list { 
        margin: 1em 0 7em -3em; 
        padding: 1em 0 0 0; 
        background-color: #ffffff; 
        color: #996600; 
        width: 25%; 
        float: left; 
    } 
     
    #header, #footer { 
        margin: 0; 
        padding: 0; 
        color: #996600; 
    }

    Tyto definice stylů slouží pouze jako ukázka toho, jak lze používat šablony stylů spolu se stránkami s rozložením. Budete-li chtít, můžete pro tyto elementy definovat své vlastní styly.

  6. V kořenové složce vytvořte soubor s názvem Content1.cshtml a místo stávajícího obsahu vložte následující kód:
    @{ 
        Layout = "/Shared/_Layout1.cshtml"; 
    } 
     
    <h1> Structured Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>

    Jedná se o stránku, která využívá stránku s rozložením. Blok kódu v horní části stránky určuje, jaká stránka s rozložením má být použita pro zformátování tohoto obsahu.

  7. Spusťte stránku Content1.cshtml v prohlížeči. Při vykreslení stránky jsou použity formát a šablona stylů definované ve stránce _Layout1.cshtml a text (obsah) definovaný ve stránce Content1.cshtml.

    ch03_layouts-4

    Opakováním kroku 6 můžete vytvořit další stránky s obsahem, které sdílejí stejnou stránku s rozložením.

    Poznámka   Web můžete nastavit tak, aby pro všechny stránky s obsahem v určité složce byla automaticky použita stejná stránka s rozložením. Další informace najdete v kapitole 18 – úpravy chování s platností na celém webu.

Návrh stránek s rozložením obsahujících více sekcí s obsahem

Stránka s obsahem může mít více sekcí, což je užitečné, pokud se v rozložení vyskytuje více oblastí s opakujícím se obsahem. Ve stránce s obsahem je každé sekci přidělen jedinečný název. (Výchozí sekce zůstává bez názvu.) Do stránky s rozložením je přidána metoda RenderBody (Vykreslit tělo), která určuje, kde má být zobrazena nepojmenovaná (výchozí) sekce. Pak jsou přidána samostatná volání metody RenderSection (Vykreslit sekci) jednotlivě vykreslující pojmenované sekce.

Následující diagram ukazuje, jak technologie ASP.NET zpracovává obsah rozdělený do více sekcí. Jednotlivé pojmenované sekce jsou ve stránce s obsahem obsaženy uvnitř bloku sekce. V našem příkladu mají názvy Header (Záhlaví) a List (Seznam). Technologie ASP.NET vloží sekce obsahu do stránky s rozložením na místo, ze kterého je volána metoda RenderSection (Vykreslit sekci). Nepojmenovaná (výchozí) sekce je vložena na místo, ze kterého je volána metoda RenderBody (Vykreslit tělo), jak jste již viděli dříve.

ch03_layouts-5

Tento postup ukazuje, jak vytvořit stránku s obsahem s více sekcemi obsahu a jak ji zobrazit s použitím stránky s rozložením podporující více sekcí obsahu.

  1. Ve složce Shared vytvořte soubor s názvem _Layout2.cshtml.
  2. Místo veškerého stávajícího obsahu vložte následující kód:
    <!DOCTYPE html> 
    <html> 
        <head> 
          <title>Multisection Content</title> 
          <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> 
        </head> 
        <body> 
          <div id="header"> 
            @RenderSection("header") 
          </div> 
          <div id="list"> 
            @RenderSection("list") 
          </div> 
          <div id="main"> 
            @RenderBody() 
          </div> 
          <div id="footer"> 
            © 2010 Contoso Pharmaceuticals. All rights reserved. 
          </div> 
        </body> 
    </html>

    Obě sekce, header (záhlaví) a list (seznam), vykreslíme pomocí metody RenderSection (Vykreslit sekci).

  3. V kořenové složce vytvořte soubor s názvem Content2.cshtml a místo stávajícího obsahu vložte následující kód:
    @{ 
        Layout = "/Shared/_Layout2.cshtml"; 
    } 
     
    @section header { 
        <div id="header"> 
            Chapter 3: Creating a Consistent Look 
        </div> 
    } 
     
    @section list { 
        <ul> 
            <li>Lorem</li> 
            <li>Ipsum</li> 
            <li>Dolor</li> 
            <li>Consecte</li> 
            <li>Eiusmod</li> 
            <li>Tempor</li> 
            <li>Incididu</li> 
        </ul> 
    } 
     
    <h1>Multisection Content</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>

    V horní části této stránky s obsahem se nachází blok kódu. Obě pojmenované sekce jsou uzavřeny v bloku sekce. Zbytek stránky obsahuje výchozí (nepojmenovanou) sekci obsahu.

  4. Spusťte stránku v prohlížeči.

    ch03_layouts-6

Volitelné sekce obsahu

Sekce vytvořené ve stránce s obsahem musí za normálních okolností odpovídat sekcím definovaným ve stránce s rozložením. Pokud by nastala některá z následujících situací, mohlo by dojít k chybě:

Toto chování ale můžete změnit tak, že sekci ve stránce s rozložením deklarujete jako volitelnou. To vám umožní definovat stránky s obsahem, které mohou sdílet stránku s rozložením a přitom mohou, ale nemusí zahrnovat obsah pro určitou sekci.

  1. Otevřete soubor Content2.cshtml a odstraňte následující sekci:
    @section header { 
      <div id="header"> 
        Chapter 3: Creating a Consistent Look 
      </div> 
    }
  2. Stránku uložte a poté ji spusťte v prohlížeči. Je zobrazena chybová zpráva, protože stránka s obsahem neposkytuje obsah pro sekci definovanou ve stránce s rozložením, a sice pro sekci header (záhlaví).

    ch03_layouts-7

  3. Ve složce Shared otevřete stránku _Layout2.cshtml a řádek:
    @RenderSection("header")

    nahraďte následujícím kódem:

    @RenderSection("header", required: false)

    Mohli byste také předchozí řádek kódu nahradit následujícím blokem kódu, který poskytuje stejný výsledek:

    @if (IsSectionDefined("header")) { 
        @RenderSection("header") 
    }
  4. Spusťte opět stránku Content2.cshtml v prohlížeči. (Pokud máte tuto stránku v prohlížeči stále otevřenou, stačí ji aktualizovat.) Tentokrát je stránka zobrazena bez chyb, přestože nemá záhlaví.

Předávání dat do stránek s rozložením

Ve stránce s obsahem mohou být definována data, na která se potřebujete odkazovat ve stránce s rozložením. V tom případě potřebujete předat data ze stránky s obsahem do stránky s rozložením. Můžete například chtít zobrazit stav přihlášení uživatele nebo zobrazit či skrýt oblasti obsahu na základě vstupu uživatele.

Aby bylo možné data předávat ze stránky s obsahem do stránky s rozložením, je možné hodnoty vložit do vlastnosti PageData (Data stránky) stránky s obsahem. Vlastnost PageData je kolekce párů název/hodnota uchovávající data, která mají být předávána mezi stránkami. Ve stránce s rozložením pak z vlastnosti PageData hodnoty můžete číst.

Podívejme se na další diagram. Tento diagram ukazuje, jak technologie ASP.NET může pomocí vlastnosti PageData (Data stránky) předávat hodnoty ze stránky s obsahem do stránky s rozložením. Když ASP.NET začne webovou stránku sestavovat, vytvoří kolekci PageData. Ve stránce s obsahem je použit kód, který data vkládá do kolekce PageData. K hodnotám v kolekci PageData mají přístup také další sekce ve stránce s obsahem a další bloky obsahu.

ch03_layouts-8

Následující postup ukazuje, jak předat data ze stránky s obsahem do stránky s rozložením. Po spuštění stránka zobrazí tlačítko umožňující uživateli skrýt nebo zobrazit seznam definovaný ve stránce s rozložením. Když uživatel klikne na tlačítko, je nastavena hodnota true/false (typu Boolean) ve vlastnosti PageData. Stránka s rozložením tuto hodnotu přečte a pokud se jedná o hodnotu false, seznam skryje. Tato hodnota také ve stránce s rozložením určuje, zda má být zobrazeno tlačítko Hide List (Skrýt seznam), nebo tlačítko Show List (Zobrazit seznam).

ch03_layouts-9

  1. V kořenové složce vytvořte soubor s názvem Content3.cshtml a místo stávajícího obsahu vložte následující kód:
    @{ 
        Layout = "/Shared/_Layout3.cshtml"; 
     
        PageData["Title"] = "Passing Data"; 
        PageData["ShowList"] = true; 
     
        if (IsPost) { 
            if (Request["list"] == "off") { 
                PageData["ShowList"] = false; 
            } 
        } 
    } 
     
    @section header { 
        <div id="header"> 
            Chapter 3: Creating a Consistent Look 
        </div> 
    } 
     
    <h1>@PageData["Title"]</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p> 
     
    @if (PageData["ShowList"] == true) { 
        <form method="post" action=""> 
          <input type="hidden" name="list" value="off" /> 
          <input type="submit" value="Hide List" /> 
        </form> 
    } 
    else { 
        <form method="post" action=""> 
          <input type="hidden" name="list" value="on" /> 
          <input type="submit" value="Show List" /> 
        </form> 
    }

    Tento kód do vlastnosti PageData (Data stránky) ukládá dva datové údaje — nadpis webové stránky a hodnotu true (pravda) nebo false (nepravda), která určuje, zda má být seznam zobrazen.

    Všimněte si, že technologie ASP.NET umožňuje podmíněné vložení kódu značkovacího jazyka HTML do stránky s použitím bloku kódu. Například blok if/else v těle stránky určuje, který formulář má být zobrazen, na základě toho, zda je položka PageData["ShowList"] nastavena na hodnotu true.

  2. Ve složce Shared vytvořte soubor s názvem _Layout3.cshtml a místo stávajícího obsahu vložte následující kód:
    <!DOCTYPE html> 
     
    <html> 
        <head> 
          <title>@PageData["Title"]</title> 
          <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> 
        </head> 
        <body> 
          <div id="header"> 
            @RenderSection("header") 
          </div> 
          @if (PageData["ShowList"] == true) { 
              <div id="list"> 
                @RenderPage("/Shared/_List.cshtml") 
              </div> 
          } 
          <div id="main"> 
            @RenderBody() 
          </div> 
          <div id="footer"> 
            © 2010 Contoso Pharmaceuticals. All rights reserved. 
          </div> 
        </body> 
    </html>

    Ve stránce s rozložením se v elementu <title> (nadpis) vyskytuje výraz, který hodnotu nadpisu získává z vlastnosti PageData (Data stránky). Hodnota ShowList (Zobrazit seznam) vlastnosti PageData také určuje, zda má být zobrazen obsah bloku list (seznam).

  3. Ve složce Shared vytvořte soubor s názvem _List.cshtml a místo stávajícího obsahu vložte následující kód:
    <ul> 
      <li>Lorem</li> 
      <li>Ipsum</li> 
      <li>Dolor</li> 
      <li>Consecte</li> 
      <li>Eiusmod</li> 
      <li>Tempor</li> 
      <li>Incididu</li> 
    </ul>
  4. Spusťte stránku Content3.cshtml v prohlížeči. Po zobrazení stránky je na levé straně stránky viditelný seznam a tlačítko Hide List (Skrýt seznam) ve spodní části stránky.

    ch03_layouts-10

  5. Klikněte na tlačítko Hide List (Skrýt seznam). Seznam zmizí a tlačítko se změní na tlačítko Show List (Zobrazit seznam).

    ch03_layouts-11

  6. Po kliknutí na tlačítko Show List (Zobrazit seznam) je seznam opět zobrazen.

Vytvoření a použití jednoduché pomocné třídy

Další možností, jak dosáhnout konzistentního vzhledu webu, je vytvoření vlastní pomocné třídy. Jak jste se dozvěděli v kapitole 1 – Začínáme se sadou WebMatrix a webovými stránkami ASP.NET, pomocná třída (helper) je komponenta umožňující provést určitý úkol pomocí jediného řádku kódu. Technologie ASP.NET zahrnuje mnoho pomocných tříd a s mnoha z nich budete pracovat v dalších kapitolách. Kompletní seznam pomocných tříd najdete v příloze Stručný přehled rozhraní API technologie ASP.NET.

Pomocná třída (helper) může pomoci dosáhnout konzistentního vzhledu webu díky tomu, že umožňuje použít společný blok kódu ve více stránkách. Řekněme, že na stránce často chcete vytvořit poznámku, která se odlišuje od ostatních odstavců. Vytvoříte ji pomocí elementu <div>, jehož styl je upraven tak, aby vypadal jako rámeček s ohraničením. Místo toho, abyste přidávali stejný kód značkovacího jazyka do každé stránky, můžete jej zabalit jako pomocnou třídu (helper) a poté poznámku vložit na libovolné místo pomocí jednoho řádku kódu. Kód jednotlivých stránek pak bude jednodušší a přehlednější. Snazší bude také údržba webu, protože budete-li potřebovat změnit vzhled poznámky, budete moci změnit kód značkovacího jazyka na jednom místě.

Tento postup ukazuje, jak vytvořit pomocnou třídu umožňující vytvořit poznámku tak, jak bylo právě popsáno. Jedná se o jednoduchý příklad, ale vaše vlastní pomocné třídy mohou zahrnovat libovolný potřebný kód značkovacího jazyka nebo kód ASP.NET.

  1. V kořenové složce webu vytvořte novou složku s názvem App_Code.
  2. Ve složce App_Code vytvořte nový soubor CSHTML a nazvěte jej MyHelpers.cshtml.
  3. Stávající obsah nahraďte následujícím kódem:
     
    @helper MakeNote(string content) { 
        <div class="note" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"> 
          <p> 
              <strong>Note</strong>   @content 
           </p> 
        </div> 
    }

    S použitím syntaxe @helper je v kódu je deklarována nová pomocná třída (helper) MakeNote. Tato konkrétní pomocná třída umožňuje předání parametru s názvem content (obsah), který může obsahovat kombinaci textu a kódu značkovacího jazyka. Pomocná třída (helper) tento řetězec vloží do těla poznámky s použitím proměnné @content.

    Všimněte si, že soubor má název MyHelpers.cshtml, ale název pomocné třídy je MakeNote. Do jednoho souboru je možné vložit více vlastních pomocných tříd.

  4. Soubor uložte a zavřete.

Následující postup ukazuje, jak pomocí vytvořené pomocné třídy vložit poznámku do webové stránky.

  1. V kořenové složce vytvořte nový prázdný soubor s názvem TestHelper.cshtml.
  2. Do stránky přidejte následující kód:
     
    <!DOCTYPE html> 
      <head> 
        <title>Test Helpers Page</title> 
      </head> 
      <body> 
        <p>This is some opening paragraph text.</p> 
     
        <!-- Sem vložte volání pomocné třídy pro poznámku. --> 
        @MyHelpers.MakeNote("My test note content.") 
     
        <p>This is some following text.</p> 
      </body> 
    </html>

    K volání vytvořené pomocné třídy slouží symbol @, po kterém následuje název souboru, ve kterém se pomocná třída nachází, tečka a poté název pomocné třídy. (Pokud je ve složce App_Code vytvořeno více složek, můžete s použitím syntaxe @NázevSložky.NázevSouboru.NázevPomocnéTřídy volat pomocnou třídu v rámci složky na libovolné vnořené úrovni). Text, který do závorky vložíte mezi uvozovky, bude pomocnou třídou zobrazen jako součást poznámky na webové stránce.

  3. Stránku uložte a spusťte ji v prohlížeči. Pomocná třída (helper) poznámku vygeneruje přímo na místě, ze kterého jste pomocný objekt volali: mezi dvěma odstavci.

    ch03_layouts-12

Další materiály

Kapitola 18 – úpravy chování s platností na celém webu