Udostępnij za pośrednictwem

Tworzenie spójnego układu w witrynach ASP.NET Web Pages (Razor)

  • Artykuł

– autor Tom FitzMacken

W tym artykule wyjaśniono, w jaki sposób można używać stron układu w witrynie internetowej ASP.NET Web Pages (Razor) do tworzenia bloków zawartości wielokrotnego użytku (takich jak nagłówki i stopki) oraz aby utworzyć spójny wygląd wszystkich stron w witrynie.

Czego nauczysz się:

  • Jak utworzyć bloki zawartości wielokrotnego użytku, takie jak nagłówki i stopki.
  • Jak utworzyć spójny wygląd wszystkich stron w witrynie przy użyciu układu.
  • Jak przekazywać dane w czasie wykonywania do strony układu.

Oto ASP.NET funkcje wprowadzone w artykule:

  • Bloki zawartości, które zawierają zawartość sformatowaną w formacie HTML, które mają być wstawiane na wielu stronach.
  • Strony układu zawierające zawartość sformatowaną w formacie HTML, które mogą być udostępniane przez strony w witrynie internetowej.
  • Metody RenderPage, RenderBodyi RenderSection , które informują ASP.NET, gdzie należy wstawić elementy strony.
  • Słownik PageData , który umożliwia udostępnianie danych między blokami zawartości a stronami układu.

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 3

Ten samouczek współpracuje również z usługą ASP.NET Web Pages 2.

Informacje o stronach układu

Wiele witryn internetowych ma zawartość wyświetlaną na każdej stronie, na przykład nagłówek i stopkę lub pole, które informuje użytkowników, że są zalogowani. ASP.NET umożliwia utworzenie oddzielnego pliku z blokiem zawartości, który może zawierać tekst, znaczniki i kod, podobnie jak zwykła strona internetowa. Następnie możesz wstawić blok zawartości na innych stronach w witrynie, na której mają być wyświetlane informacje. W ten sposób nie trzeba kopiować i wklejać tej samej zawartości na każdej stronie. Tworzenie wspólnej zawartości, takiej jak ta, ułatwia również aktualizowanie witryny. Jeśli musisz zmienić zawartość, wystarczy zaktualizować pojedynczy plik, a zmiany zostaną odzwierciedlone wszędzie tam, gdzie zawartość została wstawiona.

Na poniższym diagramie pokazano, jak działają bloki zawartości. Gdy przeglądarka żąda strony z serwera internetowego, ASP.NET wstawia bloki zawartości w punkcie, w którym RenderPage metoda jest wywoływana na stronie głównej. Zakończona (scalona) strona jest następnie wysyłana do przeglądarki.

Diagram koncepcyjny przedstawiający sposób, w jaki metoda RenderPage wstawia przywołyną stronę do bieżącej strony.

W tej procedurze utworzysz stronę odwołującą się do dwóch bloków zawartości (nagłówka i stopki), które znajdują się w oddzielnych plikach. Te same bloki zawartości można używać na dowolnej stronie w witrynie. Po zakończeniu uzyskasz stronę podobną do następującej:

Zrzut ekranu przedstawiający stronę w przeglądarce, która wynika z uruchamiania strony zawierającej wywołania metody RenderPage.

  1. W folderze głównym witryny internetowej utwórz plik o nazwie Index.cshtml.

  2. Zastąp istniejące znaczniki następującymi elementami:

    <!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. W folderze głównym utwórz folder o nazwie Udostępnione.

    Uwaga

    Typowym rozwiązaniem jest przechowywanie plików współużytkowanych między stronami internetowymi w folderze o nazwie Udostępnione.

  4. W folderze Udostępnione utwórz plik o nazwie _Header.cshtml.

  5. Zastąp dowolną istniejącą zawartość następującymi elementami:

    <div class="header">This is header text.</div>

    Zwróć uwagę, że nazwa pliku to _Header.cshtml z podkreślenia (_) jako prefiksem. ASP.NET nie wyśle strony do przeglądarki, jeśli jego nazwa zaczyna się od podkreślenia. Uniemożliwia to osobom żądanie (przypadkowo lub w inny sposób) tych stron bezpośrednio. Dobrym pomysłem jest użycie podkreślenia do nazw stron, które mają w nich bloki zawartości, ponieważ naprawdę nie chcesz, aby użytkownicy mogli żądać tych stron — istnieją one ściśle, aby zostały wstawione do innych stron.

  6. W folderze Udostępniony utwórz plik o nazwie _Footer.cshtml i zastąp zawartość następującymi elementami:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>

  7. Na stronie Index.cshtml dodaj dwa wywołania metody RenderPage , jak pokazano poniżej:

    <!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>

    W tym artykule pokazano, jak wstawić blok zawartości do strony internetowej. Metoda jest wywoływana RenderPage i przekazuje nazwę pliku, którego zawartość ma zostać wstawiona w tym momencie. W tym miejscu wstawiasz zawartość plików _Header.cshtml i _Footer.cshtml do pliku Index.cshtml .

  8. Uruchom stronę Index.cshtml w przeglądarce. (W programie WebMatrix w obszarze roboczym Pliki kliknij prawym przyciskiem myszy plik, a następnie wybierz polecenie Uruchom w przeglądarce).

  9. W przeglądarce wyświetl źródło strony. (Na przykład w programie Internet Explorer kliknij prawym przyciskiem myszy stronę, a następnie kliknij pozycję Wyświetl źródło).

    Dzięki temu można zobaczyć znaczniki strony internetowej wysyłane do przeglądarki, która łączy znaczniki strony indeksu z blokami zawartości. Poniższy przykład przedstawia źródło strony renderowane dla pliku Index.cshtml. Wywołania RenderPage wprowadzone do pliku Index.cshtml zostały zastąpione rzeczywistą zawartością plików nagłówka i stopki.

    <!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>

Tworzenie spójnego wyglądu przy użyciu stron układu

Do tej pory wiesz, że łatwo jest uwzględnić tę samą zawartość na wielu stronach. Bardziej ustrukturyzowane podejście do tworzenia spójnego wyszukiwania witryny polega na użyciu stron układu. Strona układu definiuje strukturę strony internetowej, ale nie zawiera żadnej rzeczywistej zawartości. Po utworzeniu strony układu można utworzyć strony internetowe zawierające zawartość, a następnie połączyć je ze stroną układu. Po wyświetleniu tych stron zostaną sformatowane zgodnie ze stroną układu. (W tym sensie strona układu działa jako rodzaj szablonu zawartości zdefiniowanej na innych stronach).

Strona układu jest taka sama jak każda strona HTML, z tą różnicą, że zawiera wywołanie RenderBody metody . Pozycja RenderBody metody na stronie układu określa, gdzie zostaną uwzględnione informacje ze strony zawartości.

Na poniższym diagramie pokazano, jak strony zawartości i strony układu są łączone w czasie wykonywania w celu utworzenia gotowej strony internetowej. Przeglądarka żąda strony zawartości. Strona zawartości zawiera w nim kod określający stronę układu do użycia dla struktury strony. Na stronie układu zawartość jest wstawiana w punkcie, w którym RenderBody wywoływana jest metoda. Bloki zawartości można również wstawić do strony układu, wywołując metodę RenderPage , tak jak w poprzedniej sekcji. Po zakończeniu strony internetowej zostanie ona wysłana do przeglądarki.

Zrzut ekranu przedstawiający stronę w przeglądarce, która wynika z uruchamiania strony zawierającej wywołania metody RenderBody.

Poniższa procedura pokazuje, jak utworzyć stronę układu i połączyć z nią strony zawartości.

  1. W folderze Udostępniony witryny internetowej utwórz plik o nazwie _Layout1.cshtml.

  2. Zastąp dowolną istniejącą zawartość następującymi elementami:

    <!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>

    Metoda jest używana RenderPage na stronie układu do wstawiania bloków zawartości. Strona układu może zawierać tylko jedno wywołanie RenderBody metody .

  3. W folderze Udostępniony utwórz plik o nazwie _Header2.cshtml i zastąp dowolną istniejącą zawartość następującymi elementami:

    <div id="header">Creating a Consistent Look</div>

  4. W folderze głównym utwórz nowy folder i nadaj mu nazwę Style.

  5. W folderze Styles utwórz plik o nazwie Site.css i dodaj następujące definicje stylu:

    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;
}

    Te definicje stylów są tutaj tylko w celu pokazania, jak arkusze stylów mogą być używane ze stronami układu. Jeśli chcesz, możesz zdefiniować własne style dla tych elementów.

  6. W folderze głównym utwórz plik o nazwie Content1.cshtml i zastąp dowolną istniejącą zawartość następującymi elementami:

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

    Jest to strona, która będzie używać strony układu. Blok kodu w górnej części strony wskazuje, która strona układu ma być używana do formatowania tej zawartości.

  7. Uruchom plik Content1.cshtml w przeglądarce. Renderowana strona używa formatu i arkusza stylów zdefiniowanego w pliku _Layout1.cshtml oraz tekstu (zawartości) zdefiniowanego w pliku Content1.cshtml.

    [Zrzut ekranu przedstawia uruchamianie pliku Content 1 dot CSHTML w przeglądarce.]

    Możesz powtórzyć krok 6, aby utworzyć dodatkowe strony zawartości, które mogą następnie współużytkować tę samą stronę układu.

    Uwaga

    Witrynę można skonfigurować tak, aby można było automatycznie używać tej samej strony układu dla wszystkich stron zawartości w folderze. Aby uzyskać szczegółowe informacje, zobacz Dostosowywanie zachowania Site-Wide dla stron sieci Web ASP.NET.

Projektowanie stron układu z wieloma sekcjami zawartości

Strona zawartości może zawierać wiele sekcji, co jest przydatne, jeśli chcesz używać układów z wieloma obszarami z zastępowalną zawartością. Na stronie zawartości nadasz każdej sekcji unikatową nazwę. (Domyślna sekcja jest pozostawiona bez nazwy). Na stronie układu dodasz metodę określającą RenderBody miejsce, w którym powinna pojawić się nienazwana (domyślna) sekcja. Następnie należy dodać oddzielne RenderSection metody w celu indywidualnego renderowania nazwanych sekcji.

Na poniższym diagramie pokazano, jak ASP.NET obsługuje zawartość podzieloną na wiele sekcji. Każda nazwana sekcja znajduje się w bloku sekcji na stronie zawartości. (Są one nazwane Header i List w przykładzie). Struktura wstawia sekcję zawartości do strony układu w punkcie, w którym RenderSection wywoływana jest metoda. Sekcja bez nazwy (domyślna) jest wstawiana w punkcie, w którym RenderBody jest wywoływana metoda, jak pokazano wcześniej.

Diagram koncepcyjny przedstawiający sposób, w jaki metoda RenderSection wstawia odwołania do sekcji na bieżącej stronie.

Ta procedura przedstawia sposób tworzenia strony zawartości zawierającej wiele sekcji zawartości oraz sposobu renderowania jej przy użyciu strony układu obsługującej wiele sekcji zawartości.

  1. W folderze Udostępnione utwórz plik o nazwie _Layout2.cshtml.

  2. Zastąp istniejącą zawartość następującymi elementami:

    <!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>

    Metoda służy do renderowania RenderSection sekcji nagłówka i listy.

  3. W folderze głównym utwórz plik o nazwie Content2.cshtml i zastąp istniejącą zawartość następującymi elementami:

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

    Ta strona zawartości zawiera blok kodu w górnej części strony. Każda nazwana sekcja znajduje się w bloku sekcji. Pozostała część strony zawiera domyślną (nienazwaną) sekcję zawartości.

  4. Uruchom plik Content2.cshtml w przeglądarce.

    Zrzut ekranu przedstawiający stronę w przeglądarce, która wynika z uruchamiania strony zawierającej wywołania metody RenderSection.

Opcjonalne tworzenie sekcji zawartości

Zwykle sekcje tworzone na stronie zawartości muszą być zgodne z sekcjami zdefiniowanymi na stronie układu. Jeśli wystąpi którykolwiek z następujących wystąpień, mogą wystąpić błędy:

  • Strona zawartości zawiera sekcję, która nie ma odpowiedniej sekcji na stronie układu.
  • Strona układu zawiera sekcję, dla której nie ma zawartości.
  • Strona układu zawiera wywołania metod, które próbują renderować tę samą sekcję więcej niż raz.

Można jednak zastąpić to zachowanie dla nazwanej sekcji, deklarując, że sekcja będzie opcjonalna na stronie układu. Dzięki temu można zdefiniować wiele stron zawartości, które mogą współużytkować stronę układu, ale mogą też nie zawierać zawartości dla określonej sekcji.

  1. Otwórz plik Content2.cshtml i usuń następującą sekcję:

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

  2. Zapisz stronę, a następnie uruchom ją w przeglądarce. Zostanie wyświetlony komunikat o błędzie, ponieważ strona zawartości nie udostępnia zawartości sekcji zdefiniowanej na stronie układu, a mianowicie sekcji nagłówka.

    Zrzut ekranu przedstawiający błąd, który występuje po uruchomieniu strony wywołującej metodę RenderSection, ale odpowiednia sekcja nie została podana.

  3. W folderze Udostępnione otwórz stronę _Layout2.cshtml i zastąp następujący wiersz:

    @RenderSection("header")

    z następującym kodem:

    @RenderSection("header", required: false)

    Alternatywnie można zastąpić poprzedni wiersz kodu następującym blokiem kodu, który generuje te same wyniki:

    @if (IsSectionDefined("header")) {
    @RenderSection("header")
}

  4. Ponownie uruchom stronę Content2.cshtml w przeglądarce. (Jeśli ta strona jest nadal otwarta w przeglądarce, możesz ją odświeżyć). Tym razem strona jest wyświetlana bez błędu, mimo że nie ma nagłówka.

Przekazywanie danych do stron układu

Dane mogą być zdefiniowane na stronie zawartości, do których należy się odwoływać na stronie układu. Jeśli tak, musisz przekazać dane ze strony zawartości do strony układu. Możesz na przykład wyświetlić stan logowania użytkownika lub pokazać lub ukryć obszary zawartości na podstawie danych wejściowych użytkownika.

Aby przekazać dane ze strony zawartości do strony układu, możesz umieścić wartości we PageData właściwości strony zawartości. Właściwość PageData jest kolekcją par nazwa/wartość, które przechowują dane, które mają być przekazywane między stronami. Na stronie układu można następnie odczytywać wartości z PageData właściwości.

Oto inny diagram. W tym artykule pokazano, jak ASP.NET może użyć PageData właściwości do przekazywania wartości ze strony zawartości do strony układu. Gdy ASP.NET rozpoczyna tworzenie strony internetowej, tworzy PageData kolekcję. Na stronie zawartości napiszesz kod do umieszczenia danych w kolekcji PageData . Dostęp do wartości w PageData kolekcji można również uzyskać za pomocą innych sekcji na stronie zawartości lub dodatkowych bloków zawartości.

Diagram koncepcyjny pokazujący, jak strona zawartości może wypełnić słownik PageData i przekazać te informacje do strony układu.

Poniższa procedura przedstawia sposób przekazywania danych ze strony zawartości do strony układu. Po uruchomieniu strony zostanie wyświetlony przycisk umożliwiający użytkownikowi ukrycie lub wyświetlenie listy zdefiniowanej na stronie układu. Gdy użytkownik kliknie przycisk, ustawi wartość true/false (wartość logiczna) we PageData właściwości . Strona układu odczytuje wartość, a jeśli jest to fałsz, ukrywa listę. Wartość jest również używana na stronie zawartości w celu określenia, czy ma być wyświetlany przycisk Ukryj listę , czy przycisk Pokaż listę .

[Zrzut ekranu przedstawia stronę Przekazywanie danych.]

  1. W folderze głównym utwórz plik o nazwie Content3.cshtml i zastąp istniejącą zawartość następującymi elementami:

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

    Kod przechowuje dwa fragmenty danych we PageData właściwości — tytuł strony internetowej i wartość true lub false, aby określić, czy ma być wyświetlana lista.

    Zwróć uwagę, że ASP.NET umożliwia warunkowe umieszczenie znaczników HTML na stronie przy użyciu bloku kodu. Na przykład blok w treści strony określa, który formularz ma być wyświetlany w zależności od tego, if/else czy PageData["ShowList"] ustawiono wartość true.

  2. W folderze Udostępnione utwórz plik o nazwie _Layout3.cshtml i zastąp dowolną istniejącą zawartość następującymi elementami:

    <!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>

    Strona układu zawiera wyrażenie w elemecie <title> , który pobiera wartość tytułu z PageData właściwości . Używa ShowList również wartości PageData właściwości, aby określić, czy ma być wyświetlany blok zawartości listy.

  3. W folderze Udostępnione utwórz plik o nazwie _List.cshtml i zastąp istniejącą zawartość następującymi elementami:

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

  4. Uruchom stronę Content3.cshtml w przeglądarce. Strona jest wyświetlana z listą widoczną po lewej stronie i przyciskiem Ukryj listę u dołu.

    Zrzut ekranu przedstawiający stronę zawierającą listę i przycisk z napisem

  5. Kliknij pozycję Ukryj listę. Lista zniknie, a przycisk zmieni się na Pokaż listę.

    Zrzut ekranu przedstawiający stronę, która nie zawiera listy i przycisk z napisem

  6. Kliknij przycisk Pokaż listę , a lista zostanie ponownie wyświetlona.

Dodatkowe zasoby

Dostosowywanie zachowania Site-Wide dla stron sieci Web ASP.NET