Udostępnij za pośrednictwem

Strony wzorcowe i nawigacja po witrynie (C#)

Autor : Scott Mitchell

Pobierz plik PDF

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 przedstawia dwie nowe funkcje, które znacznie upraszczają tworzenie zarówno układu strony, jak i schematu nawigacji dla całej witryny: stron wzorcowych oraz 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 ASP.NET strony muszą zapewniać zawartość tylko dla określonych regionów edytowalnych strony wzorcowej wszystkie inne znaczniki na stronie wzorcowej są identyczne na wszystkich stronach ASP.NET korzystających ze strony wzorcowej. Ten model umożliwia deweloperom definiowanie i scentralizowanie układu strony dla 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 witryny udostępnia zarówno mechanizm dla deweloperów stron do definiowania mapy witryny, jak i interfejs API dla programowego odpytywania tej mapy witryny. Nowe kontrolki nawigacyjne w sieci Web, takie jak Menu, TreeView i SiteMapPath, ułatwiają renderowanie całości lub części mapy witryny w typowym elemencie interfejsu użytkownika nawigacji. Będziemy używać domyślnego dostawcy nawigacji witryny, co oznacza, że nasza mapa witryny zostanie zdefiniowana w pliku w formacie XML.

Aby zilustrować te pojęcia i zwiększyć użyteczność witryny internetowej samouczków, spędźmy tę lekcję definiującą układ całej witryny, implementowanie mapy witryny i dodawanie interfejsu użytkownika nawigacji. Na koniec tego samouczka będziemy mieli dopracowany design strony internetowej do tworzenia stron tutorialu.

Końcowy wynik tego samouczka

Rysunek 1. Końcowy wynik tego samouczka (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Krok 1. Tworzenie strony wzorcowej

Pierwszym krokiem jest utworzenie strony wzorcowej dla witryny. W tej chwili nasza witryna internetowa składa się tylko z typed DataSet (Northwind.xsd, w App_Code folderze), klas BLL (ProductsBLL.cs, CategoriesBLL.csi tak dalej, wszystkie w App_Code folderze), bazy danych (NORTHWND.MDF, w App_Data folderze), pliku konfiguracji (Web.config) i pliku arkusza stylów CSS (Styles.css). Oczyściłem te strony i pliki, które demonstrowały użycie DAL i BLL w pierwszych dwóch samouczkach, ponieważ będziemy ponownie analizować te przykłady bardziej szczegółowo w przyszłych samouczkach.

Pliki w naszym projekcie

Rysunek 2. Pliki w naszym projekcie

Aby utworzyć stronę wzorcową, kliknij prawym przyciskiem myszy nazwę projektu w Eksploratorze rozwiązań i wybierz polecenie Dodaj nowy element. Następnie wybierz typ strony wzorcowej z listy szablonów i nadaj mu Site.masternazwę .

Dodawanie nowej strony wzorcowej do witryny sieci Web

Rysunek 3. Dodawanie nowej strony wzorcowej do witryny sieci Web (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Zdefiniuj układ strony całej witryny tutaj na stronie wzorcowej. Możesz użyć widoku projektowania i dodać dowolne potrzebne kontrolki układu lub internetowe, lub ręcznie dodać znaczniki w widoku źródła. Na mojej stronie wzorcowej używam kaskadowych arkuszy stylów do pozycjonowania i stylizacji, z ustawieniami CSS zdefiniowanymi w zewnętrznym pliku Style.css. Chociaż nie można powiedzieć z narzutu pokazanego poniżej, reguły CSS są zdefiniowane tak, że zawartość nawigacji <div>jest absolutnie umieszczona tak, aby pojawiała się po lewej stronie i ma stałą szerokość 200 pikseli.

Strona.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 mogą być edytowane przez strony ASP.NET korzystające 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 symbol ContentPlaceHolder (MainContent), ale strona wzorcowa może mieć wiele symboli ContentPlaceHolder.

Po wprowadzeniu znaczników powyżej 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.

Strona wzorcowa, kiedy jest przeglądana w widoku projektu

Rysunek 4. Strona wzorcowa po wyświetleniu w widoku projektu (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Dodawanie strony głównej do witryny internetowej

Po zdefiniowaniu strony głównej 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 Eksploratorze rozwiązań i wybierz polecenie Dodaj nowy element. Wybierz opcję Formularz sieci Web z listy szablonów i nadaj plikowi Default.aspxnazwę . Zaznacz również pole wyboru "Wybierz stronę wzorcową".

Dodaj nowy formularz sieciowy, zaznaczając pole wyboru 'Wybierz stronę wzorcową'

Rysunek 5. Dodawanie nowego formularza internetowego, zaznacz pole wyboru 'Wybierz stronę wzorcową' (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po kliknięciu przycisku OK zostanie wyświetlona prośba 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ą.

Wybierz stronę wzorcową, która powinna być używana na tej stronie ASP.NET

Rysunek 6. Wybierz stronę wzorcową, która powinna być używana ASP.NET (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

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 znajduje się odwołanie do używanego pliku strony wzorcowej (MasterPageFile="~/Site.master"), a znacznik strony ASP.NET zawiera kontrolkę Content dla każdej z kontrolek ContentPlaceHolder zdefiniowanych na stronie wzorcowej, przy czym ContentPlaceHolderID mapuje kontrolkę Content do konkretnej kontrolki ContentPlaceHolder. Kontrolka Zawartość to miejsce, w którym umieszczasz znaczniki, które mają być wyświetlane w odpowiednim elemencie ContentPlaceHolder. @Page Ustaw atrybut dyrektywy Title na Strona główna i dodaj 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 na stronie ASP.NET, mimo że element <title> jest zdefiniowany na stronie wzorcowej. Tytuł można również ustawić programowo przy użyciu polecenia Page.Title. Należy również pamiętać, ż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, w jakim katalogu znajduje się strona ASP.NET względem strony wzorcowej.

Przełączając się na widok Projektu, możemy zobaczyć, jak nasza strona będzie wyglądać w przeglądarce. Należy pamiętać, że w widoku projektowania dla strony ASP.NET można edytować tylko obszary edytowalne zawartości, znaczniki zakodowane w miejscu innym niż ContentPlaceHolder zdefiniowane na stronie wzorcowej są wyszarzane.

Widok projektu dla strony ASP.NET zawiera zarówno regiony edytowalne, jak i nieedytowalne

Rysunek 7. Widok projektu strony ASP.NET przedstawia zarówno regiony edytowalne, jak i nieedytowalne (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po odwiedzeniu strony Default.aspx przez przeglądarkę, aparat ASP.NET automatycznie scala zawartość strony wzorcowej i zawartość strony ASP.NET, a następnie renderuje scaloną zawartość do końcowego kodu HTML wysyłanego do przeglądarki żądającej. Po zaktualizowaniu zawartości strony wzorcowej, zawartość wszystkich stron ASP.NET korzystających z tej strony wzorcowej zostanie ponownie scalona z nową zawartością strony wzorcowej przy następnym wywołaniu. Krótko mówiąc, model strony wzorcowej umożliwia zdefiniowanie szablonu układu pojedynczej strony (strona wzorcowa), którego zmiany są natychmiast odzwierciedlone w całej witrynie.

Dodawanie dodatkowych stron ASP.NET do witryny sieci Web

Poświęćmy chwilę, aby dodać dodatkowe szablony stron ASP.NET do witryny, które ostatecznie będą zawierać różne demonstracje raportów. 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 demonstracji, aby lepiej nimi zarządzać, dodaj folder na te kategorie. Dodaj na razie następujące trzy foldery:

  • BasicReporting
  • Filtering
  • CustomFormatting

Na koniec dodaj nowe pliki, jak pokazano w Eksploratorze rozwiązań na rysunku 8. Podczas dodawania każdego pliku pamiętaj, aby zaznaczyć pole wyboru "Wybierz stronę wzorcową".

Dodaj następujące pliki

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 więcej niż kilku stron jest zapewnienie prostego sposobu na poruszanie się po witrynie przez odwiedzających. Aby rozpocząć pracę, należy zdefiniować strukturę nawigacji witryny. Następnie należy przetłumaczyć tę strukturę na elementy interfejsu użytkownika z możliwością nawigacji, takie jak menu lub linki do stron nadrzędnych. Na koniec cały proces musi być utrzymywany i aktualizowany w miarę dodawania nowych stron do witryny i istniejących usuniętych. Przed ASP.NET 2.0 deweloperzy sami musieli tworzyć strukturę nawigacji witryny, ją utrzymywać i tłumaczyć na nawigowalne elementy interfejsu użytkownika. Jednak dzięki ASP.NET 2.0 deweloperzy mogą korzystać z bardzo elastycznego wbudowanego systemu nawigacji lokacji.

System nawigacji lokacji w wersji ASP.NET 2.0 umożliwia deweloperowi zdefiniowanie mapy witryny, a następnie uzyskanie dostępu do tych informacji za pośrednictwem programowego interfejsu API. ASP.NET jest dostarczany z dostawcą mapy witryny, który oczekuje, że dane mapy witryny będą przechowywane w pliku XML sformatowanym w określony sposób. Jednak ponieważ system nawigacji witryny jest zbudowany na modelu dostawcy, można go rozszerzyć, aby obsługiwać alternatywne sposoby serializacji informacji o mapie witryny. Artykuł Jeffa Prosise, Dostawca mapy witryny SQL, na który czekasz opisuje, jak utworzyć dostawcę mapy witryny, który przechowuje mapę witryny w bazie danych serwera SQL Server; inną opcją jest utworzenie dostawcy mapy witryny na podstawie struktury systemu plików.

W tym samouczku użyjemy jednak domyślnego dostawcy mapy witryny dostarczanego z ASP.NET 2.0. Aby utworzyć mapę witryny, po prostu kliknij prawym przyciskiem myszy nazwę projektu w Eksploratorze rozwiązań, wybierz polecenie Dodaj nowy element i wybierz opcję Mapa witryny. Pozostaw nazwę jako Web.sitemap i kliknij przycisk Dodaj.

Dodawanie mapy witryny do projektu

Rysunek 9. Dodawanie mapy witryny do projektu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

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żdej strony ASP.NET w tych folderach, w następujący sposób:

Mapa witryny Web.site

<?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ą opisową różnych sekcji witryny. Każdy element <siteMapNode> w Web.sitemap reprezentuje sekcję w strukturze nawigacyjnej witryny.

Mapa lokacji reprezentuje hierarchiczną strukturę nawigacji

Rysunek 10. Mapa witryny reprezentuje hierarchiczną strukturę nawigacji (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

ASP.NET uwidacznia strukturę mapy witryny za pomocą klasy SiteMap programu .NET Framework. Ta klasa ma właściwość CurrentNode, która zwraca informacje o sekcji, którą użytkownik aktualnie odwiedza. Właściwość RootNode zwraca katalog główny mapy witryny (Strona główna, w naszej mapie witryny). Zarówno właściwość CurrentNode, jak i RootNode zwracają wystąpienia SiteMapNode, które mają właściwości, takie jak ParentNode, ChildNodes, NextSibling, PreviousSibling, i 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 wersji ASP.NET 2.0 można wykonać programowo, na przykład w ASP.NET 1.x lub deklaratywnie, za pomocą 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 relacyjnej bazy 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 służą jako pośrednik między stroną ASP.NET a danymi źródłowymi. Aby wyświetlić pobrane dane kontrolki źródła danych, zazwyczaj dodamy kolejną kontrolkę sieci Web do strony i powiązamy ją z kontrolką ź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 internetowej. Dwie kontrolki Web TreeView i Menu są często używane do zapewnienia interfejsu użytkownika do 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 odpowiednio ustawiona. Na przykład możemy dodać kontrolkę Menu do strony wzorcowej przy użyciu następującego znacznika:

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Aby uzyskać dokładniejszy stopień kontroli nad emitowanego kodu 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 witryny po jednym poziomie na raz, zaczynając od węzła głównego (Strona główna), a następnie kolejnego poziomu (Raportowanie podstawowe, Filtrowanie raportów, Dostosowywanie formatowania) i tak dalej. Po powiązaniu SiteMapDataSource z Repeaterem, wyliczany jest pierwszy zwrócony poziom, a dla każdego wystąpienia ItemTemplate w tym pierwszym poziomie tworzone jest wystąpienie SiteMapNode. Aby uzyskać dostęp do konkretnej właściwości elementu SiteMapNode, możemy użyć metody Eval(propertyName), która umożliwia uzyskanie właściwości SiteMapNode i Url dla każdego Title w kontrolce HyperLink.

Powyższy przykład powtarzacza wygeneruje następujący kod znaczników.

<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 (raportowanie podstawowe, 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ść ShowStartingNode obiektu SiteMapDataSource jest ustawiona na wartość False, co powoduje, że SiteMapDataSource pomija węzeł główny mapy lokacji i zamiast tego zaczyna od zwracania drugiego poziomu w hierarchii mapy lokacji.

Aby wyświetlić dzieci dla podstawowego raportowania, filtrowania raportów i niestandardowego formatowania SiteMapNode, możemy dodać kolejny powtarzacz do początkowego ItemTemplate powtarzacza. 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 repetery powodują powstanie następujących znaczników (niektóre znaczniki zostały usunięte dla ułatwienia):

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

Używając stylów CSS wybranych z książki Rachel AndrewThe CSS Anthology: 101 Essential Tips, Tricks, & Hacks, elementy <ul> i <li> są stylowane tak, aby znaczniki tworzyły następujący efekt wizualny:

Menu skomponowane z dwóch repeaterów i pewnego CSS

Rysunek 11. Menu składające się z dwóch repeaterów i niektórych arkuszy CSS

To menu znajduje się na stronie wzorcowej i jest powiązane z mapą witryny zdefiniowaną w Web.sitemap, co oznacza, że każda zmiana mapy witryny zostanie natychmiast odzwierciedlona na wszystkich stronach korzystających ze strony wzorcowej Site.master.

Wyłączanie parametru ViewState

Wszystkie kontrolki ASP.NET mogą opcjonalnie utrzymywać swój stan w stanie widoku, który jest serializowany jako ukryte pole formularza w renderowanym kodzie HTML. Stan widoku jest używany przez kontrolek do zapamiętywania ich programowo zmienionego stanu między odświeżeniami, takich jak dane powiązane z kontrolką danych sieci Web. Podczas gdy stan widoku pozwala na zapamiętanie informacji podczas odświeżania strony, zwiększa rozmiar znaczników, które muszą być wysyłane do klienta i może prowadzić do znacznego rozrostu strony, jeśli nie jest ściśle monitorowany. Kontrolki sieci Web danych, zwłaszcza GridView, są szczególnie notoryczne z powodu dodawania dziesiątek dodatkowych kilobajtów znaczników do strony. Chociaż taki wzrost może być niewielki dla użytkowników internetu szerokopasmowego lub intranetu, stan wyświetlenia może dodać kilka sekund do czasu przejazdu dla użytkowników korzystających z połączeń dial-up.

Aby zobaczyć wpływ stanu widoku, odwiedź stronę w przeglądarce, a następnie wyświetl źródło wysył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 elemencie <div> bezpośrednio po tagu otwierającym <form>. Stan widoku jest utrwalany tylko wtedy, gdy używany jest formularz sieci Web. Jeśli strona ASP.NET nie zawiera <form runat="server"> w swojej składni deklaratywnej, to w renderowanych znacznikach nie będzie ukrytego pola formularza __VIEWSTATE.

Pole __VIEWSTATE formularza wygenerowane przez stronę wzorcową dodaje około 1800 bajtów do wygenerowanego znacznika strony. Ten dodatkowy przeciążenie jest spowodowane głównie kontrolką Repeater, ponieważ zawartość kontrolki SiteMapDataSource jest utrwalana w stanie widoku. Chociaż dodatkowe 1800 bajtów może nie wydawać się czymś, co warto się ekscytować, to przy użyciu kontrolki GridView z wieloma polami i rekordami stan widoku może łatwo zwiększyć się dziesięciokrotnie lub więcej.

Stan widoku można wyłączyć na poziomie strony lub kontrolki, ustawiając EnableViewState właściwość na false, zmniejszając w ten sposób rozmiar renderowanego znacznika. Ponieważ stan widoku dla kontrolki sieci Web danych utrzymuje dane powiązane z kontrolką sieci Web danych w trakcie postbacków, podczas wyłączania stanu widoku dla takiej kontrolki dane muszą być powiązane przy każdym postbacku. W ASP.NET wersji 1.x ta odpowiedzialność spadła na ramiona dewelopera strony; w przypadku ASP.NET 2.0 kontrolki danych sieci Web zostaną jednak ponownie powiązane ze swoim źródłem danych przy każdym ponownym przesłaniu, jeśli zajdzie taka potrzeba.

Aby zmniejszyć stan widoku strony, ustawmy właściwość kontrolki EnableViewState Repeater na false. Można to zrobić za pomocą okna Właściwości w Projektancie lub deklaratywnie w widoku Źródło. Po wprowadzeniu tej zmiany deklaratywny znacznik 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 widoku strony został zmieniony na zaledwie 52 bajty, a 97% oszczędności w rozmiarze stanu wyświetlania! W samouczkach tej serii domyślnie wyłączymy stan widoku kontrolek danych w sieci Web, aby zmniejszyć rozmiar renderowanego kodu znacznika. W większości przykładów właściwość EnableViewState będzie ustawiona na false i zostanie to zrobione bez dalszych uwag. Jedyny stan widoku czasu zostanie omówiony w scenariuszach, w których musi być włączony, aby kontrolka sieci Web danych zapewniała jej oczekiwaną funkcjonalność.

Krok 4: Dodawanie nawigacji okruszkowej

Aby ukończyć stronę wzorcową, dodajmy do każdej strony element interfejsu użytkownika typu nawigacji ścieżkowej. Ścieżka nawigacyjna szybko pokazuje użytkownikom ich bieżące położenie w hierarchii witryny. Dodanie okruszków ścieżki w ASP.NET 2.0 jest łatwe — po prostu dodaj kontrolkę SiteMapPath do strony, bez konieczności pisania kodu.

W naszej witrynie dodaj tę kontrolkę do nagłówka <div>:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

Nawigacja ścieżkowa pokazuje bieżącą stronę, którą użytkownik odwiedza w hierarchii mapy witryny, a także "elementy nadrzędne" tego węzła mapy witryny, aż do strony głównej (Strona główna, w naszej mapie witryny).

Nawigacja ścieżkowa wyświetla bieżącą stronę i jej hierarchię w hierarchii mapy witryny

Rysunek 12: Wskaźnik nawigacyjny wyświetla bieżącą stronę i jej strony nadrzędne w hierarchii mapy strony

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, itd., z folderem dla każdej kategorii oraz odpowiednimi samouczkami jako stron ASP.NET w tym folderze. Ponadto każdy folder zawiera Default.aspx stronę. Na tej stronie domyślnej wyświetlmy wszystkie samouczki dla bieżącej sekcji. Oznacza to, że dla Default.aspx w folderze BasicReporting mielibyśmy linki do SimpleDisplay.aspx, DeclarativeParams.aspx, i ProgrammaticParams.aspx. Tutaj możemy ponownie użyć SiteMap klasy i kontrolki danych web, aby wyświetlić te informacje na podstawie zdefiniowanej mapy witryny w programie Web.sitemap.

Ponownie wyświetlmy nieurządkowaną listę przy użyciu repeatera, ale tym razem wyświetlimy tytuł i opis samouczków. Ponieważ znaczniki i kod do wykonania tego celu będą musiały zostać powtórzone 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.ascxi dodaj następujący znacznik:

Dodawanie nowej kontrolki użytkownika sieci Web do folderu UserControls

Rysunek 13. Dodawanie nowej kontrolki użytkownika sieci Web do UserControls folderu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

ListaSamouczkówNaPoziomieSekcji.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 dane SiteMap z Repeater w sposób deklaratywny; jednak kontrolka użytkownika SectionLevelTutorialListing robi to programowo. W procedurze obsługi zdarzeń Page_Load sprawdzane jest, czy adres URL tej strony odpowiada węzłowi w mapie witryny. Jeśli ta kontrola 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 Repeaterem. Zakładając, że posiadamy element CurrentNode, powiązujemy jego kolekcję ChildNodes z Repeaterem. Ponieważ nasza mapa witryny jest skonfigurowana tak, że strona Default.aspx w każdej sekcji jest węzłem nadrzędnym wszystkich samouczków w tej sekcji, kod ten wyświetli linki do samouczków tej sekcji oraz ich opisy, jak pokazano na poniższym zrzucie ekranu.

Po utworzeniu tego repeatera otwórz Default.aspx strony w każdym z folderów, przejdź do widoku Projekt i po prostu przeciągnij kontrolkę użytkownika z Eksploratora rozwiązań na powierzchnię Projekt, na której ma zostać wyświetlona lista samouczków.

Kontrolka użytkownika została dodana do Default.aspx

Rysunek 14. Kontrolka użytkownika została dodana do Default.aspx (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Podstawowe samouczki dotyczące raportowania są wymienione na liście

Rysunek 15. Wyświetlane są podstawowe samouczki raportowania (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

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 dodanych 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 scentralizowanie tych informacji. W szczególności informacje o układzie strony są definiowane na stronie Site.master wzorcowej i mapie witryny w programie Web.sitemap. Nie musieliśmy pisać żadnego kodu, aby osiągnąć ten mechanizm układu i nawigacji całej witryny. Zachowaliśmy pełną obsługę projektanta WYSIWYG w programie Visual Studio.

Po zakończeniu warstwy dostępu do danych i warstwy logiki biznesowej oraz zdefiniowaniu spójnego układu strony i nawigacji witryny możemy rozpocząć eksplorowanie typowych wzorców raportowania. W kolejnych trzech samouczkach omówimy podstawowe zadania raportowania zawierające dane pobrane z usługi BLL w kontrolkach GridView, DetailsView i FormView.

Szczęśliwe programowanie!

Dalsza lektura

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

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 go uzyskać pod adresem mitchell@4GuysFromRolla.com.

Specjalne podziękowania

Ta seria samouczków została omówiona przez wielu przydatnych recenzentów. Główni recenzenci tego samouczka to Liz Shulok, Dennis Patterson i Hilton Giesenow. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, napisz do mnie na adres mitchell@4GuysFromRolla.com.

Poprzedni następny