Sdílet prostřednictvím

Stránky předlohy a navigace na webu (VB)

  • Článek

Scott Mitchell

Stáhnout PDF

Jednou z běžných charakteristik uživatelsky přívětivých webů je, že mají konzistentní rozložení stránek a navigační schéma pro celý web. V tomto kurzu se dozvíte, jak vytvořit konzistentní vzhled a chování na všech stránkách, které se dají snadno aktualizovat.

Úvod

Jednou z běžných charakteristik uživatelsky přívětivých webů je, že mají konzistentní rozložení stránek a navigační schéma pro celý web. ASP.NET 2.0 přináší dvě nové funkce, které výrazně zjednodušují implementaci rozložení stránek a navigačního schématu na úrovni celého webu: stránky předlohy a navigace na webu. Stránky předlohy umožňují vývojářům vytvořit šablonu pro celý web s určenými upravitelnými oblastmi. Tuto šablonu pak můžete použít na ASP.NET stránky na webu. Takové ASP.NET stránky potřebují pouze poskytovat obsah pro určené upravitelné oblasti stránky předlohy, všechny ostatní značky na stránce předlohy jsou identické napříč všemi ASP.NET stránkami, které tuto stránku předlohy používají. Tento model umožňuje vývojářům definovat a centralizovat rozložení stránek pro celý web, a usnadňuje tak vytvoření konzistentního vzhledu a chování na všech stránkách, které lze snadno aktualizovat.

Navigační systém webu poskytuje vývojářům stránek mechanismus, který umožňuje definovat mapu webu a rozhraní API pro programové dotazy na mapu webu. Nový navigační web řídí Menu, TreeView a SiteMapPath usnadňují vykreslení celé mapy webu nebo její části ve společném prvku navigačního uživatelského rozhraní. Použijeme výchozího zprostředkovatele navigace na webu, což znamená, že mapa webu bude definovaná v souboru ve formátu XML.

Abychom tyto koncepty ilustrovali a zpřístupnily web našich kurzů, strávíme tuto lekci definováním rozložení stránky na úrovni celého webu, implementací mapy webu a přidáním navigačního uživatelského rozhraní. Na konci tohoto kurzu budeme mít propracovaný návrh webových stránek pro vytváření našich výukových webových stránek.

Konečný výsledek tohoto kurzu

Obrázek 1: Konečný výsledek tohoto kurzu (kliknutím zobrazíte obrázek v plné velikosti)

Krok 1: Vytvoření stránky předlohy

Prvním krokem je vytvoření stránky předlohy pro web. Právě teď se náš web skládá pouze z Typed DataSet (Northwind.xsd, ve App_Code složce), třídy BLL (ProductsBLL.vb, CategoriesBLL.vba tak dále, všechny ve App_Code složce), databáze (NORTHWND.MDF, ve App_Data složce), konfigurační soubor (Web.config) a soubor šablon stylů CSS (Styles.css). Vyčistil jsem tyto stránky a soubory demonstrující pomocí DAL a BLL z prvních dvou výukových programů, protože budeme tyto příklady podrobněji probít v budoucích výukových kurzech.

Soubory v projektu

Obrázek 2: Soubory v projektu

Pokud chcete vytvořit stránku předlohy, klikněte pravým tlačítkem na název projektu v Průzkumník řešení a zvolte Přidat novou položku. Potom vyberte typ stránky předlohy ze seznamu šablon a pojmenujte ho Site.master.

Přidání nové stránky předlohy na web

Obrázek 3: Přidání nové stránky předlohy na web (kliknutím zobrazíte obrázek v plné velikosti)

Tady na stránce předlohy definujte rozložení stránky pro celý web. Můžete použít návrhové zobrazení a přidat libovolné ovládací prvky rozložení nebo webu, které potřebujete, nebo můžete značky přidat ručně ručně v zobrazení Zdroj. Na stránce předlohy používám kaskádové šablony stylů pro umístění a styly s nastavením šablon stylů CSS definovaným v externím souboru Style.css. I když to z níže uvedeného kódu nejde zjistit, pravidla CSS jsou definovaná tak, že obsah navigace <div>je naprosto umístěný tak, aby se zobrazoval vlevo a má pevnou šířku 200 pixelů.

Site.master

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" 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>

Stránka předlohy definuje statické rozložení stránky i oblasti, které mohou být upravovány ASP.NET stránkami používajícími stránku předlohy. Tyto upravitelné oblasti obsahu jsou označeny ovládacím prvku ContentPlaceHolder, který lze zobrazit v rámci obsahu <div>. Naše stránka předlohy má jeden ContentPlaceHolder (MainContent), ale stránky předlohy mohou mít více ContentPlaceHolders.

Při výše uvedeném kódu se při přepnutí do návrhového zobrazení zobrazí rozložení stránky předlohy. Všechny ASP.NET stránky, které používají tuto stránku předlohy, budou mít toto jednotné rozložení s možností určit značky pro danou MainContent oblast.

Stránka předlohy při zobrazení v návrhovém zobrazení

Obrázek 4: Stránka předlohy při prohlížení v návrhovém zobrazení (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Přidání domovské stránky na web

Když je stránka předlohy definovaná, jsme připraveni přidat ASP.NET stránky pro web. Začněme přidáním Default.aspxdomovské stránky našeho webu. Klikněte pravým tlačítkem na název projektu v Průzkumník řešení a zvolte Přidat novou položku. V seznamu šablon vyberte možnost Webový formulář a pojmenujte soubor Default.aspx. Zaškrtněte také políčko Vybrat stránku předlohy.

Přidání nového webového formuláře, zaškrtnutí políčka Vybrat stránku předlohy

Obrázek 5: Přidání nového webového formuláře, zaškrtnutí políčka Vybrat stránku předlohy (kliknutím zobrazíte obrázek v plné velikosti)

Po kliknutí na tlačítko OK se zobrazí výzva k výběru stránky předlohy, kterou má tato nová ASP.NET stránka používat. I když v projektu můžete mít více stránek předlohy, my máme jenom jednu.

Zvolte stránku předlohy, která se má použít ASP.NET stránce.

Obrázek 6: Volba stránky předlohy ASP.NET stránka by se měla použít (kliknutím zobrazíte obrázek v plné velikosti)

Po výběru stránky předlohy budou nové stránky ASP.NET obsahovat následující kód:

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

V direktivě @Page je odkaz na použitý soubor stránky předlohy (MasterPageFile="~/Site.master") a kód stránky ASP.NET obsahuje ovládací prvek Content pro každý ovládací prvek ContentPlaceHolder definovaný na stránce předlohy s mapováním ovládacího ContentPlaceHolderID prvku Content na konkrétní ContentPlaceHolder. Ovládací prvek Content je místo, kam umístíte kód, který se má zobrazit v odpovídající ContentPlaceHolder. Nastavte atribut direktivy @PageTitle na Domů a přidejte do ovládacího prvku Obsah nějaký uvítací obsah:

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    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>

Atribut Title v direktivě @Page nám umožňuje nastavit název stránky z ASP.NET stránky, i když <title> je prvek definovaný na stránce předlohy. Název můžeme nastavit také programově pomocí Page.Title. Všimněte si také, že odkazy stránky předlohy na šablony stylů (například Style.css) se automaticky aktualizují tak, aby fungovaly v libovolné ASP.NET stránce bez ohledu na to, v jakém adresáři se ASP.NET stránka nachází vzhledem ke stránce předlohy.

Když přepneme do návrhového zobrazení, uvidíme, jak bude naše stránka vypadat v prohlížeči. Všimněte si, že v návrhovém zobrazení pro stránku ASP.NET, že lze upravovat pouze oblasti obsahu, které lze upravit, jsou kódy, které nejsou ContentPlaceHolder definované na stránce předlohy, šedě.

Návrhové zobrazení stránky ASP.NET zobrazuje upravitelné i neupravitelné oblasti.

Obrázek 7: Návrhové zobrazení stránky ASP.NET zobrazuje upravitelné i neupravitelné oblasti (kliknutím zobrazíte obrázek v plné velikosti).

Default.aspx Když stránku navštíví prohlížeč, modul ASP.NET automaticky sloučí obsah stránky předlohy stránky s asp. NET a vykreslí sloučený obsah do konečného kódu HTML, který se odešle do žádajícího prohlížeče. Při aktualizaci obsahu stránky předlohy budou všechny ASP.NET stránky, které používají tuto stránku předlohy, při příštím vyžádání znovu sloučí s novým obsahem stránky předlohy. Stručně řečeno, model stránky předlohy umožňuje definovat jednu šablonu rozložení stránky (stránku předlohy), jejíž změny se okamžitě projeví na celém webu.

Přidání dalších ASP.NET stránek na web

Pojďme na web přidat další zástupné procedury ASP.NET stránek, které nakonec budou obsahovat různé ukázky sestav. Celkem bude více než 35 ukázek, takže místo vytvoření všech stránek se zástupnými procedurami vytvoříme jen několik prvních. Vzhledem k tomu, že bude k dispozici také mnoho kategorií ukázek, pro lepší správu ukázek přidejte složku pro kategorie. Prozatím přidejte následující tři složky:

  • BasicReporting
  • Filtering
  • CustomFormatting

Nakonec přidejte nové soubory, jak je znázorněno na Průzkumník řešení na obrázku 8. Při přidávání jednotlivých souborů nezapomeňte zaškrtnout políčko Vybrat stránku předlohy.

Přidejte následující soubory.

Obrázek 8: Přidání následujících souborů

Krok 2: Vytvoření mapy webu

Jednou z výzev při správě webu, který se skládá z více než několika stránek, je poskytnutí jednoduchého způsobu procházení webu pro návštěvníky. Pro začátek musí být definována navigační struktura webu. Dále musí být tato struktura přeložena do prvků uživatelského rozhraní, které lze procházet, jako jsou nabídky nebo popis cesty. Nakonec je potřeba celý tento proces udržovat a aktualizovat, protože se na web přidají nové stránky a ty stávající se odeberou. Před ASP.NET 2.0 vývojáři vytvářeli vlastní navigační strukturu webu, udržovali ji a překláněli ji do prvků uživatelského rozhraní, které se dají orientovat. S ASP.NET 2.0 však mohou vývojáři využívat velmi flexibilní integrovaný navigační systém webu.

Navigační systém webu ASP.NET 2.0 umožňuje vývojářům definovat mapu webu a získat k informacím přístup prostřednictvím programového rozhraní API. ASP.NET se dodává se zprostředkovatelem mapy webu, který očekává, že data mapy webu budou uložena v souboru XML, který je určitým způsobem formátovaný. Ale vzhledem k tomu, že navigační systém webu je postaven na modelu zprostředkovatele , může být rozšířen o podporu alternativních způsobů serializace informací o mapě webu. Článek Jeffa Prosiseho: Zprostředkovatel map webů SQL, na kterého jste čekali, ukazuje, jak vytvořit zprostředkovatele map webů, který ukládá mapu webu do SQL Server databáze.

Pro účely tohoto kurzu ale použijeme výchozího zprostředkovatele mapy webu, který se dodává s ASP.NET 2.0. Pokud chcete vytvořit mapu webu, jednoduše klikněte pravým tlačítkem na název projektu v Průzkumník řešení, zvolte Přidat novou položku a zvolte možnost Mapa webu. Ponechte název Web.sitemap a klikněte na tlačítko Přidat.

Přidání mapy webu do projektu

Obrázek 9: Přidání mapy webu do projektu (kliknutím zobrazíte obrázek v plné velikosti)

Soubor mapy webu je soubor XML. Všimněte si, že Visual Studio poskytuje IntelliSense pro strukturu mapy webu. Soubor mapy webu musí mít <siteMap> uzel jako kořenový uzel, který musí obsahovat přesně jeden <siteMapNode> podřízený prvek. První <siteMapNode> prvek pak může obsahovat libovolný počet sestupných <siteMapNode> prvků.

Definujte mapu webu, která bude napodobovat strukturu systému souborů. To znamená, že přidejte <siteMapNode> element pro každou ze tří složek a podřízené <siteMapNode> elementy pro každou ASP.NET stránky v těchto složkách, například takto:

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 webu definuje navigační strukturu webu, což je hierarchie, která popisuje různé části webu. Každý <siteMapNode> prvek v Web.sitemap souboru představuje část v navigační struktuře webu.

Mapa webu představuje hierarchickou navigační strukturu.

Obrázek 10: Mapa webu představuje hierarchickou navigační strukturu (kliknutím zobrazíte obrázek v plné velikosti)

ASP.NET zveřejňuje strukturu mapy webu prostřednictvím třídy SiteMap rozhraní .NET Framework. Tato třída má CurrentNode vlastnost, která vrací informace o oddílu, který uživatel právě navštěvuje; RootNode vlastnost vrací kořen mapy webu (v naší mapě webu Domů). CurrentNode Vlastnosti a RootNode vrací instance SiteMapNode, které mají vlastnosti jako ParentNode, ChildNodesNextSibling, , PreviousSiblingatd., které umožňují procházet hierarchii mapy webu.

Krok 3: Zobrazení nabídky založené na mapě webu

Přístup k datům v ASP.NET 2.0 je možné provést programově, například v ASP.NET 1.x, nebo deklarativně prostřednictvím nových ovládacích prvků zdroje dat. Existuje několik předdefinovaných ovládacích prvků zdroje dat, jako je například ovládací prvek SqlDataSource pro přístup k datům relační databáze, ovládací prvek ObjectDataSource, pro přístup k datům z tříd a další. Můžete dokonce vytvořit vlastní ovládací prvky zdroje dat.

Ovládací prvky zdroje dat slouží jako proxy mezi ASP.NET stránkou a podkladovými daty. Aby bylo možné zobrazit načtená data z ovládacího prvku zdroje dat, obvykle na stránku přidáme další webový ovládací prvek a vytvoříme jeho vazbu na ovládací prvek zdroje dat. Chcete-li vytvořit vazbu webového ovládacího prvku na ovládací prvek zdroje dat, jednoduše nastavte vlastnost webového ovládacího prvku DataSourceID na hodnotu vlastnosti ovládacího prvku ID zdroje dat.

Pro pomoc při práci s daty mapy webu obsahuje ASP.NET ovládací prvek SiteMapDataSource, který nám umožňuje svázat webový ovládací prvek s mapou webu. Dva webové ovládací prvky TreeView a Menu se běžně používají k poskytování navigačního uživatelského rozhraní. Chcete-li svázat data mapy webu s jedním z těchto dvou ovládacích prvků, jednoduše přidejte SiteMapDataSource na stránku spolu s ovládacím prvku TreeView nebo Menu, jehož DataSourceID vlastnost je nastavena odpovídajícím způsobem. Například bychom mohli přidat ovládací prvek Nabídka na stránku předlohy pomocí následujícího kódu:

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

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

Pro jemnější stupeň kontroly nad generovaným kódem HTML můžeme svázat ovládací prvek SiteMapDataSource s ovládacím prvkem Repeater, například takto:

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

Ovládací prvek SiteMapDataSource vrací hierarchii mapy webu po jedné úrovni, počínaje kořenovým uzlem mapy webu (Domovská stránka v naší mapě webu), pak další úrovní (Základní vytváření sestav, Filtrování sestav a Přizpůsobené formátování) atd. Při vytváření vazby SiteMapDataSource na Repeater vytvoří výčet první vrácené úrovně a vytvoří instanci ItemTemplate pro každou SiteMapNode instanci v této první úrovni. Pro přístup ke konkrétní vlastnosti objektu SiteMapNodemůžeme použít Eval(propertyName), což je způsob, jak získáme vlastnosti a SiteMapNodeUrlTitle pro ovládací prvek HyperLink.

Výše uvedený příklad Repeater vykreslí následující kód:

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

Tyto uzly mapy webu (základní generování sestav, filtrování sestav a přizpůsobené formátování) tvoří druhou úroveň vykreslené mapy webu, nikoli první. Důvodem je, že vlastnost SiteMapDataSource ShowStartingNode je nastavena na False, což způsobí, že SiteMapDataSource obchází kořenový uzel mapy webu a místo toho začíná vrácením druhé úrovně v hierarchii mapy webu.

Pokud chcete zobrazit podřízené položky pro základní generování sestav, filtrování sestav a přizpůsobené formátování SiteMapNode , můžeme do počátečního opakovače přidat další opakovač ItemTemplate. Tento druhý repeater bude vázán na SiteMapNode vlastnost instance ChildNodes , například takto:

<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="<%# CType(Container.DataItem,
             SiteMapNode).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>

Výsledkem těchto dvou repeaterů je následující kód (některé značky byly z důvodu zkrácení odebrány):

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

Pomocí stylů CSS vybraných z knihy Rachel AndrewAnthology CSS: 101 základní tipy, triky, & Hacks, prvky a <li> jsou stylovány tak, <ul> aby značky vytvořily následující vizuální výstup:

Nabídka složená ze dvou opakovačů a šablon stylů CSS

Obrázek 11: Nabídka složená ze dvou opakovačů a některých šablon stylů CSS

Tato nabídka je na stránce předlohy a je svázaná s mapou webu definovanou v Web.sitemap, což znamená, že všechny změny mapy webu se okamžitě projeví na všech stránkách, které používají Site.master stránku předlohy.

Zakázání funkce ViewState

Všechny ovládací prvky ASP.NET mohou volitelně zachovat svůj stav do stavu zobrazení, které je serializováno jako skryté pole formuláře ve vykresleném kódu HTML. Zobrazení stavu se používá ovládacími prvky k zapamatovávání jejich programově změněných stavů napříč zpětnými operacemi, jako jsou data svázaná s webovým datovým ovládacím prvku. I když stav zobrazení umožňuje zapamatování informací napříč zpětnými operacemi, zvyšuje velikost kódu, který musí být odeslán klientovi, a pokud není pečlivě sledován, může vést k závažnému přefouknutí stránky. Datové webové ovládací prvky, zejména GridView, jsou obzvláště proslulé přidáním desítek kilobajtů značek na stránku. I když takový nárůst může být pro uživatele širokopásmového připojení nebo intranetu zanedbatelný, stav zobrazení může uživatelům vytáčeného připojení přidat několik sekund k době odezvy.

Pokud chcete zjistit dopad stavu zobrazení, přejděte na stránku v prohlížeči a pak zobrazte zdroj odeslaný webovou stránkou (v Internet Exploreru přejděte do nabídky Zobrazit a zvolte možnost Zdroj). Můžete také zapnout trasování stránek , abyste viděli přidělení stavu zobrazení používané jednotlivými ovládacími prvky na stránce. Informace o stavu zobrazení jsou serializovány ve skrytém poli formuláře s názvem __VIEWSTATE, který se nachází v elementu <div> bezprostředně za počáteční <form> značkou. Stav zobrazení je zachován pouze při použití webového formuláře; Pokud vaše ASP.NET stránka neobsahuje <form runat="server"> ve své deklarativní syntaxi, nebude __VIEWSTATE ve vykreslené značek skryté pole formuláře.

Pole __VIEWSTATE formuláře vygenerované stránkou předlohy přidá do vygenerovaného kódu stránky přibližně 1 800 bajtů. Tato nadbytečná nadsáka je způsobena především repeater ovládací prvek, protože obsah ovládacího prvku SiteMapDataSource je trvale uložen pro zobrazení stavu. I když se dalších 1 800 bajtů nemusí zdát jako příliš mnoho, na co byste se mohli nadchnout, při použití objektu GridView s mnoha poli a záznamy může stav zobrazení snadno nabobtnat 10 nebo více.

Stav zobrazení lze zakázat na úrovni stránky nebo ovládacího prvku nastavením EnableViewState vlastnosti na False, čímž se velikost vykreslených značek zmenšuje. Vzhledem k tomu, stav zobrazení pro datový webový ovládací prvek zachovává data svázaná s ovládacím prvku data web v rámci zpětného odeslání, při zakázání stavu zobrazení pro ovládací prvek dat web data musí být data vázána na každou a každé zpětné odeslání. V ASP.NET verzi 1.x tato odpovědnost padla na ramena vývojáře stránky; s ASP.NET 2.0, ale webové ovládací prvky dat se v případě potřeby znovu připojí k jejich ovládacímu prvku zdroje dat při každém zpětném odeslání.

Pokud chcete snížit stav zobrazení stránky, nastavte vlastnost ovládacího prvku EnableViewState Repeater na Falsehodnotu . To lze provést prostřednictvím okno Vlastnosti v Designer nebo deklarativně v zobrazení zdroje. Po provedení této změny by deklarativní kód repeateru měl vypadat takto:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

Po této změně se velikost vykresleného zobrazení stránky zmenšila na pouhých 52 bajtů, což představuje 97% úsporu ve velikosti stavu zobrazení. V kurzech v této sérii zakážeme ve výchozím nastavení stav zobrazení webových ovládacích prvků dat, abychom zmenšili velikost vykreslených značek. Ve většině příkladů EnableViewState se vlastnost nastaví na False a provede se tak bez zmínky. Jediný stav zobrazení času bude popsán ve scénářích, kdy musí být povolen, aby ovládací prvek webu dat poskytoval očekávané funkce.

Krok 4: Přidání navigace s popisem cesty

K dokončení stránky předlohy přidáme na každou stránku prvek navigačního uživatelského rozhraní s popisem cesty. Popis cesty uživatelům rychle zobrazí jejich aktuální pozici v hierarchii lokality. Přidání popisku cesty v ASP.NET 2.0 je snadné přidat SiteMapPath ovládací prvek na stránku; není potřeba žádný kód.

Pro náš web přidejte tento ovládací prvek do hlavičky <div>:

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

Popis cesty zobrazuje aktuální stránku, kterou uživatel navštěvuje v hierarchii mapy webu, a také "nadřazené" uzly mapy webu až do kořenového adresáře (domovská stránka, v naší mapě webu).

Popis cesty zobrazuje aktuální stránku a její nadřazené položky v hierarchii mapy webu.

Obrázek 12: Popis cesty zobrazuje aktuální stránku a její nadřazené položky v hierarchii mapy webu.

Krok 5: Přidání výchozí stránky pro každý oddíl

Kurzy na našem webu jsou rozdělené do různých kategorií Základní hlášení, Filtrování, Vlastní formátování a tak dále se složkou pro každou kategorii a odpovídajícími kurzy jako ASP.NET stránkách v této složce. Každá složka navíc obsahuje Default.aspx stránku. Na této výchozí stránce zobrazíme všechny kurzy pro aktuální oddíl. To znamená, že pro Default.aspxBasicReporting složku ve složce bychom měli odkazy na SimpleDisplay.aspx, DeclarativeParams.aspxa ProgrammaticParams.aspx. Zde můžeme opět použít SiteMap třídu a datový webový ovládací prvek k zobrazení těchto informací na základě mapy webu definované v Web.sitemap.

Pojďme znovu zobrazit neuspořádaný seznam pomocí repeateru, ale tentokrát zobrazíme název a popis kurzů. Vzhledem k tomu, že kód a kód k tomu bude nutné opakovat pro každou Default.aspx stránku, můžeme tuto logiku uživatelského rozhraní zapouzdřovat do uživatelského ovládacího prvku. Na webu vytvořte složku s názvem UserControls a přidejte do této nové položky typu Webový uživatelský ovládací prvek s názvem SectionLevelTutorialListing.ascxa přidejte následující kód:

Přidání nového webového uživatelského ovládacího prvku do složky UserControls

Obrázek 13: Přidání nového webového UserControls uživatelského ovládacího prvku do složky (kliknutím zobrazíte obrázek v plné velikosti)

SectionLevelTutorialListing.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    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.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

V předchozím příkladu repeateru jsme data s opakovačem vázali SiteMap deklarativně, SectionLevelTutorialListing ale uživatelský ovládací prvek to dělá programově. V obslužné rutině Page_Load události se provede kontrola, která zajistí, že se adresa URL této stránky mapuje na uzel v mapě webu. Pokud je tento uživatelský ovládací prvek použit na stránce, která nemá odpovídající <siteMapNode> položku, SiteMap.CurrentNode vrátí Nothing se a žádná data nebudou vázána na repeater. Za předpokladu CurrentNode, že máme , svážeme jeho ChildNodes kolekci s repeaterem. Vzhledem k tomu, že mapa webu je nastavená tak, aby Default.aspx stránka v jednotlivých oddílech byla nadřazenou uzlem všech kurzů v dané části, zobrazí tento kód odkazy a popisy všech kurzů v tomto oddílu, jak je znázorněno na následujícím snímku obrazovky.

Po vytvoření tohoto opakovače otevřete Default.aspx stránky v každé ze složek, přejděte do zobrazení Návrh a jednoduše přetáhněte uživatelský ovládací prvek z Průzkumník řešení na plochu Návrh, kde se má zobrazit seznam kurzů.

Uživatelský ovládací prvek byl přidán do Default.aspx

Obrázek 14: Uživatelský ovládací prvek byl přidán do Default.aspx (kliknutím zobrazíte obrázek v plné velikosti)

Jsou uvedené základní kurzy generování sestav.

Obrázek 15: Seznam základních kurzů vytváření sestav (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

Když je mapa webu definovaná a stránka předlohy dokončená, máme teď konzistentní rozložení stránky a navigační schéma pro naše kurzy související s daty. Bez ohledu na to, kolik stránek na náš web přidáme, je aktualizace rozložení stránky na úrovni celého webu nebo informací o navigaci na webu rychlým a jednoduchým procesem, protože tyto informace jsou centralizované. Konkrétně se informace o rozložení stránky definují na stránce Site.master předlohy a na mapě webu v Web.sitemapnástroji . K dosažení tohoto rozložení stránky a navigačního mechanismu na úrovni celého webu jsme nemuseli psát žádný kód a v sadě Visual Studio jsme zachovali plnou podporu návrháře WYSIWYG.

Po dokončení vrstvy přístupu k datům a vrstvy obchodní logiky a definování konzistentního rozložení stránky a navigace na webu jsme připraveni začít zkoumat běžné vzory generování sestav. V dalších třech kurzech se podíváme na základní úlohy generování sestav, které zobrazují data načtená z BLL v ovládacích prvcích GridView, DetailsView a FormView.

Všechno nejlepší na programování!

Další čtení

Další informace o tématech probíraných v tomto kurzu najdete v následujících zdrojích informací:

O autorovi

Scott Mitchell, autor sedmi knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Můžete ho zastihnout na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na adrese http://ScottOnWriting.NET.

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavními recenzenty tohoto kurzu byli Liz Shulok, Dennis Patterson a Hilton Giesenow. Chtěli byste si projít své nadcházející články na webu MSDN? Pokud ano, dejte mi řádek na mitchell@4GuysFromRolla.com.

Předchozí