Tworzenie układu dla całej witryny za pomocą stron wzorcowych (C#)

Autor : Scott Mitchell

Pobierz plik PDF

W tym samouczku zostaną wyświetlone podstawowe informacje o stronie wzorcowej. To, co to są strony wzorcowe, jak tworzy się stronę wzorcową, jakie są posiadacze miejsc zawartości, jak tworzy się stronę ASP.NET używającą strony wzorcowej, jak modyfikowanie strony wzorcowej jest automatycznie odzwierciedlane na skojarzonych stronach zawartości itd.

Wprowadzenie

Jednym z atrybutów dobrze zaprojektowanej witryny internetowej jest spójny układ strony dla całej witryny. Weźmy na przykład witrynę internetową www.asp.net. W momencie pisania tego tekstu każda strona ma tę samą zawartość w górnej i dolnej części strony. Jak pokazano na rysunku 1, w górnej części każdej strony jest wyświetlany szary pasek z listą społeczności microsoft. Poniżej logo witryny znajduje się lista języków, w których witryna została przetłumaczona, oraz podstawowe sekcje: Strona główna, Wprowadzenie, Nauka, Pliki do pobrania itd. Podobnie do dołu strony znajdują się informacje o reklamie na www.asp.net, oświadczenie o prawach autorskich oraz link do oświadczenia o ochronie prywatności.

Rysunek 01. Witryna internetowa www.asp.net korzysta ze spójnego wyglądu i działania na wszystkich stronach (kliknij, aby wyświetlić obraz pełnowymiarowy)

Innym atrybutem dobrze zaprojektowanej witryny jest łatwość zmiany wyglądu witryny. Rysunek 1 przedstawia stronę główną www.asp.net od marca 2008 r., ale od teraz do publikacji tego samouczka wygląd i działanie mogły ulec zmianie. Być może elementy menu u góry zostaną rozwinięte w celu uwzględnienia nowej sekcji dla platformy MVC. A może zostanie odsłonięty radykalnie nowy projekt z różnymi kolorami, czcionkami i układem. Zastosowanie takich zmian w całej witrynie powinno być szybkim i prostym procesem, który nie wymaga modyfikowania tysięcy stron internetowych tworzących witrynę.

Tworzenie szablonu strony dla całej witryny w ASP.NET jest możliwe za pomocą stron wzorcowych. W skrócie strona wzorcowa jest specjalnym typem strony ASP.NET definiującej znaczniki wspólne dla wszystkich stron zawartości , a także regionów, które można dostosowywać na podstawie strony zawartości po stronie zawartości. (Strona zawartości to strona ASP.NET powiązana ze stroną wzorcową). Za każdym razem, gdy układ lub formatowanie strony wzorcowej zostanie zmienione, wszystkie dane wyjściowe stron zawartości zostaną natychmiast zaktualizowane, co sprawia, że stosowanie zmian wyglądu w całej witrynie jest tak proste, jak aktualizowanie i wdrażanie pojedynczego pliku (a mianowicie strony wzorcowej).

Jest to pierwszy samouczek z serii samouczków, które eksplorują korzystanie ze stron wzorcowych. W trakcie tej serii samouczków wykonaliśmy następujące działania:

• Badanie tworzenia stron wzorcowych i skojarzonych z nimi stron zawartości,
• Omówienie różnych porad, wskazówek i pułapek,
• Identyfikowanie typowych pułapek strony wzorcowej i eksplorowanie obejść
• Zobacz, jak uzyskać dostęp do strony wzorcowej ze strony zawartości i na odwrót,
• Dowiedz się, jak określić stronę wzorcową strony zawartości w czasie wykonywania i
• Inne zaawansowane tematy strony wzorcowej.

Te samouczki są przeznaczone do zwięzłości i zawierają szczegółowe instrukcje z dużą ilością zrzutów ekranu, aby przejść przez proces wizualnie. Każdy samouczek jest dostępny w wersjach C# i Visual Basic oraz zawiera pobieranie kompletnego używanego kodu.

Ten inauguracyjny samouczek rozpoczyna się od zapoznania się z podstawami strony wzorcowej. Omówimy sposób działania stron wzorcowych, przyjrzymy się tworzeniu strony wzorcowej i skojarzonych stron zawartości przy użyciu programu Visual Web Developer oraz zobaczymy, jak zmiany strony wzorcowej są natychmiast odzwierciedlane na stronach zawartości. Zaczynamy!

Opis sposobu działania stron wzorcowych

Tworzenie witryny internetowej ze spójnym układem strony dla całej witryny wymaga, aby każda strona sieci Web emitowała wspólne znaczniki formatowania oprócz zawartości niestandardowej. Na przykład podczas gdy każdy wpis z samouczka lub forum na www.asp.net ma własną unikatową zawartość, każda z tych stron renderuje również serię typowych <div> elementów, które wyświetlają linki do sekcji najwyższego poziomu: Strona główna, Wprowadzenie, Nauka itd.

Istnieje wiele technik tworzenia stron internetowych ze spójnym wyglądem i działaniem. Naiwne podejście polega na tym, aby po prostu skopiować i wkleić wspólny znacznik układu do wszystkich stron internetowych, ale takie podejście ma wiele wad. Na początek za każdym razem, gdy jest tworzona nowa strona, należy pamiętać, aby skopiować i wkleić zawartość udostępnioną do strony. Takie operacje kopiowania i wklejania są dojrzałe w przypadku błędu, ponieważ można przypadkowo skopiować tylko podzestaw udostępnionej adiustacji do nowej strony. Ponadto, to podejście sprawia, że zastąpienie istniejącego wyglądu całej witryny nowym jest prawdziwym bólem, ponieważ każda strona w witrynie musi być edytowana, aby można było korzystać z nowego wyglądu i działania.

Przed ASP.NET w wersji 2.0 deweloperzy stron często umieszczali wspólne znaczniki w kontrolkach użytkownika , a następnie dodawali te kontrolki użytkownika do każdej strony. Takie podejście wymagało, aby deweloper strony pamiętał o ręcznym dodaniu kontrolek użytkownika do każdej nowej strony, ale zezwolono na łatwiejsze modyfikacje w całej witrynie, ponieważ podczas aktualizowania wspólnego znaczników należy zmodyfikować tylko kontrolki użytkownika. Niestety, programy Visual Studio .NET 2002 i 2003 — wersje programu Visual Studio używane do tworzenia aplikacji ASP.NET 1.x — renderowane kontrolki użytkownika w widoku projektowym jako szare pola. W związku z tym deweloperzy stron korzystający z tego podejścia nie korzystali ze środowiska projektowego WYSIWYG.

Wady używania kontrolek użytkownika zostały rozwiązane w ASP.NET wersji 2.0 i Visual Studio 2005 wraz z wprowadzeniem stron wzorcowych. Strona wzorcowa to specjalny typ strony ASP.NET, który definiuje zarówno znaczniki dla całej witryny, jak i regiony , w których skojarzone strony zawartości definiują ich niestandardowe znaczniki. Jak widać w kroku 1, te regiony są definiowane przez kontrolki ContentPlaceHolder. Kontrolka ContentPlaceHolder po prostu określa pozycję w hierarchii sterowania strony wzorcowej, w której zawartość niestandardowa może być wstrzykiwana przez stronę zawartości.

Uwaga

Podstawowe pojęcia i funkcje stron wzorcowych nie zmieniły się od czasu ASP.NET wersji 2.0. Jednak program Visual Studio 2008 oferuje obsługę czasu projektowania dla zagnieżdżonych stron wzorcowych— funkcji, której brakowało w programie Visual Studio 2005. W przyszłym samouczku przyjrzymy się używaniu zagnieżdżonych stron wzorcowych.

Rysunek 2 przedstawia, jak może wyglądać strona wzorcowa dla www.asp.net . Należy pamiętać, że strona wzorcowa definiuje wspólny układ całej witryny — znaczniki u góry, dolnej i prawej strony , a także contentPlaceHolder w lewym środkowym rogu, gdzie znajduje się unikatowa zawartość dla każdej pojedynczej strony internetowej.

Rysunek 02. Strona wzorcowa definiuje układ Site-Wide i regiony, które można edytować na podstawie strony zawartości według zawartości

Po zdefiniowaniu strony wzorcowej można ją powiązać z nowymi stronami ASP.NET za pośrednictwem znacznika pola wyboru. Te strony ASP.NET — nazywane stronami zawartości — zawierają kontrolkę Zawartość dla każdej kontrolki ContentPlaceHolder strony wzorcowej. Gdy strona zawartości jest odwiedzana za pośrednictwem przeglądarki, aparat ASP.NET tworzy hierarchię sterowania strony wzorcowej i wprowadza hierarchię sterowania strony zawartości do odpowiednich miejsc. Ta połączona hierarchia sterowania jest renderowana, a wynikowy kod HTML jest zwracany do przeglądarki użytkownika końcowego. W związku z tym strona zawartości emituje zarówno wspólny znacznik zdefiniowany na swojej stronie wzorcowej poza kontrolkami ContentPlaceHolder, jak i znaczniki specyficzne dla strony zdefiniowane we własnych kontrolkach Zawartość. Rysunek 3 ilustruje tę koncepcję.

Rysunek 03. Znaczniki żądanej strony są połączone ze stroną wzorcową (kliknij, aby wyświetlić obraz pełnowymiarowy)

Teraz, gdy omówiliśmy sposób działania stron wzorcowych, przyjrzyjmy się tworzeniu strony wzorcowej i skojarzonych stron zawartości przy użyciu programu Visual Web Developer.

Uwaga

Aby dotrzeć do najszerszych możliwych odbiorców, witryna internetowa ASP.NET, którą utworzymy w tej serii samouczków, zostanie utworzona przy użyciu ASP.NET 3.5 z bezpłatną wersją programu Visual Studio 2008, Visual Web Developer 2008. Jeśli nie przeprowadzono jeszcze uaktualnienia do wersji ASP.NET 3.5, nie martw się — koncepcje omówione w tych samouczkach działają równie dobrze z ASP.NET 2.0 i Visual Studio 2005. Jednak niektóre aplikacje demonstracyjne mogą używać nowych funkcji do .NET Framework w wersji 3.5. Gdy są używane funkcje specyficzne dla wersji 3.5, dołączam uwagę, która omawia sposób implementowania podobnych funkcji w wersji 2.0. Należy pamiętać, że aplikacje demonstracyjne dostępne do pobrania z każdego samouczka są przeznaczone dla .NET Framework wersji 3.5, co powoduje Web.config utworzenie pliku zawierającego 3,5-specyficzne elementy konfiguracji i odwołania do 3,5-specyficznych przestrzeni nazw w using instrukcjach w klasach kodowych stron ASP.NET. Długie opowiadanie, jeśli jeszcze nie zainstalowano platformy .NET 3.5 na komputerze, aplikacja internetowa do pobrania nie będzie działać bez uprzedniego usunięcia znaczników specyficznych dla wersji 3.5 z programu Web.config. Zobacz Web.config Plik, aby uzyskać więcej informacji na ten temat. Należy również usunąć instrukcje using odwołujące się do przestrzeni nazw specyficznych dla wersji 3.5.

Krok 1. Tworzenie strony wzorcowej

Zanim będziemy mogli eksplorować tworzenie i używanie stron wzorcowych i zawartości, najpierw potrzebujemy witryny internetowej ASP.NET. Zacznij od utworzenia nowej witryny internetowej ASP.NET opartej na systemie plików. Aby to osiągnąć, uruchom program Visual Web Developer, a następnie przejdź do menu Plik i wybierz pozycję Nowa witryna sieci Web, wyświetlając okno dialogowe Nowa witryna sieci Web (zobacz Rysunek 4). Wybierz szablon witryny sieci Web ASP.NET, ustaw listę rozwijaną Lokalizacja na System plików, wybierz folder, aby umieścić witrynę internetową, a następnie ustaw język na C#. Spowoduje to utworzenie nowej witryny sieci Web ze Default.aspx stroną ASP.NET, folderem App_Data i plikiem Web.config .

Uwaga

Program Visual Studio obsługuje dwa tryby zarządzania projektami: projekty witryn sieci Web i projekty aplikacji internetowych. Projekty witryn sieci Web nie zawierają pliku projektu, natomiast projekty aplikacji internetowych naśladują architekturę projektu w programie Visual Studio .NET 2002/2003 — zawierają one plik projektu i skompilują kod źródłowy projektu w jednym zestawie, który znajduje się w folderze /bin . Program Visual Studio 2005 początkowo obsługiwał tylko projekty witryn sieci Web, chociaż model projektu aplikacji internetowej został ponownie wprowadzony z dodatkiem Service Pack 1; Program Visual Studio 2008 oferuje oba modele projektów. Wersje Visual Web Developer 2005 i 2008 obsługują jednak tylko projekty witryn sieci Web. Używam modelu projektu witryny sieci Web dla moich pokazów w tej serii samouczków. Jeśli używasz wersji innej niż Express i zamiast tego chcesz użyć modelu projektu aplikacji internetowej, możesz to zrobić, ale pamiętaj, że mogą wystąpić pewne rozbieżności między tym, co widzisz na ekranie, a krokami, które należy wykonać w porównaniu z wyświetlanymi zrzutami ekranu i instrukcjami podanymi w tych samouczkach.

Rysunek 04. Tworzenie nowego pliku System-Based witrynie sieci Web (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Następnie dodaj stronę wzorcową do witryny w katalogu głównym, klikając prawym przyciskiem myszy nazwę projektu, wybierając polecenie Dodaj nowy element i wybierając szablon Strona wzorcowa. Pamiętaj, że strony wzorcowe kończą się rozszerzeniem .master. Nadaj nowej stronie wzorcowej Site.master nazwę i kliknij przycisk Dodaj.

Rysunek 05. Dodawanie strony wzorcowej o nazwie Site.master do witryny internetowej (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Dodanie nowego pliku strony wzorcowej za pomocą programu Visual Web Developer powoduje utworzenie strony wzorcowej z następującymi znacznikami deklaratywnymi:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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 runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

Pierwszą linią w znaczników deklaratywnych jest @Master dyrektywa. Dyrektywa jest podobna @Master do @Page dyrektywy , która pojawia się na ASP.NET stronach. Definiuje on język po stronie serwera (C#) oraz informacje o lokalizacji i dziedziczeniu klasy stojącej za kodem strony wzorcowej.

Znacznik DOCTYPE deklaratywny strony i pojawia się pod dyrektywą @Master . Strona zawiera statyczny kod HTML wraz z czterema kontrolkami po stronie serwera:

• Formularz sieci Web (formularz <form runat="server">) — ponieważ wszystkie strony ASP.NET zazwyczaj mają formularz sieci Web — i ponieważ strona wzorcowa może zawierać kontrolki sieci Web, które muszą znajdować się w formularzu sieci Web, pamiętaj o dodaniu formularza internetowego do strony wzorcowej (zamiast dodawania formularza internetowego do każdej strony zawartości).
• Kontrolka ContentPlaceHolder o nazwie ContentPlaceHolder1 — ta kontrolka ContentPlaceHolder jest wyświetlana w formularzu sieci Web i służy jako region interfejsu użytkownika strony zawartości.
• Element po stronie <head> serwera — <head> element ma runat="server" atrybut , dzięki czemu jest dostępny za pośrednictwem kodu po stronie serwera. Element <head> jest implementowany w ten sposób, aby tytuł strony i inne <head>powiązane znaczniki mogły zostać dodane lub dostosowane programowo. Na przykład ustawienie właściwości strony Title ASP.NET zmienia <title> element renderowany przez kontrolkę <head> serwera.
• Kontrolka ContentPlaceHolder o nazwie head — ta kontrolka ContentPlaceHolder jest wyświetlana w kontrolce <head> serwera i może służyć do deklaratywnego <head> dodawania zawartości do elementu.

Ten domyślny znacznik deklaratywny strony wzorcowej służy jako punkt wyjścia do projektowania własnych stron wzorcowych. Możesz edytować kod HTML lub dodać dodatkowe kontrolki sieci Web lub elementy ContentPlaceHolders do strony wzorcowej.

Uwaga

Podczas projektowania strony wzorcowej upewnij się, że strona wzorcowa zawiera formularz internetowy i że co najmniej jedna kontrolka ContentPlaceHolder jest wyświetlana w tym formularzu sieci Web.

Tworzenie prostego układu witryny

Rozwińmy Site.masterdomyślną deklaratywną adiustację, aby utworzyć układ witryny, w którym wszystkie strony współdzielą: wspólny nagłówek, lewą kolumnę z nawigacją, wiadomościami i inną zawartością w całej witrynie oraz stopkę z ikoną "Powered by Microsoft ASP.NET". Rysunek 6 przedstawia końcowy wynik strony wzorcowej, gdy jedna z jej stron zawartości jest wyświetlana za pośrednictwem przeglądarki. Czerwony region okręgowy na rysunku 6 jest specyficzny dla odwiedzanej strony (Default.aspx); druga zawartość jest definiowana na stronie wzorcowej i dlatego spójna na wszystkich stronach zawartości.

Rysunek 06. Strona wzorcowa definiuje znaczniki dla części górnej, lewej i dolnej (kliknij, aby wyświetlić obraz pełnowymiarowy)

Aby osiągnąć układ witryny pokazany na rysunku 6, zacznij od zaktualizowania Site.master strony wzorcowej tak, aby zawierała ona następujące znaczniki deklaratywne:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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 runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
</body>
</html>

Układ strony wzorcowej jest definiowany przy użyciu serii <div> elementów HTML. Zawiera topContent<div> znaczniki wyświetlane w górnej części każdej strony, natomiast mainContentelementy , leftContenti footerContent<div> są używane do wyświetlania zawartości strony, lewej kolumny i ikony "Obsługiwane przez firmę Microsoft ASP.NET". Oprócz dodawania tych <div> elementów zmieniono ID również nazwę właściwości podstawowej kontrolki ContentPlaceHolder z ContentPlaceHolder1 na MainContent.

Reguły formatowania i układu dla tych elementów assortowanych <div> są określane w pliku Styles.csskaskadowego arkusza stylów (CSS), który jest określony za pomocą <elementu linku> w elemecie głównym> strony wzorcowej<. Te różne reguły definiują wygląd i działanie każdego <div> elementu zanotowany powyżej. Na przykład element, topContent<div> który wyświetla tekst i link "Samouczki dotyczące stron wzorcowych", ma swoje reguły formatowania określone w Styles.css następujący sposób:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Jeśli korzystasz z tego pliku na komputerze, musisz pobrać towarzyszący kod tego samouczka i dodać Styles.css plik do projektu. Podobnie należy również utworzyć folder o nazwie Images i skopiować ikonę "Powered by Microsoft ASP.NET" z pobranej witryny demonstracyjnej do projektu.

Uwaga

Omówienie formatowania arkuszy CSS i stron internetowych wykracza poza zakres tego artykułu. Aby uzyskać więcej informacji na temat arkuszy CSS, zapoznaj się z samouczkami CSS na stronie W3Schools.com. Zachęcam również do pobrania tego samouczka towarzyszącego kodowi i odtwarzania z ustawieniami CSS, Styles.css aby zobaczyć efekty różnych reguł formatowania.

Tworzenie strony wzorcowej przy użyciu istniejącego szablonu projektu

Przez lata zbudowałem wiele ASP.NET aplikacji internetowych dla małych i średnich firm. Niektórzy klienci mieli istniejący układ lokacji, którego chcieli użyć; inni zatrudnili kompetentnego projektanta grafiki. Kilku powierzono mi projektowanie układu witryny internetowej. Jak pokazano na rysunku 6, zadanie programisty do zaprojektowania układu witryny internetowej jest zwykle tak mądre, jak posiadanie księgowych wykona operację otwartego serca, podczas gdy lekarz wykonuje podatki.

Na szczęście istnieją niezliczone witryny internetowe, które oferują bezpłatne szablony projektów HTML - Google zwróciło ponad sześć milionów wyników dla wyszukiwanego terminu "bezpłatne szablony witryn internetowych". Jednym z moich ulubionych jest OpenDesigns.org. Po znalezieniu wybranego szablonu witryny internetowej dodaj pliki CSS i obrazy do projektu witryny internetowej i zintegruj kod HTML szablonu ze stroną wzorcową.

Uwaga

Firma Microsoft oferuje również szereg bezpłatnych szablonów zestawu Start Kit ASP.NET Design , które integrują się z okno dialogowe Nowa witryna sieci Web w programie Visual Studio.

Krok 2. Tworzenie skojarzonych stron zawartości

Po utworzeniu strony wzorcowej możemy rozpocząć tworzenie ASP.NET stron powiązanych ze stroną wzorcową. Takie strony są określane jako strony zawartości.

Dodajmy nową stronę ASP.NET do projektu i powiążmy ją ze stroną wzorcową Site.master . Kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz opcję Dodaj nowy element. Wybierz szablon Formularza sieci Web, wprowadź nazwę About.aspx, a następnie zaznacz pole wyboru "Wybierz stronę wzorcową", jak pokazano na rysunku 7. Spowoduje to wyświetlenie okna dialogowego Wybieranie strony wzorcowej (zobacz Rysunek 8), z którego można wybrać stronę wzorcową do użycia.

Uwaga

Jeśli utworzono witrynę internetową ASP.NET przy użyciu modelu projektu aplikacji internetowej zamiast modelu projektu witryny sieci Web, pole wyboru "Wybierz stronę wzorcową" nie będzie widoczne w oknie dialogowym Dodawanie nowego elementu pokazanego na rysunku 7. Aby utworzyć stronę zawartości podczas korzystania z modelu projektu aplikacji internetowej, należy wybrać szablon Formularz zawartości sieci Web zamiast szablonu Formularz sieci Web. Po wybraniu szablonu Formularz zawartości sieci Web i kliknięciu przycisku Dodaj zostanie wyświetlone to samo okno dialogowe Wybieranie strony wzorcowej pokazane na rysunku 8.

Rysunek 07. Dodawanie nowej strony zawartości (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rysunek 08. Wybierz stronę wzorcową Site.master (kliknij, aby wyświetlić obraz pełnowymiarowy)

Jak pokazuje poniższy znacznik deklaratywny, nowa strona zawartości zawiera dyrektywę wskazującą @Page z powrotem na jej stronę wzorcową i kontrolkę Zawartość dla każdej kontrolki ContentPlaceHolder strony wzorcowej.

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Uwaga

W sekcji "Tworzenie prostego układu witryny" w kroku 1 zmieniono ContentPlaceHolder1 nazwę na MainContent. Jeśli nie zmieniono nazwy tej kontrolki ID ContentPlaceHolder w taki sam sposób, znacznik deklaratywny strony zawartości będzie nieznacznie różnić się od narzutu pokazanego powyżej. Druga kontrolka ContentPlaceHolderID Content będzie odzwierciedlać ID odpowiednią kontrolkę ContentPlaceHolder na stronie wzorcowej.

Podczas renderowania strony zawartości aparat ASP.NET musi połączyć kontrolki Zawartość strony za pomocą kontrolek ContentPlaceHolder strony wzorcowej. Aparat ASP.NET określa stronę wzorcową strony zawartości z atrybutu @PageMasterPageFile dyrektywy. Jak pokazuje powyższy znacznik, ta strona zawartości jest powiązana z elementem ~/Site.master.

Ponieważ strona wzorcowa ma dwie kontrolki ContentPlaceHolder — head i MainContent — Visual Web Developer wygenerowało dwie kontrolki zawartości. Każda kontrolka Zawartość odwołuje się do określonego elementu ContentPlaceHolder za pośrednictwem jego ContentPlaceHolderID właściwości.

Gdzie strony wzorcowe świecą na poprzednich technikach szablonów dla całej witryny, to obsługa czasu projektowania. Rysunek 9 przedstawia About.aspx stronę zawartości, która jest wyświetlana za pośrednictwem widoku Projektowania dla deweloperów sieci Web w programie Visual Web. Należy pamiętać, że gdy zawartość strony wzorcowej jest widoczna, jest wyszarana i nie można jej modyfikować. Kontrolki Zawartość odpowiadające symbolom ContentPlaceHolders strony wzorcowej można jednak edytować. Podobnie jak w przypadku każdej innej strony ASP.NET, można utworzyć interfejs strony zawartości, dodając kontrolki sieci Web za pomocą widoków źródła lub projektu.

Rysunek 09. Widok projektu strony zawartości zawiera zarówno Page-Specific, jak i zawartość strony wzorcowej (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dodawanie kontrolek znaczników i kontrolek sieci Web do strony zawartości

Poświęć chwilę na utworzenie zawartości strony About.aspx . Jak widać na rysunku 10, wprowadzono nagłówek "Informacje o autorze" i kilka akapitów tekstu, ale możesz też dodawać kontrolki sieci Web. Po utworzeniu tego interfejsu About.aspx odwiedź stronę za pośrednictwem przeglądarki.

Rysunek 10. Odwiedź About.aspx stronę za pośrednictwem przeglądarki (kliknij, aby wyświetlić obraz pełnowymiarowy)

Ważne jest, aby zrozumieć, że żądana strona zawartości i skojarzona ze sobą strona wzorcowa są połączone i renderowane jako całość całkowicie na serwerze internetowym. Przeglądarka użytkownika końcowego jest następnie wysyłana wynikowy kod HTML. Aby to sprawdzić, wyświetl kod HTML odebrany przez przeglądarkę, przechodząc do menu Widok i wybierając pozycję Źródło. Należy pamiętać, że nie ma ramek ani żadnych innych wyspecjalizowanych technik wyświetlania dwóch różnych stron internetowych w jednym oknie.

Wiązanie strony wzorcowej z istniejącą stroną ASP.NET

Jak pokazano w tym kroku, dodanie nowej strony zawartości do aplikacji internetowej ASP.NET jest tak proste, jak zaznaczenie pola wyboru "Wybierz stronę wzorcową" i wybranie strony wzorcowej. Niestety konwertowanie istniejącej strony ASP.NET na stronę wzorcową nie jest tak proste.

Aby powiązać stronę wzorcową z istniejącą stroną ASP.NET, należy wykonać następujące kroki:

1. MasterPageFile Dodaj atrybut do dyrektywy strony @Page ASP.NET, wskazując ją na odpowiednią stronę wzorcową.
2. Dodaj kontrolki Zawartość dla każdego elementu ContentPlaceHolders na stronie wzorcowej.
3. Selektywne wycinanie i wklejanie istniejącej zawartości strony ASP.NET do odpowiednich kontrolek Zawartość. Mówię tutaj "selektywnie", ponieważ strona ASP.NET prawdopodobnie zawiera adiustację, która jest już wyrażona przez stronę wzorcową, taką jak DOCTYPE, <html> element i formularz internetowy.

Aby uzyskać instrukcje krok po kroku dotyczące tego procesu wraz ze zrzutami ekranu, zapoznaj się z samouczkiem Scott Guthrie'sUsing Master Pages and Site Navigation (Korzystanie ze stron wzorcowych i nawigacji witryny). Sekcja "Aktualizowanie Default.aspx i DataSample.aspx używanie strony wzorcowej" zawiera szczegółowe informacje na temat tych kroków.

Ponieważ znacznie łatwiej jest tworzyć nowe strony zawartości niż jest konwertowanie istniejących stron ASP.NET na strony zawartości, zaleca się, aby za każdym razem, gdy tworzysz nową witrynę internetową ASP.NET dodać stronę wzorcową do witryny. Powiąż wszystkie nowe strony ASP.NET z tą stroną wzorcową. Nie martw się, jeśli początkowa strona wzorcowa jest bardzo prosta lub zwykła; możesz zaktualizować stronę wzorcową później.

Uwaga

Podczas tworzenia nowej aplikacji ASP.NET program Visual Web Developer dodaje Default.aspx stronę, która nie jest powiązana ze stroną wzorcową. Jeśli chcesz przećwiczyć konwertowanie istniejącej strony ASP.NET na stronę zawartości, przejdź do przodu i zrób to za pomocą Default.aspxpolecenia . Alternatywnie możesz je usunąć Default.aspx , a następnie ponownie dodać, ale tym razem zaznacz pole wyboru "Wybierz stronę wzorcową".

Krok 3. Aktualizowanie znaczników strony wzorcowej

Jedną z podstawowych zalet stron wzorcowych jest to, że jedna strona wzorcowa może służyć do definiowania ogólnego układu dla wielu stron w witrynie. W związku z tym aktualizowanie wyglądu i działania witryny wymaga zaktualizowania pojedynczego pliku — strony wzorcowej.

Aby zilustrować to zachowanie, zaktualizujmy naszą stronę wzorcową, aby uwzględnić bieżącą datę w górnej części lewej kolumny. Dodaj etykietę o nazwie DateDisplay do elementu leftContent<div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Następnie utwórz procedurę Page_Load obsługi zdarzeń dla strony wzorcowej i dodaj następujący kod:

protected void Page_Load(object sender, EventArgs e)
{
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
}

Powyższy kod ustawia właściwość Label Text na bieżącą datę i godzinę sformatowaną jako dzień tygodnia, nazwę miesiąca i dwucyfrowy dzień (patrz Rysunek 11). Po tej zmianie ponownie zapoznaj się z jedną ze stron zawartości. Jak pokazano na rysunku 11, wynikowy znacznik jest natychmiast aktualizowany w celu uwzględnienia zmiany na stronie wzorcowej.

Rysunek 11. Zmiany strony wzorcowej są odzwierciedlane podczas wyświetlania strony zawartości (kliknij, aby wyświetlić obraz pełnowymiarowy)

Uwaga

Jak pokazano w tym przykładzie, strony wzorcowe mogą zawierać kontrolki sieci Web po stronie serwera, kod i procedury obsługi zdarzeń.

Podsumowanie

Strony wzorcowe umożliwiają deweloperom ASP.NET projektowanie spójnego układu obejmującego całą witrynę, który można łatwo aktualizować. Tworzenie stron wzorcowych i skojarzonych z nimi stron zawartości jest tak proste, jak tworzenie standardowych stron ASP.NET, ponieważ program Visual Web Developer oferuje zaawansowaną obsługę czasu projektowania.

Przykład strony wzorcowej utworzony w tym samouczku miał dwie kontrolki head ContentPlaceHolder i MainContent. Na naszej stronie zawartości określono tylko znaczniki kontrolki MainContent ContentPlaceHolder. W następnym samouczku przyjrzymy się użyciu wielu kontrolek Zawartość na stronie zawartości. Widzimy również, jak zdefiniować domyślne znaczniki dla kontrolek Zawartość na stronie wzorcowej, a także jak przełączać się między użyciem domyślnego znaczników zdefiniowanego na stronie wzorcowej i podawania niestandardowych znaczników na stronie zawartości.

Szczęśliwe programowanie!

Dalsze informacje

Aby uzyskać więcej informacji na temat tematów omówionych w tym samouczku, zapoznaj się z następującymi zasobami:

• ASP.NET dla projektantów: bezpłatne szablony projektowe i wskazówki dotyczące tworzenia witryn internetowych ASP.NET przy użyciu standardów sieci Web
• omówienie stron wzorcowych ASP.NET
• Samouczki kaskadowe arkuszy stylów (CSS)
• Dynamiczne ustawianie tytułu strony
• Strony wzorcowe w ASP.NET
• Samouczki Szybki start dotyczące stron wzorcowych

Informacje o autorze

Scott Mitchell, autor wielu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 3,5 w ciągu 24 godzin. Scott można dotrzeć na mitchell@4GuysFromRolla.com lub za pośrednictwem swojego bloga pod adresem http://ScottOnWriting.NET.

Specjalne podziękowania

Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.

Dalej