Vytvoření konzistentního rozložení na webech ASP.NET Webových stránek (Razor)

Článek
07/13/2023

Tento článek vysvětluje, jak můžete pomocí stránek rozložení na webu ASP.NET Web Pages (Razor) vytvářet opakovaně použitelné bloky obsahu (jako jsou záhlaví a zápatí) a vytvářet konzistentní vzhled všech stránek na webu.

Co se naučíte:

Jak vytvořit opakovaně použitelné bloky obsahu, jako jsou záhlaví a zápatí.

Jak vytvořit konzistentní vzhled všech stránek na webu pomocí rozložení.

Jak předat data za běhu na stránku rozložení.

Toto jsou ASP.NET funkce uvedené v článku:

Bloky obsahu, což jsou soubory obsahující obsah ve formátu HTML, který se má vložit na více stránek.

Rozložení stránek, což jsou stránky obsahující obsah ve formátu HTML, který může být sdílen stránkami na webu.

Metody RenderPage, RenderBodya RenderSection , které ASP.NET sdělují, kam vložit prvky stránky.

Slovník PageData , který umožňuje sdílet data mezi bloky obsahu a stránkami rozložení.

Verze softwaru použité v tomto kurzu

ASP.NET Webové stránky (Razor) 3

Tento kurz funguje také s webovými stránkami ASP.NET 2.

O stránkách rozložení

Mnoho webů obsahuje obsah, který se zobrazuje na každé stránce, například záhlaví a zápatí, nebo pole, které uživatelům říká, že jsou přihlášeni. ASP.NET umožňuje vytvořit samostatný soubor s blokem obsahu, který může obsahovat text, značky a kód stejně jako běžná webová stránka. Blok obsahu pak můžete vložit na jiné stránky na webu, kde se mají informace zobrazit. Nemusíte tak kopírovat a vkládat stejný obsah na každou stránku. Vytvoření podobného běžného obsahu také usnadňuje aktualizaci webu. Pokud potřebujete změnit obsah, stačí aktualizovat jeden soubor a změny se pak projeví všude, kde byl obsah vložen.

Následující diagram ukazuje, jak bloky obsahu fungují. Když prohlížeč požádá o stránku z webového serveru, ASP.NET vloží bloky obsahu v místě, kde RenderPage je metoda volána na hlavní stránce. Dokončená (sloučená) stránka se pak odešle do prohlížeče.

Koncepční diagram znázorňující, jak metoda RenderPage vloží odkazovanou stránku do aktuální stránky.

V tomto postupu vytvoříte stránku, která odkazuje na dva bloky obsahu (záhlaví a zápatí), které jsou umístěné v samostatných souborech. Stejné bloky obsahu můžete použít na libovolné stránce na webu. Až budete hotovi, zobrazí se stránka podobná této:

Snímek obrazovky zobrazující stránku v prohlížeči, která je výsledkem spuštění stránky, která zahrnuje volání metody RenderPage

V kořenové složce webu vytvořte soubor s názvem Index.cshtml.

Nahraďte existující kód 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>

V kořenové složce vytvořte složku s názvem Sdílené.

Poznámka

Běžné je ukládat soubory, které jsou sdílené mezi webovými stránkami, do složky s názvem Sdílené.
Ve složce Sdílené vytvořte soubor s názvem _Header.cshtml.
Nahraďte veškerý existující obsah následujícím kódem:
```
<div class="header">This is header text.</div>
```
Všimněte si, že název souboru je _Header.cshtml s podtržítkem (_) jako předponou. ASP.NET neodešle stránku do prohlížeče, pokud její název začíná podtržítkem. Zabráníte tak uživatelům v přímém vyžádání těchto stránek (neúmyslně nebo jinak). K pojmenování stránek, které obsahují bloky obsahu, je vhodné použít podtržítko, protože ve skutečnosti nechcete, aby si uživatelé mohli tyto stránky vyžádat – existují výhradně pro vložení na jiné stránky.
Ve složce Sdílené vytvořte soubor s názvem _Footer.cshtml a nahraďte obsah následujícím kódem:
```
<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>
```
Na stránce Index.cshtml přidejte dvě volání RenderPage metody, jak je znázorněno tady:
```
<!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>
```
Ukazuje, jak vložit blok obsahu na webovou stránku. Zavoláte metodu RenderPage a předáte jí název souboru, jehož obsah chcete v tomto okamžiku vložit. Tady vkládáte obsah souborů _Header.cshtml a _Footer.cshtml do souboru Index.cshtml .
Spusťte stránku Index.cshtml v prohlížeči. (V aplikaci WebMatrix klikněte v pracovním prostoru Soubory pravým tlačítkem na soubor a pak vyberte Spustit v prohlížeči.)
V prohlížeči zobrazte zdroj stránky. (Například v Internet Exploreru klikněte pravým tlačítkem na stránku a potom klikněte na Zobrazit zdroj.)

To vám umožní zobrazit značky webové stránky odeslané do prohlížeče, které zkombinují značky stránky indexu s bloky obsahu. Následující příklad ukazuje zdroj stránky, který je vykreslen pro Index.cshtml. Volání RenderPage , která jste vložili do souboru Index.cshtml , byla nahrazena skutečným obsahem souborů záhlaví a zápatí.
```
<!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">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>
```

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

Zatím jste viděli, že je snadné zahrnout stejný obsah na více stránkách. Strukturovanějším přístupem k vytvoření konzistentního vzhledu webu je použití stránek rozložení. Stránka rozložení definuje strukturu webové stránky, ale neobsahuje žádný skutečný obsah. Po vytvoření stránky rozložení můžete vytvořit webové stránky, které obsahují obsah, a pak je propojit se stránkou rozložení. Když se tyto stránky zobrazí, budou formátovány podle stránky rozložení. (V tomto smyslu stránka rozložení funguje jako druh šablony pro obsah, který je definován na jiných stránkách.)

Stránka rozložení je stejně jako každá stránka HTML s tím rozdílem, že obsahuje volání RenderBody metody. Umístění metody na RenderBody stránce rozložení určuje, kam budou zahrnuty informace ze stránky obsahu.

Následující diagram znázorňuje, jak se stránky obsahu a stránky rozložení kombinují za běhu, aby vznikla hotová webová stránka. Prohlížeč si vyžádá stránku obsahu. Stránka obsahu obsahuje kód, který určuje stránku rozložení, která se má použít pro strukturu stránky. Na stránce rozložení je obsah vložen v místě, kde RenderBody je volána metoda. Bloky obsahu lze také vložit na stránku rozložení voláním RenderPage metody, jak jste to udělali v předchozí části. Po dokončení se webová stránka odešle do prohlížeče.

Snímek obrazovky zobrazující stránku v prohlížeči, která je výsledkem spuštění stránky, která obsahuje volání metody RenderBody

Následující postup ukazuje, jak vytvořit stránku rozložení a propojit na ni stránky obsahu.

Ve složce Sdílené webu vytvořte soubor s názvem _Layout1.cshtml.

Nahraďte veškerý existující obsah následujícím kódem:

<!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

Metodu RenderPage na stránce rozložení použijete k vložení bloků obsahu. Stránka rozložení může obsahovat pouze jedno volání RenderBody metody.

Ve složce Sdílené vytvořte soubor s názvem _Header2.cshtml a nahraďte veškerý existující obsah následujícím kódem:
```
<div id="header">Creating a Consistent Look</div>
```
V kořenové složce vytvořte novou složku a pojmenujte ji Styly.

Ve složce Styly vytvořte soubor s názvem Site.css a přidejte 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ů jsou tady jenom proto, aby ukazovaly, jak se dají šablony stylů používat se stránkami rozložení. Pokud chcete, můžete pro tyto prvky definovat vlastní styly.

V kořenové složce vytvořte soubor s názvem Content1.cshtml a nahraďte veškerý existující obsah následujícím kódem:

@{
    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>

Toto je stránka, která bude používat stránku rozložení. Blok kódu v horní části stránky označuje, kterou stránku rozložení použít k formátování tohoto obsahu.

Spusťte Content1.cshtml v prohlížeči. Vykreslená stránka používá formát a šablonu stylů definovanou v _Layout1.cshtml a text (obsah) definovaný v Content1.cshtml.

Opakováním kroku 6 můžete vytvořit další stránky obsahu, které pak můžou sdílet stejnou stránku rozložení.

Poznámka

Web můžete nastavit tak, abyste mohli automaticky používat stejnou stránku rozložení pro všechny stránky obsahu ve složce. Podrobnosti najdete v tématu Přizpůsobení chování Site-Wide pro webové stránky ASP.NET.

Návrh stránek rozložení, které mají více oddílů obsahu

Stránka obsahu může mít více oddílů, což je užitečné, pokud chcete použít rozložení, která mají více oblastí s nahraditelným obsahem. Na stránce obsahu dáte každému oddílu jedinečný název. (Výchozí oddíl zůstane bez názvu.) Na stránce rozložení přidáte metodu RenderBody , která určí, kde se má zobrazit nepojmenovaný (výchozí) oddíl. Potom přidáte samostatné RenderSection metody, aby bylo možné vykreslit pojmenované oddíly jednotlivě.

Následující diagram znázorňuje, jak ASP.NET zpracovává obsah, který je rozdělený do několika oddílů. Každý pojmenovaný oddíl je obsažen v bloku oddílu na stránce obsahu. (V příkladu jsou pojmenované Header a List .) Architektura vloží oddíl obsahu do stránky rozložení v místě, kde RenderSection je volána metoda. Nepojmenovaný (výchozí) oddíl se vloží do bodu, kde RenderBody je volána metoda, jak jste viděli dříve.

Koncepční diagram znázorňující, jak metoda RenderSection vkládá oddíly odkazů na aktuální stránku.

Tento postup ukazuje, jak vytvořit stránku obsahu, která obsahuje více oddílů obsahu, a jak ji vykreslit pomocí stránky rozložení, která podporuje více oddílů obsahu.

Ve složce Sdílené vytvořte soubor s názvem _Layout2.cshtml.

Nahraďte veškerý existující obsah následujícím kódem:

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link 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">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

Použijete metodu RenderSection k vykreslení oddílu záhlaví i seznamu.

V kořenové složce vytvořte soubor s názvem Content2.cshtml a nahraďte veškerý existující obsah následujícím kódem:

@{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        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>

Tato stránka obsahu obsahuje blok kódu v horní části stránky. Každý pojmenovaný oddíl je obsažen v bloku oddílu. Zbytek stránky obsahuje výchozí (nepojmenovaný) oddíl obsahu.

Spusťte Content2.cshtml v prohlížeči.

Nastavení oddílů obsahu jako volitelných

Oddíly, které vytvoříte na stránce obsahu, se obvykle musí shodovat s oddíly definovanými na stránce rozložení. K chybám může dojít, pokud dojde k některé z následujících:

Stránka obsahu obsahuje oddíl, který nemá na stránce rozložení žádný odpovídající oddíl.
Stránka rozložení obsahuje oddíl, pro který není žádný obsah.
Stránka rozložení obsahuje volání metody, která se pokouší vykreslit stejný oddíl více než jednou.

Toto chování pro pojmenovaný oddíl však můžete přepsat tak, že na stránce rozložení deklarujete, že je oddíl volitelný. To vám umožní definovat více stránek obsahu, které můžou sdílet stránku rozložení, ale které můžou nebo nemusí obsahovat obsah pro konkrétní oddíl.

Otevřete Content2.cshtml a odeberte následující část:

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

Uložte stránku a spusťte ji v prohlížeči. Zobrazí se chybová zpráva, protože stránka obsahu neposkytuje obsah pro oddíl definovaný na stránce rozložení, konkrétně oddíl záhlaví.
Ve složce Sdílené otevřete stránku _Layout2.cshtml a nahraďte tento řádek:
```
@RenderSection("header")
```
s následujícím kódem:
```
@RenderSection("header", required: false)
```
Jako alternativu můžete nahradit předchozí řádek kódu následujícím blokem kódu, který vytvoří stejné výsledky:
```
@if (IsSectionDefined("header")) {
    @RenderSection("header")
}
```
Znovu spusťte stránku Content2.cshtml v prohlížeči. (Pokud máte tuto stránku pořád otevřenou v prohlížeči, stačí ji aktualizovat.) Tentokrát se stránka zobrazí bez chyby, i když nemá žádné záhlaví.

Předávání dat na stránky rozložení

Na stránce obsahu můžete mít definovaná data, na která budete muset odkazovat na stránce rozložení. Pokud ano, musíte data ze stránky obsahu předat na stránku rozložení. Můžete například chtít zobrazit stav přihlášení uživatele nebo můžete chtít zobrazit nebo skrýt oblasti obsahu na základě vstupu uživatele.

Pokud chcete předat data ze stránky obsahu na stránku rozložení, můžete hodnoty vložit do PageData vlastnosti stránky obsahu. Vlastnost PageData je kolekce dvojic název/hodnota, které obsahují data, která chcete předávat mezi stránkami. Na stránce rozložení pak můžete číst hodnoty z PageData vlastnosti.

Tady je další diagram. Tento příklad ukazuje, jak ASP.NET pomocí PageData vlastnosti předat hodnoty ze stránky obsahu na stránku rozložení. Když ASP.NET začne vytvářet webovou stránku, vytvoří kolekci PageData . Na stránce obsahu napíšete kód pro vložení dat do PageData kolekce. K hodnotám v kolekci PageData mohou přistupovat také jiné oddíly na stránce obsahu nebo další bloky obsahu.

Koncepční diagram znázorňující, jak může stránka obsahu naplnit slovník PageData a předat je na stránku rozložení.

Následující postup ukazuje, jak předat data ze stránky obsahu na stránku rozložení. Při spuštění stránky se zobrazí tlačítko, které uživateli umožňuje skrýt nebo zobrazit seznam definovaný na stránce rozložení. Když uživatelé kliknou na tlačítko, nastaví ve PageData vlastnosti hodnotu true/false (logická hodnota). Stránka rozložení přečte danou hodnotu, a pokud je nepravda, seznam skryje. Hodnota se také používá na stránce obsahu k určení, zda se má zobrazit tlačítko Skrýt seznam nebo Tlačítko Zobrazit seznam .

[Snímek obrazovky se stránkou Předávání dat.]

V kořenové složce vytvořte soubor s názvem Content3.cshtml a nahraďte veškerý existující obsah následujícím kódem:

@{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    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>
}

Kód ukládá do PageData vlastnosti dvě části dat – název webové stránky a hodnotu true nebo false, aby bylo možné určit, zda se má seznam zobrazit.

Všimněte si, že ASP.NET umožňuje vložit kód HTML na stránku podmíněně pomocí bloku kódu. Například blok v textu stránky určuje, if/else který formulář se má zobrazit v závislosti na tom, jestli PageData["ShowList"] je nastaven na hodnotu true.

Ve složce Sdílené vytvořte soubor s názvem _Layout3.cshtml a nahraďte veškerý existující obsah následujícím kódem:

<!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link 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">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

Stránka rozložení obsahuje výraz v elementu <title> , který získá hodnotu názvu z PageData vlastnosti. Používá také ShowList hodnotu PageData vlastnosti k určení, zda se má zobrazit blok obsahu seznamu.

Ve složce Sdílené vytvořte soubor s názvem _List.cshtml a nahraďte veškerý existující obsah následujícím kódem:

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

Spusťte stránku Content3.cshtml v prohlížeči. Stránka se zobrazí se seznamem viditelným na levé straně stránky a tlačítkem Skrýt seznam v dolní části.
Klikněte na Skrýt seznam. Seznam zmizí a tlačítko se změní na Zobrazit seznam.
Klikněte na tlačítko Zobrazit seznam a seznam se zobrazí znovu.

Další materiály

Přizpůsobení chování Site-Wide pro webové stránky ASP.NET

Sdílet prostřednictvím

Vytvoření konzistentního rozložení na webech ASP.NET Webových stránek (Razor)

Verze softwaru použité v tomto kurzu

O stránkách rozložení

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

Návrh stránek rozložení, které mají více oddílů obsahu

Nastavení oddílů obsahu jako volitelných

Předávání dat na stránky rozložení

Další materiály

Váš názor

Váš názor

Další materiály