Strony wzorcowe i nawigacja po witrynie (C#)
Jedną z typowych cech witryn internetowych przyjaznych dla użytkownika jest to, że mają spójny, szeroki układ strony i schemat nawigacji. W tym samouczku przedstawiono sposób tworzenia spójnego wyglądu i działania na wszystkich stronach, które można łatwo zaktualizować.
Wprowadzenie
Jedną z typowych cech witryn internetowych przyjaznych dla użytkownika jest to, że mają spójny, szeroki układ strony i schemat nawigacji. ASP.NET 2.0 wprowadzono dwie nowe funkcje, które znacznie upraszczają implementowanie zarówno układu strony całej witryny, jak i schematu nawigacji: stron wzorcowych i nawigacji witryny. Strony wzorcowe umożliwiają deweloperom tworzenie szablonu obejmującego całą witrynę z wyznaczonymi regionami edytowalnymi. Ten szablon można następnie zastosować do stron ASP.NET w witrynie. Takie strony ASP.NET muszą udostępniać zawartość tylko określonym regionom edytowalnym strony wzorcowej wszystkie inne znaczniki na stronie wzorcowej są identyczne we wszystkich stronach ASP.NET korzystających ze strony wzorcowej. Ten model umożliwia deweloperom definiowanie i scentralizowanie układu całej witryny, co ułatwia tworzenie spójnego wyglądu i działania na wszystkich stronach, które można łatwo zaktualizować.
System nawigacji lokacji udostępnia zarówno mechanizm dla deweloperów stron do definiowania mapy witryny, jak i interfejsu API dla tej mapy witryny do programowego odpytywania. Nowa nawigacja Sieci Web kontroluje menu, TreeView i SiteMapPath ułatwiają renderowanie wszystkich lub części mapy witryny w typowym elemecie interfejsu użytkownika nawigacji. Użyjemy domyślnego dostawcy nawigacji witryny, co oznacza, że nasza mapa witryny zostanie zdefiniowana w pliku sformatowanym w formacie XML.
Aby zilustrować te pojęcia i uczynić naszą witrynę internetową samouczków bardziej użytecznymi, wydajmy tę lekcję definiującą układ strony w całej witrynie, implementowanie mapy witryny i dodawanie interfejsu użytkownika nawigacji. Na koniec tego samouczka będziemy mieli dopracowany projekt witryny internetowej do tworzenia stron internetowych samouczka.
Rysunek 1. Wynik końcowy tego samouczka (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Krok 1. Tworzenie strony wzorcowej
Pierwszym krokiem jest utworzenie strony wzorcowej witryny. W tej chwili nasza witryna internetowa składa się tylko z typu zestawu danych (Northwind.xsdw folderze), klas BLL (, CategoriesBLL.csitd., wszystkie w App_Code folderze), bazy danych (ProductsBLL.csNORTHWND.MDF, w App_Data folderze), pliku konfiguracji (Web.config) i pliku arkusza stylów CSS (Styles.css).App_Code Wyczyszczone te strony i pliki demonstrujące przy użyciu dal i BLL z pierwszych dwóch samouczków, ponieważ będziemy ponownie omawiać te przykłady bardziej szczegółowo w przyszłych samouczkach.
Rysunek 2. Pliki w naszym projekcie
Aby utworzyć stronę wzorcową, kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz pozycję Dodaj nowy element. Następnie wybierz typ strony wzorcowej z listy szablonów i nadaj mu Site.masternazwę .
Rysunek 3. Dodawanie nowej strony wzorcowej do witryny internetowej (kliknij, aby wyświetlić obraz pełnowymiarowy)
Zdefiniuj układ strony całej witryny tutaj na stronie wzorcowej. Możesz użyć widoku Projekt i dodać dowolne potrzebne kontrolki Układ lub Sieć Web. Możesz też ręcznie dodać znaczniki ręcznie w widoku Źródło. Na mojej stronie wzorcowej używam kaskadowych arkuszy stylów do pozycjonowania i stylów z ustawieniami CSS zdefiniowanymi w pliku Style.csszewnętrznym . Chociaż nie można powiedzieć z znaczników pokazanych poniżej, reguły CSS są zdefiniowane tak, że zawartość nawigacji <div>jest absolutnie umieszczona tak, aby była wyświetlana po lewej stronie i ma stałą szerokość 200 pikseli.
Site.master
<%@ 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>Working with Data Tutorials</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Working with Data Tutorials</span>
<span class="breadcrumb">
TODO: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent"
runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
TODO: Menu will go here...
</div>
</form>
</div>
</body>
</html>
Strona wzorcowa definiuje zarówno statyczny układ strony, jak i regiony, które można edytować na stronach ASP.NET korzystających ze strony wzorcowej. Te regiony edytowalne zawartości są wskazywane przez kontrolkę ContentPlaceHolder, która może być widoczna w zawartości <div>. Nasza strona wzorcowa ma jeden element ContentPlaceHolder (MainContent), ale strona wzorcowa może mieć wiele symboli ContentPlaceHolder.
Po wprowadzeniu powyższych znaczników przełączenie do widoku Projekt pokazuje układ strony wzorcowej. Wszystkie strony ASP.NET korzystające z tej strony wzorcowej będą miały ten jednolity układ z możliwością określenia znaczników dla MainContent regionu.
Rysunek 4. Strona wzorcowa po wyświetleniu widoku projektu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Krok 2. Dodawanie strony głównej do witryny internetowej
Po zdefiniowaniu strony wzorcowej możemy dodać strony ASP.NET dla witryny internetowej. Zacznijmy od dodania Default.aspxstrony głównej naszej witryny internetowej. Kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań i wybierz pozycję Dodaj nowy element. Wybierz opcję Formularz internetowy z listy szablonów i nadaj plikowi Default.aspxnazwę . Zaznacz również pole wyboru "Wybierz stronę wzorcową".
Rysunek 5. Dodawanie nowego formularza internetowego, sprawdzanie pola wyboru Wybierz stronę wzorcową (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po kliknięciu przycisku OK zostanie wyświetlony monit o wybranie strony wzorcowej, której powinna używać ta nowa strona ASP.NET. Chociaż w projekcie można mieć wiele stron wzorcowych, mamy tylko jedną stronę.
Rysunek 6. Wybierz stronę wzorcową, która ma być używana ASP.NET (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po wybraniu strony wzorcowej nowe strony ASP.NET będą zawierać następujące znaczniki:
Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
Runat="Server">
</asp:Content>
@Page W dyrektywie istnieje odwołanie do używanego pliku strony wzorcowej (MasterPageFile="~/Site.master"), a znaczniki strony ASP.NET zawierają kontrolkę Zawartość dla każdej kontrolki ContentPlaceHolder zdefiniowanej na stronie wzorcowej z ContentPlaceHolderID mapowaniem kontrolki Zawartość na określony element ContentPlaceHolder. Kontrolka Zawartość to miejsce, w którym umieszczasz znaczniki, które mają być wyświetlane w odpowiednim elemecie ContentPlaceHolder. @Page Ustaw atrybut dyrektywy Title na Home i dodaj pewną przyjazną zawartość do kontrolki Zawartość:
Default.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
Runat="Server">
<h1>Welcome to the Working with Data Tutorial Site</h1>
<p>This site is being built as part of a set of tutorials that
illustrate some of the new data access and databinding features in
ASP.NET 2.0 and Visual Web Developer.</p>
<p>Over time, it will include a host of samples that
demonstrate:</p>
<ul>
<li>Building a DAL (data access layer),</li>
<li>Using strongly typed TableAdapters and DataTables</li>
<li>Master-Detail reports</li>
<li>Filtering</li>
<li>Paging,</li>
<li>Two-way databinding,</li>
<li>Editing,</li>
<li>Deleting,</li>
<li>Inserting,</li>
<li>Hierarchical data browsing,</li>
<li>Hierarchical drill-down,</li>
<li>Optimistic concurrency,</li>
<li>And more!</li>
</ul>
</asp:Content>
Atrybut Title w @Page dyrektywie umożliwia ustawienie tytułu strony ze strony ASP.NET, mimo że <title> element jest zdefiniowany na stronie wzorcowej. Tytuł można również ustawić programowo przy użyciu polecenia Page.Title. Należy również zauważyć, że odwołania strony wzorcowej do arkuszy stylów (takich jak Style.css) są automatycznie aktualizowane, tak aby działały na dowolnej stronie ASP.NET, niezależnie od tego, jaki katalog znajduje się na stronie ASP.NET względem strony wzorcowej.
Przełączenie do widoku projektowego widzimy, jak będzie wyglądać nasza strona w przeglądarce. Należy pamiętać, że w widoku Projekt dla strony ASP.NET tylko regiony edytowalne zawartości można edytować znaczniki inne niż ContentPlaceHolder zdefiniowane na stronie wzorcowej są wyszarywane.
Rysunek 7. Widok projektu strony ASP.NET przedstawia zarówno regiony edytowalne, jak i niezmodalne (kliknij, aby wyświetlić obraz pełnowymiarowy)
Default.aspx Po odwiedzeniu strony przez przeglądarkę aparat ASP.NET automatycznie scala zawartość strony wzorcowej i asp. Zawartość platformy NET i renderuje scaloną zawartość do końcowego kodu HTML wysyłanego do przeglądarki żądającej. Po zaktualizowaniu zawartości strony wzorcowej wszystkie strony ASP.NET korzystające z tej strony wzorcowej będą miały zawartość remerged z nową zawartością strony wzorcowej przy następnym żądaniu. Krótko mówiąc, model strony wzorcowej umożliwia zdefiniowanie szablonu układu pojedynczej strony (strony wzorcowej), którego zmiany są natychmiast odzwierciedlane w całej witrynie.
Dodawanie dodatkowych stron ASP.NET do witryny internetowej
Poświęćmy chwilę, aby dodać dodatkowe wycinki strony ASP.NET do witryny, która ostatecznie będzie przechowywać różne pokazy raportowania. W sumie będzie więcej niż 35 pokazów, więc zamiast tworzyć wszystkie strony wycinków po prostu utwórzmy kilka pierwszych. Ponieważ będzie również wiele kategorii pokazów, aby lepiej zarządzać pokazami, dodaj folder dla kategorii. Dodaj na razie następujące trzy foldery:
BasicReportingFilteringCustomFormatting
Na koniec dodaj nowe pliki, jak pokazano na Eksplorator rozwiązań na rysunku 8. Podczas dodawania każdego pliku pamiętaj, aby zaznaczyć pole wyboru "Wybierz stronę wzorcową".
Rysunek 8. Dodawanie następujących plików
Krok 2. Tworzenie mapy witryny
Jednym z wyzwań związanych z zarządzaniem witryną internetową składającą się z ponad kilku stron jest zapewnienie prostego sposobu na poruszanie się po witrynie przez odwiedzających. Na początek należy zdefiniować strukturę nawigacji witryny. Następnie ta struktura musi zostać przetłumaczona na elementy interfejsu użytkownika z możliwością nawigacji, takie jak menu lub paski do stron nadrzędnych. Na koniec cały ten proces musi być utrzymywany i aktualizowany w miarę dodawania nowych stron do witryny i istniejących usuniętych. Przed ASP.NET 2.0 deweloperzy byli sami w celu utworzenia struktury nawigacji witryny, utrzymania jej i tłumaczenia na elementy interfejsu użytkownika z możliwością nawigacji. Jednak dzięki ASP.NET 2.0 deweloperzy mogą korzystać z bardzo elastycznego wbudowanego systemu nawigacji lokacji.
System nawigacji lokacji ASP.NET 2.0 zapewnia deweloperowi sposób definiowania mapy lokacji, a następnie uzyskiwania dostępu do tych informacji za pośrednictwem programowego interfejsu API. ASP.NET dostarczane z dostawcą mapy lokacji, który oczekuje, że dane mapy witryny będą przechowywane w pliku XML sformatowanym w określony sposób. Jednak ponieważ system nawigacji lokacji jest oparty na modelu dostawcy , można go rozszerzyć, aby obsługiwać alternatywne sposoby serializacji informacji o mapie lokacji. Artykuł Jeff Prosise, Dostawca mapy lokacji SQL You've Waiting For pokazuje, jak utworzyć dostawcę mapy lokacji, który przechowuje mapę lokacji w bazie danych SQL Server; inną opcją jest utworzenie dostawcy mapy lokacji na podstawie struktury systemu plików.
W tym samouczku użyjemy jednak domyślnego dostawcy mapy witryny, który jest dostarczany z ASP.NET 2.0. Aby utworzyć mapę witryny, po prostu kliknij prawym przyciskiem myszy nazwę projektu w Eksplorator rozwiązań, wybierz pozycję Dodaj nowy element i wybierz opcję Mapa witryny. Pozostaw nazwę jako Web.sitemap i kliknij przycisk Dodaj.
Rysunek 9. Dodawanie mapy witryny do projektu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Plik mapy witryny jest plikiem XML. Należy pamiętać, że program Visual Studio udostępnia funkcję IntelliSense dla struktury mapy witryny. Plik mapy witryny musi mieć <siteMap> węzeł jako węzeł główny, który musi zawierać dokładnie jeden <siteMapNode> element podrzędny. Ten pierwszy <siteMapNode> element może następnie zawierać dowolną liczbę elementów malejących <siteMapNode> .
Zdefiniuj mapę witryny, aby naśladować strukturę systemu plików. Oznacza to, że dodaj <siteMapNode> element dla każdego z trzech folderów i elementy podrzędne <siteMapNode> dla każdego z ASP.NET stron w tych folderach, w następujący sposób:
Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home" description="Home">
<siteMapNode title="Basic Reporting"
url="~/BasicReporting/Default.aspx"
description="Basic Reporting Samples">
<siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
title="Simple Display"
description="Displays the complete contents
of a database table." />
<siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
title="Declarative Parameters"
description="Displays a subset of the contents
of a database table using parameters." />
<siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
title="Setting Parameter Values"
description="Shows how to set parameter values
programmatically." />
</siteMapNode>
<siteMapNode title="Filtering Reports"
url="~/Filtering/Default.aspx"
description="Samples of Reports that Support Filtering">
<siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
title="Filter by Drop-Down List"
description="Filter results using a drop-down list." />
<siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
title="Master-Details-Details"
description="Filter results two levels down." />
<siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
title="Details of Selected Row"
description="Show detail results for a selected item in a GridView." />
</siteMapNode>
<siteMapNode title="Customized Formatting"
url="~/CustomFormatting/Default.aspx"
description="Samples of Reports Whose Formats are Customized">
<siteMapNode url="~/CustomFormatting/CustomColors.aspx"
title="Format Colors"
description="Format the grid s colors based
on the underlying data." />
<siteMapNode
url="~/CustomFormatting/GridViewTemplateField.aspx"
title="Custom Content in a GridView"
description="Shows using the TemplateField to
customize the contents of a field in a GridView." />
<siteMapNode
url="~/CustomFormatting/DetailsViewTemplateField.aspx"
title="Custom Content in a DetailsView"
description="Shows using the TemplateField to customize
the contents of a field in a DetailsView." />
<siteMapNode url="~/CustomFormatting/FormView.aspx"
title="Custom Content in a FormView"
description="Illustrates using a FormView for a
highly customized view." />
<siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
title="Summary Data in Footer"
description="Display summary data in the grids footer." />
</siteMapNode>
</siteMapNode>
</siteMap>
Mapa witryny definiuje strukturę nawigacji witryny internetowej, która jest hierarchią opisującą różne sekcje witryny. Każdy <siteMapNode> element w programie Web.sitemap reprezentuje sekcję w strukturze nawigacji witryny.
Rysunek 10. Mapa lokacji reprezentuje hierarchiczną strukturę nawigacji (kliknij, aby wyświetlić obraz pełnowymiarowy)
ASP.NET uwidacznia strukturę mapy witryny za pośrednictwem klasy SiteMap .NET Framework. Ta klasa ma CurrentNode właściwość, która zwraca informacje o sekcji, którą użytkownik aktualnie odwiedza. RootNode Właściwość zwraca katalog główny mapy witryny (Strona główna, na naszej mapie witryny). CurrentNode Zarówno właściwości i RootNode zwracają wystąpienia SiteMapNode, które mają właściwości takie jak ParentNode, , ChildNodesNextSibling, , PreviousSiblingi tak dalej, które umożliwiają przejście hierarchii mapy lokacji.
Krok 3. Wyświetlanie menu na podstawie mapy witryny
Dostęp do danych w ASP.NET 2.0 można wykonać programowo, na przykład w ASP.NET 1.x lub deklaratywnie, za pośrednictwem nowych kontrolek źródła danych. Istnieje kilka wbudowanych kontrolek źródła danych, takich jak kontrolka SqlDataSource, na potrzeby uzyskiwania dostępu do danych relacyjnych baz danych, kontrolki ObjectDataSource, uzyskiwania dostępu do danych z klas i innych. Możesz nawet utworzyć własne niestandardowe kontrolki źródła danych.
Kontrolki źródła danych pełnią rolę serwera proxy między stroną ASP.NET a danymi bazowymi. W celu wyświetlenia pobranych danych kontrolki źródła danych zwykle dodamy kolejną kontrolkę sieci Web do strony i powiązamy ją z kontrolą źródła danych. Aby powiązać kontrolkę Sieci Web z kontrolką źródła danych, wystarczy ustawić właściwość kontrolki DataSourceID sieci Web na wartość właściwości kontrolki ID źródła danych.
Aby ułatwić pracę z danymi mapy witryny, ASP.NET zawiera kontrolkę SiteMapDataSource, która umożliwia powiązanie kontrolki sieci Web z mapą witryny naszej witryny. Dwie kontrolki sieci Web TreeView i Menu są często używane do zapewniania interfejsu użytkownika nawigacji. Aby powiązać dane mapy witryny z jedną z tych dwóch kontrolek, wystarczy dodać element SiteMapDataSource do strony wraz z kontrolką TreeView lub Menu, której DataSourceID właściwość jest ustawiona odpowiednio. Na przykład można dodać kontrolkę Menu do strony wzorcowej przy użyciu następujących znaczników:
<div id="navigation">
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
Aby uzyskać bardziej precyzyjną kontrolę nad emitowanym kodem HTML, możemy powiązać kontrolkę SiteMapDataSource z kontrolką Repeater, w następujący sposób:
<div id="navigation">
<ul>
<li><asp:HyperLink runat="server" ID="lnkHome"
NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>
<asp:Repeater runat="server" ID="menu"
DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink runat="server"
NavigateUrl='<%# Eval("Url") %>'>
<%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" ShowStartingNode="false" />
</div>
Kontrolka SiteMapDataSource zwraca hierarchię mapy lokacji jeden poziom naraz, począwszy od węzła mapy witryny głównej (Strona główna, na mapie witryny), a następnie następnego poziomu (Podstawowe raportowanie, Filtrowanie raportów i Dostosowywanie formatowania) itd. Po powiązaniu elementu SiteMapDataSource z repeater wylicza zwracany pierwszy poziom i tworzy wystąpienie ItemTemplate dla każdego SiteMapNode wystąpienia na tym pierwszym poziomie. Aby uzyskać dostęp do określonej właściwości kontrolki SiteMapNode, możemy użyć Eval(propertyName)metody , czyli sposobu uzyskiwania poszczególnych SiteMapNodeUrl właściwości i Title dla kontrolki HyperLink.
Powyższy przykład repeater renderuje następujące znaczniki:
<li>
<a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>
<li>
<a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>
<li>
<a href="/Code/CustomFormatting/Default.aspx">
Customized Formatting</a>
</li>
Te węzły mapy witryny (podstawowe raportowanie, filtrowanie raportów i dostosowywanie formatowania) składają się z drugiego poziomu renderowanej mapy witryny, a nie pierwszego. Dzieje się tak, ponieważ właściwość SiteMapDataSource jest ustawiona na Wartość False, co powoduje obejście węzła mapy lokacji głównej za pomocą elementu SiteMapDataSource ShowStartingNode , a zamiast tego należy zacząć od zwrócenia drugiego poziomu w hierarchii mapy lokacji.
Aby wyświetlić elementy podrzędne dla podstawowych raportów, filtrowania raportów i dostosowanych SiteMapNode formatów, możemy dodać kolejny moduł powtarzający do początkowego elementu powtarzającego ItemTemplate. Ten drugi repeater będzie powiązany z właściwością SiteMapNode wystąpienia ChildNodes , w następujący sposób:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink runat="server"
NavigateUrl='<%# Eval("Url") %>'>
<%# Eval("Title") %></asp:HyperLink>
<asp:Repeater runat="server"
DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink runat="server"
NavigateUrl='<%# Eval("Url") %>'>
<%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
Te dwa powtarzacze powodują następujący adiustację (niektóre znaczniki zostały usunięte w celu zwięzłości):
<li>
<a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
<ul>
<li>
<a href="/Code/BasicReporting/SimpleDisplay.aspx">
Simple Display</a>
</li>
<li>
<a href="/Code/BasicReporting/DeclarativeParams.aspx">
Declarative Parameters</a>
</li>
<li>
<a href="/Code/BasicReporting/ProgrammaticParams.aspx">
Setting Parameter Values</a>
</li>
</ul>
</li>
<li>
<a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
...
</li>
<li>
<a href="/Code/CustomFormatting/Default.aspx">
Customized Formatting</a>
...
</li>
Korzystając ze stylów CSS wybranych z książki Rachel AndrewThe CSS Anthology: 101 Essential Tips, Tricks, & Hacks, the <ul> i <li> elementy są stylizowane tak, aby adiustacja tworzy następujące dane wyjściowe wizualne:
Rysunek 11. Menu złożone z dwóch repeaterów i niektórych CSS
To menu znajduje się na stronie wzorcowej i jest powiązane z mapą witryny zdefiniowaną w Web.sitemapprogramie , co oznacza, że każda zmiana mapy witryny zostanie natychmiast odzwierciedlona na wszystkich stronach korzystających ze strony wzorcowej Site.master .
Wyłączanie funkcji ViewState
Wszystkie kontrolki ASP.NET mogą opcjonalnie utrwalić stan widoku, który jest serializowany jako ukryte pole formularza w renderowanym kodzie HTML. Stan widoku jest używany przez kontrolki do zapamiętowania ich programowo zmienionego stanu po powrocie zwrotnym, na przykład danych powiązanych z kontrolką sieci Web danych. Podczas gdy stan widoku zezwala na zapamiętowanie informacji po powrocie zwrotnym, zwiększa rozmiar znaczników, które należy wysłać do klienta i może prowadzić do poważnego wyrzutu strony, jeśli nie jest ściśle monitorowany. Kontrolki sieci Web danych, szczególnie GridView, są szczególnie notorycznie przeznaczone do dodawania dziesiątek dodatkowych kilobajtów znaczników do strony. Chociaż taki wzrost może być nieznaczny dla użytkowników szerokopasmowych lub intranetowych, stan widoku może dodać kilka sekund do podróży okrężnej dla użytkowników dial-up.
Aby zobaczyć wpływ stanu widoku, odwiedź stronę w przeglądarce, a następnie wyświetl źródło wysłane przez stronę internetową (w programie Internet Explorer przejdź do menu Widok i wybierz opcję Źródło). Możesz również włączyć śledzenie stron , aby wyświetlić alokację stanu widoku używaną przez poszczególne kontrolki na stronie. Informacje o stanie widoku są serializowane w ukrytym polu formularza o nazwie __VIEWSTATE, znajdującym się w <div> elemecie bezpośrednio po tagu otwierania <form> . Stan widoku jest utrwalany tylko wtedy, gdy jest używany formularz internetowy; jeśli strona ASP.NET nie zawiera elementu <form runat="server"> w składni deklaratywnej, nie będzie __VIEWSTATE ukrytego pola formularza w renderowanej adiustacji.
Pole __VIEWSTATE formularza wygenerowane przez stronę wzorcową dodaje około 1800 bajtów do wygenerowanego znaczników strony. Ten dodatkowy wzdęcie jest spowodowane przede wszystkim kontrolką Repeater, ponieważ zawartość kontrolki SiteMapDataSource jest utrwalana w celu wyświetlenia stanu. Chociaż dodatkowe 1800 bajtów może nie wydawać się bardzo podekscytowane, w przypadku korzystania z kontrolki GridView z wieloma polami i rekordami stan widoku może łatwo pęcznieć przez współczynnik 10 lub więcej.
Stan widoku można wyłączyć na poziomie strony lub kontrolki, ustawiając EnableViewState właściwość na false, zmniejszając tym samym rozmiar renderowanego znaczników. Ponieważ stan widoku dla kontrolki sieci Web danych utrzymuje dane powiązane z kontrolką sieci Web danych w ramach postbacks, podczas wyłączania stanu widoku dla kontrolki sieci Web danych dane muszą być powiązane z każdym i każdym postbackiem. W ASP.NET wersji 1.x ta odpowiedzialność spadła na ramiona dewelopera strony; w przypadku ASP.NET 2.0 kontrolki sieci Web danych zostaną jednak ponownie dołączone do kontroli źródła danych w każdym poście zwrotnym w razie potrzeby.
Aby zmniejszyć stan widoku strony, ustawmy właściwość kontrolki EnableViewState Repeater na false. Można to zrobić za pomocą okno Właściwości w Projektant lub deklaratywnie w widoku Źródło. Po wprowadzeniu tej zmiany znacznik deklaratywny repeatera powinien wyglądać następująco:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
EnableViewState="False">
<ItemTemplate>
... <i>ItemTemplate contents omitted for brevity</i> ...
</ItemTemplate>
</asp:Repeater>
Po tej zmianie rozmiar stanu renderowanego widoku strony został zmieniony na zaledwie 52 bajty, co stanowi 97% oszczędności w rozmiarze stanu widoku. W samouczkach w tej serii wyłączymy domyślnie stan widoku kontrolek sieci Web danych, aby zmniejszyć rozmiar renderowanego znaczników. W większości przykładów EnableViewState właściwość zostanie ustawiona na false i wykonana bez wzmianki. Jedyny stan widoku czasu zostanie omówiony w scenariuszach, w których musi być włączony, aby kontrolka sieci Web danych zapewniała oczekiwaną funkcjonalność.
Krok 4. Dodawanie nawigacji do stron nadrzędnych
Aby ukończyć stronę wzorcową, dodajmy element interfejsu użytkownika nawigacji do stron nadrzędnych. Linki do stron nadrzędnych szybko pokazują użytkownikom swoją bieżącą pozycję w hierarchii lokacji. Dodanie adresu do stron nadrzędnych w ASP.NET 2.0 jest łatwe po prostu dodanie kontrolki SiteMapPath do strony; kod nie jest potrzebny.
W naszej witrynie dodaj tę kontrolkę do nagłówka <div>:
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
Strona główna pokazuje bieżącą stronę, którą użytkownik odwiedza w hierarchii mapy lokacji, a także ten węzeł mapy witryny "elementy nadrzędne", aż do katalogu głównego (strona główna, w naszej mapie witryny).
Rysunek 12. Strona do stron nadrzędnych wyświetla bieżącą stronę i jej przodków w hierarchii mapy lokacji
Krok 5. Dodawanie strony domyślnej dla każdej sekcji
Samouczki w naszej witrynie są podzielone na różne kategorie Podstawowe raportowanie, Filtrowanie, Formatowanie niestandardowe i tak dalej z folderem dla każdej kategorii i odpowiednimi samouczkami jako strony ASP.NET w tym folderze. Ponadto każdy folder zawiera Default.aspx stronę. Na tej stronie domyślnej wyświetlimy wszystkie samouczki dla bieżącej sekcji. Oznacza to, że w Default.aspx folderze BasicReporting mielibyśmy linki do SimpleDisplay.aspx, DeclarativeParams.aspxi ProgrammaticParams.aspx. W tym miejscu ponownie możemy użyć klasy i kontrolki SiteMap sieci Web danych, aby wyświetlić te informacje na podstawie mapy witryny zdefiniowanej w Web.sitemapprogramie .
Wyświetlmy ponownie nieurządkowaną listę przy użyciu repeatera, ale tym razem wyświetlimy tytuł i opis samouczków. Ponieważ znaczniki i kod do wykonania będą musiały być powtarzane dla każdej Default.aspx strony, możemy hermetyzować tę logikę interfejsu użytkownika w kontrolce użytkownika. Utwórz folder w witrynie internetowej o nazwie UserControls i dodaj do niej nowy element typu Web User Control o nazwie SectionLevelTutorialListing.ascx, a następnie dodaj następujący znacznik:
Rysunek 13. Dodawanie nowej kontrolki użytkownika sieci Web do UserControls folderu (kliknij, aby wyświetlić obraz pełnowymiarowy)
SectionLevelTutorialListing.ascx
<%@ Control Language="CS" AutoEventWireup="true"
CodeFile="SectionLevelTutorialListing.ascx.cs"
Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
<li><asp:HyperLink runat="server"
NavigateUrl='<%# Eval("Url") %>'
Text='<%# Eval("Title") %>'></asp:HyperLink>
- <%# Eval("Description") %></li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
SectionLevelTutorialListing.ascx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class UserControls_SectionLevelTutorialListing : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
// If SiteMap.CurrentNode is not null,
// bind CurrentNode ChildNodes to the GridView
if (SiteMap.CurrentNode != null)
{
TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
TutorialList.DataBind();
}
}
}
W poprzednim przykładzie repeater powiązaliśmy SiteMap dane z deklaratywnie repeater; kontrolka SectionLevelTutorialListing użytkownika robi to jednak programowo. W procedurze obsługi zdarzeń Page_Load jest sprawdzana, aby upewnić się, że ten adres URL strony jest mapowy na węzeł na mapie witryny. Jeśli ta kontrolka użytkownika jest używana na stronie, która nie ma odpowiedniego <siteMapNode> wpisu, SiteMap.CurrentNode zwróci null i żadne dane nie zostaną powiązane z repeater. Zakładając, że mamy element CurrentNode, wiążemy jego ChildNodes kolekcję z repeaterem. Ponieważ mapa witryny jest skonfigurowana tak, że Default.aspx strona w każdej sekcji jest węzłem nadrzędnym wszystkich samouczków w tej sekcji, ten kod wyświetli linki do wszystkich samouczków sekcji i opisy wszystkich samouczków sekcji, jak pokazano na poniższym zrzucie ekranu.
Po utworzeniu tego powtarzania otwórz Default.aspx strony w każdym folderze, przejdź do widoku Projekt i po prostu przeciągnij kontrolkę użytkownika z Eksplorator rozwiązań na powierzchnię Projekt, na której ma zostać wyświetlona lista samouczków.
Rysunek 14. Kontrolka użytkownika została dodana do Default.aspx (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 15. Wyświetlane są podstawowe samouczki dotyczące raportowania (kliknij, aby wyświetlić obraz pełnowymiarowy)
Podsumowanie
Po zdefiniowaniu mapy witryny i zakończeniu strony wzorcowej mamy teraz spójny układ strony i schemat nawigacji dla naszych samouczków związanych z danymi. Niezależnie od liczby stron dodawanych do naszej witryny aktualizowanie układu strony w całej witrynie lub informacji o nawigacji witryny jest szybkim i prostym procesem ze względu na scentralizowane informacje. W szczególności informacje o układzie strony są definiowane na stronie Site.master wzorcowej i na mapie witryny w programie Web.sitemap. Nie musieliśmy pisać żadnego kodu w celu osiągnięcia tego mechanizmu układu i nawigacji całej witryny oraz zachowania pełnej obsługi projektanta WYSIWYG w programie Visual Studio.
Po ukończeniu warstwy dostępu do danych i warstwy logiki biznesowej oraz o zdefiniowanym spójnym układzie strony i nawigacji witryny możemy rozpocząć eksplorowanie typowych wzorców raportowania. W następnych trzech samouczkach zapoznamy się z podstawowymi zadaniami raportowania, które wyświetlają dane pobrane z usługi BLL w kontrolce GridView, DetailsView i FormView.
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:
- omówienie stron wzorcowych ASP.NET
- Strony wzorcowe w ASP.NET 2.0
- szablony projektowe ASP.NET 2.0
- Omówienie nawigacji witryny ASP.NET
- Badanie nawigacji witryny ASP.NET 2.0
- ASP.NET 2.0 Funkcje nawigacji witryny
- Informacje o stanie widoku ASP.NET
- Instrukcje: włączanie śledzenia dla strony ASP.NET
- ASP.NET kontrolki użytkownika
Informacje o autorze
Scott Mitchell, autor siedmiu 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 2.0 w ciągu 24 godzin. Można do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.
Specjalne podziękowania
Ta seria samouczków została sprawdzona przez wielu pomocnych recenzentów. Recenzenci z tego samouczka byli Liz Shulok, Dennis Patterson i Hilton Giesenow. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi wiersz pod adresem mitchell@4GuysFromRolla.com.
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