Sdílet prostřednictvím

Hlavní stránky a navigace webu (C#)

od Scotta Mitchella

Stáhnout PDF

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

Úvod

Jednou z běžných charakteristik uživatelsky přívětivých webů je, že mají konzistentní rozložení stránky pro celý web a navigační schéma. ASP.NET 2.0 zavádí dvě nové funkce, které výrazně zjednodušují implementaci rozložení stránek na úrovni webu a navigačního schématu: 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ánkách na webu. Takové ASP.NET stránky potřebují jenom obsah pro zadané upravitelné oblasti stránky předlohy, všechny ostatní značky na stránce předlohy jsou stejné na všech ASP.NET stránkách, které používají stránku předlohy. Tento model umožňuje vývojářům definovat a centralizovat rozložení stránek na celém webu, což usnadňuje vytváření konzistentního vzhledu a chování na všech stránkách, které je možné snadno aktualizovat.

Navigační systém webu poskytuje vývojářům stránek mechanismus pro definování mapy webu a rozhraní API pro danou mapu webu, které se má programově dotazovat. Nové webové ovládací prvky Menu, TreeView a SiteMapPath usnadňují vykreslení celé nebo části mapy webu v běž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 definována v souboru ve formátu XML.

Abychom tyto koncepty ilustrovali a zpřístupnily web našich kurzů, pojďme strávit 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 elegantní webový design 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 naše webové stránky skládá pouze z typed DataSet (Northwind.xsdve App_Code složce), tříd BLL (ProductsBLL.cs, CategoriesBLL.csa tak dále, všechny ve App_Code složce), databáze (NORTHWND.MDFve App_Data složce), konfiguračního souboru (Web.config) a souboru šablon stylů CSS (Styles.css). Vyčistil jsem tyto stránky a soubory demonstrující použití DAL a BLL z prvních dvou kurzů, protože budeme znovu provázet tyto příklady podrobněji v budoucích kurzech.

Soubory v našem projektu

Obrázek 2: Soubory v našem projektu

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

Přidat novou hlavní stránku 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é rozložení nebo webové ovládací prvky, které potřebujete, nebo můžete kód přidat ručně v zobrazení Zdroj. Na stránce předlohy používám šablony stylů CSS pro umístění a styly s nastavením CSS definovaným v externím souboru Style.css. Z níže uvedených značek sice nemůžete zjistit, ale pravidla CSS jsou definována tak, aby byl obsah navigace <div>zcela umístěný tak, aby se zobrazoval vlevo a má pevnou šířku 200 pixelů.

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>

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

Po zadání výše uvedeného značkování se při přepnutí do návrhového zobrazení zobrazí rozvržení vzorové stránky. 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.

Hlavní stránka při prohlížení 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

S definovanou stránkou předlohy jsme připraveni přidat ASP.NET stránky webu. Začněme přidáním Default.aspxdomovské stránky našeho webu. V Průzkumníku řešení klikněte pravým tlačítkem myši na název projektu 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 a zaškrtnutí políčka Vybrat stránku předlohy

Obrázek 5: Přidání nového webového formuláře a 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, abychom zvolili, jakou stránku předlohy má tato nová stránka ASP.NET použít. V projektu sice můžete mít více stránek předlohy, ale máme jenom jednu.

Zvolte stránku předlohy, která by měla používat tuto ASP.NET stránku.

Obrázek 6: Zvolte stránku předlohy, která se má použít ASP.NET stránka (kliknutím zobrazíte obrázek v plné velikosti).

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

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>

V direktivě @Page existuje 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 prvku ContentPlaceHolderID Content na konkrétní ContentPlaceHolder. Ovládací prvek Obsah je místo, kam umístíte značku, kterou chcete zobrazit v odpovídajícím contentPlaceHolderu. Nastavte atribut direktivy @PageTitle na domovskou stránku a přidejte do ovládacího prvku Content nějaký uvítací obsah:

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>

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 také nastavit 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 na libovolné stránce ASP.NET bez ohledu na to, jaký adresář je stránka ASP.NET 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í stránky ASP.NET jsou upravitelné pouze oblasti obsahu, zatímco značky, které nejsou součástí ContentPlaceHolder definované na předloze, jsou zobrazeny šedě.

V návrhovém zobrazení stránky ASP.NET se zobrazují 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ž je stránka navštívena prohlížečem, modul ASP.NET automaticky sloučí obsah stránky předlohy stránky a ASP. Net obsah a vykreslí sloučený obsah do konečného HTML, který se odešle do požadovaného prohlížeče. Když je aktualizován obsah stránky předlohy, všechny ASP.NET stránky, které tuto stránku používají, budou mít svůj obsah připojen s novým obsahem stránky předlohy při dalším požadavku. 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

Věnujme chvíli tomu, abychom na web přidali další zástupné stránky ASP.NET, které nakonec budou obsahovat různé ukázky sestav. Celkem bude více než 35 ukázek, takže místo vytváření všech nahrazujících stránek stačí vytvořit jen několik prvních. Vzhledem k tomu, že k dispozici bude také mnoho kategorií ukázek, aby bylo možné lépe spravovat ukázky, 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 v Průzkumníku ř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řidání následujících souborů

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 složeného z více než několika stránek je jednoduchý způsob, jak návštěvníci procházet webem. Aby bylo možné začít, musí být definována navigační struktura webu. Dále musí být tato struktura přeložena do navigačních prvků uživatelského rozhraní, jako jsou nabídky nebo popis cesty. Nakonec je potřeba tento celý proces udržovat a aktualizovat, protože se na web přidají nové stránky a stávající stránky se odeberou. Před ASP.NET 2.0 byli vývojáři sami za účelem vytvoření navigační struktury webu, jeho údržby a překladu do prvků uživatelského rozhraní umožňujících navigaci. S ASP.NET 2.0 ale můžou vývojáři využívat velmi flexibilní integrovaný navigační systém webu.

Navigační systém webu ASP.NET 2.0 poskytuje vývojáři způsob, jak definovat mapu webu a pak získat přístup k informacím prostřednictvím programového rozhraní API. ASP.NET je dodáván se zprostředkovatelem webové mapy, který očekává, že data webové mapy budou uložena v souboru XML, který je formátován určitým způsobem. Vzhledem k tomu, že navigační systém webu je založený na modelu poskytovatele , lze jej rozšířit tak, aby podporoval alternativní způsoby serializace informací o mapě webu. Jeff Prosise článek, Zprostředkovatel mapy webu SQL, na kterého jste čekali , ukazuje, jak vytvořit zprostředkovatele mapy webu, který ukládá mapu webu do databáze SQL Serveru; Další možností je vytvořit zprostředkovatele mapy webu na základě struktury systému souborů.

V tomto kurzu ale použijeme výchozího poskytovatele 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 myši na název projektu v Průzkumníku řešení, zvolte Přidat novou položku a zvolte možnost Mapa webu. Nechte název jako Web.sitemap a poté 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. Tento první <siteMapNode> prvek pak může obsahovat libovolný počet sestupných <siteMapNode> prvků.

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

Mapa webu

<?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 představuje oddíl 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 zpřístupň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 Tato vlastnost vrátí kořen mapy webu (Domovská stránka v naší mapě webu). Obě vlastnosti CurrentNode i RootNode vrací instance SiteMapNode, které mají vlastnosti jako ParentNode, ChildNodes, NextSibling a PreviousSibling, a tak dále, které umožňují procházet hierarchii mapy webu.

Krok 3: Zobrazení nabídky na základě mapy webu

Přístup k datům v ASP.NET 2.0 je možné provádět programově, například v ASP.NET 1.x nebo deklarativním 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 ovládací prvek SqlDataSource, pro přístup k datům relační databáze, ovládací prvek ObjectDataSource, pro přístup k datům ze tříd a další. Můžete dokonce vytvořit své vlastní přizpůsobené ovládací prvky zdroje dat.

Ovládací prvky zdroje dat slouží jako proxy mezi stránkou ASP.NET a podkladovými daty. Abychom mohli zobrazit načtená data ovládacího prvku zdroje dat, obvykle na stránku přidáme další webový ovládací prvek a vytvoříme 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 ASP.NET zahrnuje ovládací prvek SiteMapDataSource, který nám umožňuje vytvořit vazbu webového ovládacího prvku na mapu webu. K poskytování uživatelského rozhraní navigace se běžně používají dva webové ovládací prvky TreeView a Menu. Chcete-li vytvořit vazbu dat mapy webu na jeden z těchto dvou ovládacích prvků, jednoduše přidejte SiteMapDataSource na stránku spolu s ovládacím prvkem TreeView nebo Menu, jehož DataSourceID vlastnost je nastavena odpovídajícím způsobem. Na stránku předlohy můžeme například přidat ovládací prvek menu 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>

V případě jemného stupně kontroly nad vygenerovaným kódem HTML můžeme vytvořit vazbu ovládacího prvku 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 vrátí 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í generování sestav, filtrování sestav a přizpůsobené formátování) atd. Při připojení SiteMapDataSource k Repeateru provede výčet vrácené první úrovně a vytvoří instanci ItemTemplate pro každou SiteMapNode instanci v této první úrovni. Pro přístup k určité vlastnosti SiteMapNode můžeme použít Eval(propertyName), což je způsob, jak získat vlastnosti SiteMapNode a Url každého Title pro ovládací prvek HyperLink.

Výše uvedený příklad Repeateru 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í vytváření sestav, filtrování sestav a přizpůsobené formátování) tvoří druhou úroveň vykreslené mapy webu, nikoli první. Důvodem je to, že vlastnost SiteMapDataSource ShowStartingNode je nastavena na False, což způsobuje, že SiteMapDataSource obchází kořenový uzel mapy webu a místo toho začíná vracením druhé úrovně hierarchie mapy webu.

Abychom zobrazili podřízené prvky 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čeItemTemplate přidat další opakovač. Tento druhý opakovač bude vázán na vlastnost instance SiteMapNodeChildNodes , 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='<%# ((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>

Tyto dva opakovače vedou k následujícímu označení (některé značky byly odebrány kvůli stručnosti):

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

Použití stylů CSS vybraných z knihy Rachel Andrew The CSS Anthology: 101 nezbytných tipů, triků a vylepšení, prvky a <ul> jsou stylovány tak, aby značkování mělo následující vizuální výstup:

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

Obrázek 11: Nabídka složená ze dvou opakovačů a několika CSS pravidel

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

Zakázání funkce ViewState

Všechny ovládací prvky ASP.NET mohou volitelně zachovat svůj stav ve stavu zobrazení, který je serializován jako skryté pole formuláře v vykresleném html. Stav zobrazení používají ovládací prvky k zapamatování jejich programově změněného stavu při opětovných odesláních, jako jsou data svázaná s datovým webovým ovládacím prvkem. Pokud stav zobrazení umožňuje zapamatování informací mezi jednotlivými postbacky, zvětší se velikost výstupu, který musí být odeslán klientovi, a může vést k závažnému naduštění stránky, pokud není pečlivě monitorováno. Webové ovládací prvky pro data, zejména GridView, jsou známé tím, že přidávají desítky dalších kilobajtů značkovacího kódu na stránku. I když takové zvýšení může být zanedbatelné pro uživatele širokopásmového připojení nebo intranetu, stav zobrazení stránky může zvýšit dobu odezvy o několik sekund pro uživatele telefonického připojení.

Pokud chcete zobrazit dopad stavu zobrazení, přejděte na stránku v prohlížeči a zobrazte zdroj odeslaný webovou stránkou (v Internet Exploreru přejděte do nabídky Zobrazení a zvolte možnost Zdroj). Můžete také zapnout trasování stránek a zobrazit 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 prvku <div> bezprostředně za otevírací značkou <form>. Stav zobrazení je trvalý 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 ve vykresleném kódu žádné skryté pole formuláře __VIEWSTATE.

Pole __VIEWSTATE formuláře generované master stránkou přidá přibližně 1 800 bajtů k HTML kódu stránky. Tato nadbytečnost je způsobena především ovládacím prvkem Repeater, protože obsah ovládacího prvku SiteMapDataSource je ukládán do stavu zobrazení. I když se může zdát, že 1 800 bajtů navíc není mnoho k nadšení, při použití GridView s mnoha poli a záznamy se může stav zobrazení snadno zvětšit desetkrát 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 zmenší velikost vykresleného značení. Vzhledem k tomu, že stav zobrazení datovým webovým ovládacím prvkem zachovává data svázaná s datovým webovým ovládacím prvkem napříč zpětnými operacemi, při zakázání stavu zobrazení datového webového ovládacího prvku musí být data svázána při každém postbacku. V ASP.NET verzi 1.x tato odpovědnost spadla na ramena vývojáře stránky; s ASP.NET 2.0 se však ovládací prvky webu dat v případě potřeby znovu propojí s jejich řídícím prvkem zdroje dat.

Chcete-li snížit stav zobrazení stránky, nastavme vlastnost EnableViewState ovládacího prvku Repeater na false. To lze provést prostřednictvím okna Vlastnosti v Návrháři nebo deklarativní v zobrazení Zdroj. 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ž je 97% úspory ve velikosti zobrazení stavu! V tutoriálech této série zakážeme ve výchozím nastavení stav zobrazení datových webových ovládacích prvků ke snížení velikosti vykresleného kódu. Ve většině příkladů bude vlastnost EnableViewState nastavena na false, aniž by se o tom zmiňovalo. Jediný stav zobrazení času bude popsán ve scénářích, ve kterých musí být povoleno, aby ovládací prvek datového webu poskytoval očekávané funkce.

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

Abychom dokončili hlavní stránku, přidáme na každou stránku prvek navigace typu drobečková cesta. Navigační lišta rychle zobrazuje uživatelům jejich aktuální pozici v hierarchii webové stránky. Přidání popisku cesty v ASP.NET 2.0 je snadné přidat na stránku ovládací prvek SiteMapPath; není potřeba žádný kód.

Pro náš web přidejte tento ovládací prvek do záhlaví <div>:

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

Navigační cesta ukazuje aktuální stránku, kterou uživatel navštěvuje v hierarchii mapy webu, a také "nadřazené položky" uzlu mapy webu až po kořen (Domů v naší mapě webu).

Navigační cesta zobrazuje aktuální stránku a její nadřazené položky v hierarchii mapy webu.

Obrázek 12: Drobečková navigace zobrazuje aktuální stránku a její nadřazené položky v hierarchii webu.

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

Kurzy na našem webu jsou rozděleny do různých kategorií jako Základní vytváření sestav, Filtrování, Vlastní formátování a podobně, přičemž pro každou kategorii existuje složka, ve které jsou odpovídající kurzy jako ASP.NET stránky. Každá složka navíc obsahuje Default.aspx stránku. Pro tuto výchozí stránku zobrazíme všechny tutoriály pro aktuální sekci. To znamená, že pro Default.aspx ve složce BasicReporting bychom měli odkazy na SimpleDisplay.aspx, DeclarativeParams.aspx a ProgrammaticParams.aspx. Zde opět můžeme 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 označení a kód, které to mají umožnit, bude nutné opakovat pro každou Default.aspx stránku, můžeme tuto logiku uživatelského rozhraní zahrnout do uživatelského ovládacího prvku. Vytvořte složku volanou UserControls na webu 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 ovládacího prvku webového uživatele do složky UserControls

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

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();
        }
    }
}

V předchozím příkladu Repeateru jsme data SiteMap svázali deklarativně; SectionLevelTutorialListing uživatelský ovládací prvek však data svazuje programově. V obslužné rutině Page_Load události se provede kontrola, která zajistí, že se tato adresa URL stránky mapuje na uzel v mapě webu. Pokud se tento uživatelský ovládací prvek použije na stránce, která neobsahuje odpovídající <siteMapNode> položku, SiteMap.CurrentNode vrátí se null a nebudou vázaná žádná data na repeater. Za předpokladu, že máme CurrentNode, svážeme jeho kolekci ChildNodes s Repeaterem. Naše mapa webu je nastavená tak, aby Default.aspx stránka v jednotlivých sekcích byla nadřazeným uzlem všech kurzů v této sekci. Tento kód zobrazí odkazy a také popisy všech kurzů sekce, jak je ukázáno na snímku obrazovky níže.

Po vytvoření tohoto repeateru otevřete Default.aspx stránky v každé složce, přejděte do návrhového zobrazení a jednoduše přetáhněte uživatelský ovládací prvek z Průzkumníka řešení na návrhovou plochu, kde chcete 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)

Základní návody pro vytváření sestav jsou uvedeny v seznamu.

Obrázek 15: Jsou uvedeny základní výukové programy pro vytváření zpráv (Kliknutím zobrazíte obrázek v plné velikosti).

Shrnutí

S definovanou mapou webu a dokončenou stránkou předlohy teď máme 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 přidáme na náš web, je aktualizace rozložení stránky pro celý web nebo informace o navigaci na webu rychlým a jednoduchým procesem, protože jsou tyto informace centralizované. Konkrétně jsou informace o rozložení stránky definovány na stránce Site.master předlohy a mapě webu v Web.sitemap. K dosažení tohoto rozložení stránky a navigačního mechanismu pro celý web 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 reportování. V dalších třech kurzech se podíváme na základní úlohy vytváření sestav zobrazující data načtená z BLL v ovládacích prvcích GridView, DetailsView a FormView.

Šťastné 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 ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams: Nauč se ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Zvláštní díky

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Vedoucí hodnotící pro tento kurz byli Liz Shulok, Dennis Patterson a Hilton Giesenow. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

předchozíDalší