Tworzenie układów stron za pomocą stron wzorcowych widoku (C#)
autor: Microsoft
Z tego samouczka dowiesz się, jak utworzyć wspólny układ strony dla wielu stron w aplikacji, korzystając ze stron wzorcowych widoku. Można na przykład użyć strony wzorcowej widoku, aby zdefiniować układ strony z dwiema kolumnami i użyć układu dwukolumna dla wszystkich stron w aplikacji internetowej.
Tworzenie układów stron za pomocą stron wzorcowych widoku
Z tego samouczka dowiesz się, jak utworzyć wspólny układ strony dla wielu stron w aplikacji, korzystając ze stron wzorcowych widoku. Można na przykład użyć strony wzorcowej widoku, aby zdefiniować układ strony z dwiema kolumnami i użyć układu dwukolumna dla wszystkich stron w aplikacji internetowej.
Możesz również skorzystać z widoków stron wzorcowych, aby udostępniać wspólną zawartość na wielu stronach w aplikacji. Możesz na przykład umieścić logo witryny internetowej, linki nawigacji i anonse banerów na stronie wzorcowej widoku. Dzięki temu każda strona w aplikacji będzie automatycznie wyświetlać tę zawartość.
Z tego samouczka 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 dwukolumny. Możesz dodać nową stronę wzorcową widoku do projektu MVC, klikając prawym przyciskiem myszy folder Views\Shared, wybierając opcję menu Dodaj, Nowy element i wybierając szablon strony wzorcowej widoku MVC (zobacz Rysunek 1).
Rysunek 01. Dodawanie strony wzorcowej widoku (kliknij, aby wyświetlić obraz pełnowymiarowy)
W aplikacji można utworzyć więcej niż jedną stronę wzorcową widoku. Każda strona wzorcowa widoku może definiować inny układ strony. Możesz na przykład chcieć, aby niektóre strony miały układ dwukolumny, a inne strony miały układ z trzema kolumnami.
Strona wzorcowa widoku wygląda bardzo podobnie jak standardowy widok MVC ASP.NET. Jednak w przeciwieństwie do normalnego widoku strona wzorcowa widoku zawiera jeden lub więcej <asp:ContentPlaceHolder> tagów. Tagi <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 na liście 1 definiuje układ dwukolumny. Zawiera dwa <contentplaceholder> tagi. Jeden <ContentPlaceHolder> 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 na liście 1 zawiera dwa <div> tagi, które odpowiadają dwóm kolumnom. Klasa kolumn kaskadowego arkusza stylów jest stosowana do obu <div> tagów. Ta klasa jest definiowana w arkuszu stylów zadeklarowanej w górnej części strony wzorcowej. Możesz wyświetlić podgląd sposobu renderowania strony wzorcowej widoku, przełączając się do widoku projektowego. Kliknij kartę Projekt w lewym dolnym rogu edytora kodu źródłowego (zobacz Rysunek 2).
Rysunek 02. Wyświetlanie podglądu strony wzorcowej w projektancie (kliknij, aby wyświetlić obraz pełnowymiarowy)
Tworzenie strony zawartości widoku
Po utworzeniu strony wzorcowej widoku można utworzyć co najmniej jedną stronę zawartości widoku na podstawie strony wzorcowej widoku. Na przykład możesz utworzyć stronę zawartości Widoku indeksu dla kontrolera strony głównej, klikając prawym przyciskiem myszy folder Views\Home, wybierając polecenie Dodaj, Nowy element, wybierając szablon strony zawartości widoku MVC , wprowadzając nazwę Index.aspx i klikając przycisk Dodaj (zobacz Rysunek 3).
Rysunek 03. Dodawanie strony zawartości widoku (kliknij, aby wyświetlić obraz pełnowymiarowy)
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 (zobacz Rysunek 4). Możesz przejść do strony wzorcowej Site.master view utworzonej w poprzedniej sekcji.
Rysunek 04. Wybieranie strony wzorcowej (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po utworzeniu nowej strony zawartości widoku na podstawie strony wzorcowej Site.master plik zostanie wyświetlony na liście 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>
Zwróć uwagę, że ten widok zawiera <asp:Content> tag odpowiadający każdemu tagowi <asp:ContentPlaceHolder> na stronie wzorcowej widoku. Każdy <asp:Content> tag zawiera atrybut ContentPlaceHolderID, który wskazuje określony <asp:ContentPlaceHolder> , który zastępuje.
Należy również zauważyć, że strona widoku zawartości na liście 2 nie zawiera żadnego z normalnych tagów otwierania i zamykania kodu HTML. Na przykład nie zawiera on otwierania i zamykania <html> ani <head> tagów. Wszystkie normalne tagi otwierania i zamykania znajdują się na stronie wzorcowej widoku.
Każda zawartość, która ma być wyświetlana na stronie zawartości widoku, musi zostać umieszczona w tagu <asp:Content> . Jeśli umieścisz 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. Musisz zastąpić <asp:ContentPlaceHolder> tag tylko wtedy, gdy chcesz zastąpić tag określoną zawartością.
Na przykład zmodyfikowany widok indeksu w liście 3 zawiera tylko dwa <asp:Content> tagi. Każdy z tagów <asp:Content> 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 jest żądany widok w liście 3, renderuje stronę na rysunku 5. Zwróć uwagę, że widok renderuje stronę z dwiema kolumnami. Zauważ ponadto, że zawartość ze strony zawartości widoku jest scalona z zawartością ze strony wzorcowej widoku
Rysunek 05. Strona zawartości widoku indeksu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Modyfikowanie zawartości strony wzorcowej widoku
Jednym z problemów, które występują niemal natychmiast podczas pracy ze stronami wzorcowymi widoku, jest problem z modyfikowaniem zawartości strony wzorcowej widoku, gdy są żądane różne strony zawartości widoku. Na przykład każda strona w aplikacji internetowej ma mieć 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 na stronie zawartości widoku. Najpierw można przypisać tytuł strony do atrybutu <%@ page %> title dyrektywy zadeklarowanej w górnej części strony zawartości widoku. Jeśli na przykład chcesz przypisać tytuł strony "Super Great Website" do widoku Indeks, możesz dołączyć następującą dyrektywę w górnej części widoku Indeks:
<%@ 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 Indeks jest renderowany w przeglądarce, żądany tytuł zostanie wyświetlony na pasku tytułu przeglądarki:
Istnieje jedno ważne wymaganie, aby strona widoku wzorcowego działała, aby atrybut title działał. Strona wzorcowa widoku musi zawierać <head runat="server"> tag zamiast normalnego <head> tagu nagłówka. <head> Jeśli tag nie zawiera atrybutu runat="server", tytuł nie będzie wyświetlany. Domyślna strona wzorcowa widoku zawiera wymagany <head runat="server"> tag.
Alternatywnym podejściem do modyfikowania zawartości strony wzorcowej z pojedynczej strony zawartości widoku jest opakowywanie regionu, który chcesz zmodyfikować w tagu <asp:ContentPlaceHolder> . Załóżmy na przykład, że chcesz zmienić nie tylko tytuł, ale także tagi meta renderowane przez stronę widoku wzorcowego. Strona widoku wzorcowego na liście 4 zawiera <asp:ContentPlaceHolder> tag w jego <head> tagu.
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>
Zwróć uwagę, że <asp:ContentPlaceHolder> tag na liście 4 zawiera zawartość domyślną: domyślny tytuł i domyślne tagi meta. Jeśli ten <asp:ContentPlaceHolder> tag nie zostanie zastąpiony na stronie zawartości pojedynczego widoku, zostanie wyświetlona domyślna zawartość.
Strona widoku zawartości na liście Lista 5 zastępuje <asp:ContentPlaceHolder> tag w celu wyświetlenia niestandardowego tytułu i niestandardowych tagów meta.
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
Ten samouczek zawiera podstawowe wprowadzenie do wyświetlania stron wzorcowych i wyświetlania stron zawartości. Wiesz już, jak tworzyć nowe strony wzorcowe widoku i tworzyć na ich podstawie strony zawartości widoku. Sprawdziliśmy również, jak można zmodyfikować zawartość strony wzorcowej widoku na określonej stronie zawartości widoku.
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla