Tworzenie układów stron za pomocą stron wzorcowych widoku (C#)

przez Microsoft

Pobierz plik PDF

W tym samouczku dowiesz się, jak utworzyć wspólny układ strony dla wielu stron w aplikacji, korzystając z wyświetlania stron wzorcowych. Można użyć strony wzorcowej widoku, na przykład, aby zdefiniować układ strony dwukolumnowej i użyć układu dwukolumnowego dla wszystkich stron w aplikacji sieci web.

Tworzenie układów stron za pomocą wyświetlania stron wzorcowych

W tym samouczku dowiesz się, jak utworzyć wspólny układ strony dla wielu stron w aplikacji, korzystając z wyświetlania stron wzorcowych. Można użyć strony wzorcowej widoku, na przykład, aby zdefiniować układ strony dwukolumnowej i użyć układu dwukolumnowego dla wszystkich stron w aplikacji sieci web.

Można również skorzystać z wyświetlania stron wzorcowych, aby udostępniać wspólną zawartość na wielu stronach w aplikacji. Na przykład na stronie wzorcowej widoku można umieścić logo witryny sieci Web, łącza nawigacyjne i banery reklamowe. W ten sposób każda strona w aplikacji będzie wyświetlać tę zawartość automatycznie.

W tym samouczku dowiesz się, jak utworzyć nową stronę wzorcową widoku i utworzyć nową stronę zawartości widoku na podstawie strony wzorcowej.

Tworzenie strony wzorcowej widoku

Zacznijmy od utworzenia strony wzorcowej widoku, która definiuje układ dwukolumnowy. Nową stronę wzorcową widoku można dodać do projektu MVC, klikając prawym przyciskiem myszy folder Widoki\Folder udostępniony, wybierając opcję menu Dodaj, Nowy elementi wybierając szablon strony wzorcowej widoku MVC (patrz Rysunek 1).

Dodawanie strony wzorcowej widoku

Rysunek 01: Dodawanie strony wzorcowej widoku(Kliknij, aby wyświetlić pełnowymiarowy obraz)

W aplikacji można utworzyć więcej niż jedną stronę wzorcową widoku. Każda strona wzorcowa widoku może definiować inny układ strony. Na przykład można chcieć, aby niektóre strony miały układ dwukolumnowy, a inne strony miały układ trzykolumnowy.

Strona wzorcowa widoku wygląda bardzo podobnie do standardowego widoku ASP.NET MVC. Jednak w przeciwieństwie do widoku normalnego strona <asp:ContentPlaceHolder> wzorcowa widoku zawiera jeden lub więcej tagów. Znaczniki <contentplaceholder> służą do oznaczania obszarów strony wzorcowej, które można zastąpić na pojedynczej stronie zawartości.

Na przykład strona wzorcowa widoku w liście 1 definiuje układ dwukolumnowy. Zawiera dwa <contentplaceholder> znaczniki. Po <ContentPlaceHolder> jednym dla każdej kolumny.

Lista 1 –Views\Shared\Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title></title>

     <style type="text/css">

     html
     {
           background-color:gray;
     }

     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;

          min-height:500px;
     }

     </style>

     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
</head>
<body>

     <h1>My Website</h1>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>
     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>

</body>
</html>

Treść strony wzorcowej widoku w aukcji <div> 1 zawiera dwa znaczniki, które odpowiadają dwóm kolumnom. Klasa kolumny Kaskadowy arkusz stylów <div> jest stosowana do obu znaczników. Ta klasa jest zdefiniowana w arkuszu stylów zadeklarowanym w górnej części strony wzorcowej. Można wyświetlić podgląd sposobu renderowania strony wzorcowej widoku, przełączając się na widok Projekt. Kliknij kartę Projektowanie w lewym dolnym rogu edytora kodu źródłowego (zobacz rysunek 2).

Wyświetlanie podglądu strony wzorcowej w projektancie

Rysunek 02: Podgląd strony wzorcowej w projektancie(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Tworzenie strony wyświetlania zawartości

Po utworzeniu strony wzorcowej widoku można utworzyć jedną lub więcej stron zawartości widoku na podstawie strony wzorcowej widoku. Na przykład można utworzyć stronę zawartości widoku indeksu dla kontrolera macierzystego, klikając prawym przyciskiem myszy folder Widoki\Strona główna, wybierając polecenie Dodaj, Nowy element, wybierając szablon strony zawartości widoku MVC, wprowadzając nazwę Index.aspx i klikając przycisk Dodaj (patrz Rysunek 3).

Dodawanie strony zawartości widoku

Rysunek 03: Dodawanie strony zawartości widoku(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Po kliknięciu przycisku Dodaj zostanie wyświetlone nowe okno dialogowe umożliwiające wybranie strony wzorcowej widoku do skojarzenia ze stroną zawartości widoku (patrz Rysunek 4). Możesz przejść do strony wzorcowej widoku Site.master, którą utworzyliśmy w poprzedniej sekcji.

Wybieranie strony wzorcowej

Rysunek 04: Wybieranie strony wzorcowej(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Po utworzeniu nowej strony zawartości widoku na podstawie strony wzorcowej Site.master zostanie ono utworzone w wykazie 2.

Lista 2 –Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

Należy zauważyć, że <asp:Content> ten widok zawiera znacznik, który odpowiada każdemu z <asp:ContentPlaceHolder> tagów na stronie wzorcowej widoku. Każdy <asp:Content> tag zawiera atrybut ContentPlaceHolderID, który <asp:ContentPlaceHolder> wskazuje na określony, który zastępuje.

Należy ponadto zauważyć, że strona widoku zawartości w wykazie 2 nie zawiera żadnych zwykłych tagów HTML otwierania i zamykania. Na przykład nie zawiera otwierania <html> i <head> zamykania lub tagów. Wszystkie normalne znaczniki otwierania i zamykania znajdują się na stronie wzorcowej widoku.

Każda zawartość, którą chcesz wyświetlić na stronie zawartości <asp:Content> widoku, musi być umieszczona w tagu. Jeśli umieścisz dowolny kod HTML lub inną zawartość poza tymi tagami, podczas próby wyświetlenia strony zostanie wyświetlony błąd.

Nie trzeba zastępować każdego <asp:ContentPlaceHolder> tagu ze strony wzorcowej na stronie widoku zawartości. Wystarczy zastąpić <asp:ContentPlaceHolder> znacznik tylko wtedy, gdy chcesz zastąpić znacznik określoną zawartością.

Na przykład zmodyfikowany widok indeksu w aukcji <asp:Content> 3 zawiera tylko dwa tagi. Każdy z <asp:Content> tagów zawiera tekst.

Lista 3 –Views\Home\Index.aspx (modified)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <h1>Content in first column!</h1>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

     <h1>Content in second column!</h1>

</asp:Content>

Gdy żądany jest widok w aukcji 3, renderuje stronę na rysunku 5. Należy zauważyć, że widok renderuje stronę z dwiema kolumnami. Zwróć ponadto uwagę, że zawartość ze strony zawartości widoku jest scalana z zawartością ze stroną wzorcową widoku

Strona zawartość widoku indeksu

Rysunek 05: Strona zawartości widoku indeksu(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Modyfikowanie zawartości strony wzorcowej widoku

Jednym z problemów, które można napotkać niemal natychmiast podczas pracy ze stronami wzorcowymi widoku jest problem modyfikowania zawartości strony wzorcowej widoku, gdy wymagane są różne strony zawartości widoku. Na przykład chcesz, aby każda strona w aplikacji sieci web miała unikatowy tytuł. Jednak tytuł jest zadeklarowany na stronie wzorcowej widoku, a nie na stronie zawartości widoku. Jak więc dostosować tytuł strony dla każdej strony zawartości widoku?

Istnieją dwa sposoby modyfikowania tytułu wyświetlanego przez stronę zawartości widoku. Najpierw można przypisać tytuł strony do atrybutu <%@ page %> tytułu dyrektywy zadeklarowanego u góry strony zawartości widoku. Na przykład, jeśli chcesz przypisać tytuł strony "Super Great Website" do widoku indeksu, możesz dołączyć następującą dyrektywę w górnej części widoku indeksu:

<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
            autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>

Gdy widok indeksu jest renderowany w przeglądarce, żądany tytuł pojawia się na pasku tytułu przeglądarki:

Pasek tytułu przeglądarki

Istnieje jeden ważny wymóg, który musi spełniać strona widoku wzorcowego, aby atrybut title działał. Strona wzorcowa widoku <head runat="server"> musi zawierać znacznik <head> zamiast zwykłego znacznika nagłówka. Jeśli <head> tag nie zawiera atrybutu runat="server", tytuł nie będzie wyświetlany. Domyślna strona wzorcowa <head runat="server"> widoku zawiera wymagany tag.

Alternatywne podejście do modyfikowania zawartości strony wzorcowej z poszczególnych stron zawartości <asp:ContentPlaceHolder> widoku jest zawijanie regionu, który chcesz zmodyfikować w tagu. Załóżmy na przykład, że chcesz zmienić nie tylko tytuł, ale także metatagi renderowane przez stronę widoku wzorcowego. Strona widoku wzorcowego w <asp:ContentPlaceHolder> aukcji 4 zawiera znacznik w tagu. <head>

Lista 4 –Views\Shared\Site2.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

     <asp:ContentPlaceHolder ID="head" runat="server">
          <title>Please change my title</title>
          <meta name="description" content="Please provide a description" />
          <meta name="keywords" content="keyword1,keyword2" />
     </asp:ContentPlaceHolder>
</head>
<body>
     <div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

          </asp:ContentPlaceHolder>
     </div>
</body>
</html>

Należy zauważyć, że <asp:ContentPlaceHolder> tag w aukcji 4 zawiera zawartość domyślną: domyślny tytuł i domyślne metatagi. Jeśli ten <asp:ContentPlaceHolder> tag nie zostanie zastąpiony na stronie zawartości pojedynczego widoku, zostanie wyświetlona zawartość domyślna.

Strona widoku zawartości w aukcji 5 <asp:ContentPlaceHolder> zastępuje tag, aby wyświetlić niestandardowy tytuł i niestandardowe metatagi.

Lista 5 –Views\Home\Index2.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>The Index2 Page</title>
     <meta name="description" content="Description of Index2 page" />
     <meta name="keywords" content="asp.net,mvc,cool,groovy" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     Just some content in the body of the page.

</asp:Content>

Podsumowanie

W tym samouczku przedstawiono podstawowe wprowadzenie do wyświetlania stron wzorcowych i wyświetlania stron zawartości. Dowiedzialiśmy się, jak tworzyć nowe strony wzorcowe widoku i tworzyć na ich podstawie strony zawartości widoku. Zbadaliśmy również, jak można modyfikować zawartość strony wzorcowej widoku z określonej strony zawartości widoku.