Dela via

Huvudsidor och webbplatsnavigering (C#)

av Scott Mitchell

Ladda ned PDF

En vanlig egenskap hos användarvänliga webbplatser är att de har en konsekvent, webbplatsomfattande sidlayout och navigeringsschema. I den här självstudien går vi igenom hur du kan skapa ett konsekvent utseende på alla sidor som enkelt kan uppdateras.

Inledning

En vanlig egenskap hos användarvänliga webbplatser är att de har en konsekvent, webbplatsomfattande sidlayout och navigeringsschema. ASP.NET 2.0 introducerar två nya funktioner som förenklar implementeringen av både en webbplatsomfattande sidlayout och navigeringsschema: huvudsidor och webbplatsnavigering. Med huvudsidor kan utvecklare skapa en webbplatsomfattande mall med avsedda redigerbara regioner. Den här mallen kan sedan tillämpas på ASP.NET sidor på webbplatsen. Sådana ASP.NET sidor behöver bara ange innehåll för huvudsidans angivna redigerbara regioner, alla andra markeringar på huvudsidan är identiska för alla ASP.NET sidor som använder huvudsidan. Med den här modellen kan utvecklare definiera och centralisera en webbplatsomfattande sidlayout, vilket gör det enklare att skapa ett konsekvent utseende på alla sidor som enkelt kan uppdateras.

Platsnavigeringssystemet ger både en mekanism för sidutvecklare att definiera en webbplatskarta och ett API för att webbplatskartan ska efterfrågas programmatiskt. Den nya navigeringswebbplatsen styr Meny, TreeView och SiteMapPath gör det enkelt att återge hela eller delar av webbplatskartan i ett gemensamt navigeringsgränssnittselement. Vi använder standardprovidern för webbplatsnavigering, vilket innebär att webbplatskartan definieras i en XML-formaterad fil.

För att illustrera dessa begrepp och göra vår självstudiewebbplats mer användbar ska vi ägna den här lektionen åt att definiera en webbplatsomfattande sidlayout, implementera en webbplatskarta och lägga till navigeringsgränssnittet. I slutet av den här handledningen har vi en polerad webbplatsdesign för att bygga våra handledningswebbsidor.

Slutresultatet av den här självstudien

Bild 1: Slutresultatet av den här självstudien (Klicka om du vill visa en bild i full storlek)

Steg 1: Skapa huvudsidan

Det första steget är att skapa huvudsidan för webbplatsen. Just nu består vår webbplats endast av typindelade datauppsättningar (Northwind.xsdi App_Code mappen), BLL-klasserna (ProductsBLL.cs, CategoriesBLL.csoch så vidare, allt i App_Code mappen), databasen (NORTHWND.MDFi App_Data mappen), konfigurationsfilen (Web.config) och en CSS-formatmallsfil (Styles.css). Jag rensade dessa sidor och filer som demonstrerar med hjälp av DAL och BLL från de två första självstudierna eftersom vi kommer att gå vidare med dessa exempel i detalj i framtida självstudier.

Filerna i vårt projekt

Bild 2: Filerna i vårt projekt

Om du vill skapa en huvudsida högerklickar du på projektnamnet i Solution Explorer och väljer Lägg till nytt objekt. Välj sedan huvudsidans typ i listan med mallar och ge den Site.masternamnet .

Lägg till en ny huvudsida på webbplatsen

Bild 3: Lägg till en ny huvudsida på webbplatsen (Klicka om du vill visa en bild i full storlek)

Definiera sidlayouten för hela webbplatsen här på huvudsidan. Du kan använda designvyn och lägga till de layout- eller webbkontroller du behöver, eller så kan du manuellt lägga till markeringen för hand i källvyn. På min huvudsida använder jag sammanhängande formatmallar för positionering och format med CSS-inställningarna som definierats i den externa filen Style.css. Även om du inte kan se från markeringarna nedan definieras CSS-reglerna så att navigeringens <div>innehåll är helt positionerat så att det visas till vänster och har en fast bredd på 200 bildpunkter.

Site.master (på engelska)

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

En huvudsida definierar både den statiska sidlayouten och de regioner som kan redigeras av de ASP.NET sidor som använder huvudsidan. Dessa områden som kan redigeras anges av kontrollen ContentPlaceHolder, som kan visas i innehållet <div>. Vår huvudsida har en enda ContentPlaceHolder (MainContent), men huvudsidans kan ha flera ContentPlaceHolders.

Med markeringen ovan visar växlingen till designvyn huvudsidans layout. Alla ASP.NET sidor som använder den här huvudsidan har den här enhetliga layouten, med möjlighet att ange markering för MainContent regionen.

Huvudsidan, när den visas i designvyn

Bild 4: Huvudsidan visas i designvyn (klicka om du vill visa en bild i full storlek)

Steg 2: Lägga till en startsida på webbplatsen

Med huvudsidan definierad är vi redo att lägga till ASP.NET sidor för webbplatsen. Vi börjar med att lägga till Default.aspxwebbplatsens startsida. Högerklicka på projektnamnet i Solution Explorer och välj Lägg till nytt objekt. Välj alternativet Webbformulär i malllistan och ge filen Default.aspxnamnet . Markera också kryssrutan "Välj huvudsida".

Lägg till ett nytt webbformulär och markera kryssrutan Markera huvudsida

Bild 5: Lägg till ett nytt webbformulär, markera kryssrutan Markera huvudsida (Klicka om du vill visa en bild i full storlek)

När du har klickat på OK-knappen uppmanas vi att välja vilken huvudsida den nya ASP.NET sidan ska använda. Du kan ha flera huvudsidor i projektet, men vi har bara en.

Välj huvudsidan som den här ASP.NET sidan ska använda

Bild 6: Välj den huvudsida som den här ASP.NET sidan ska använda (Klicka om du vill visa en bild i full storlek)

När du har valt huvudsidan innehåller de nya ASP.NET sidorna följande markering:

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 I direktivet finns en referens till huvudsidefilen som används (MasterPageFile="~/Site.master"), och ASP.NET sidans markering innehåller en innehållskontroll för var och en av de ContentPlaceHolder-kontroller som definierats ContentPlaceHolderID på huvudsidan, där kontrollen mappar innehållskontrollen till en specifik ContentPlaceHolder. Innehållskontrollen är den plats där du placerar den markering som du vill ska visas i motsvarande ContentPlaceHolder. @Page Ange direktivets Title attribut till Start och lägg till välkomstinnehåll i innehållskontrollen:

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>

Med Title attributet i @Page direktivet kan vi ange sidans rubrik från den ASP.NET sidan, även om elementet <title> definieras på huvudsidan. Vi kan också ange titeln programmatiskt med hjälp av Page.Title. Observera också att huvudsidans referenser till formatmallar (till exempel Style.css) uppdateras automatiskt så att de fungerar på alla ASP.NET sidor, oavsett vilken katalog ASP.NET sidan är i förhållande till huvudsidan.

När vi växlar till designvyn kan vi se hur vår sida kommer att se ut i en webbläsare. Observera att i designvyn för ASP.NET-sidan är endast de områden som kan redigeras redigerbara, medan markeringen som inte är ContentPlaceHolder och definierats i huvudsidan är nedtonad.

Designvyn för sidan ASP.NET visar både redigerbara och icke-redigerbara regioner

Bild 7: Designvyn för ASP.NET-sidan visar både redigerbara och icke-redigerbara regioner (klicka om du vill visa en bild i full storlek)

När sidan Default.aspx besöks av en webbläsare sammanfogar ASP.NET-motorn automatiskt sidans huvudsideinnehåll och ASP. NET:s innehåll och återger det sammanfogade innehållet till den slutliga HTML-koden som skickas ned till den begärande webbläsaren. När huvudsidans innehåll uppdateras, kommer alla ASP.NET-sidor som använder denna huvudsida att återförenas med det nya innehållet från huvudsidan nästa gång de begärs. Kort och kort gör huvudsidesmodellen att en mall för enkel sidlayout kan definieras (huvudsidan) vars ändringar omedelbart återspeglas på hela webbplatsen.

Lägga till ytterligare ASP.NET sidor på webbplatsen

Låt oss ta en stund för att lägga till ytterligare ASP.NET sidmallar på webbplatsen som i framtiden kommer att innehålla de olika rapporteringsdemorna. Det kommer att finnas fler än 35 demonstrationer totalt, så i stället för att skapa alla stub sidor låt oss bara skapa de första få. Eftersom det också kommer att finnas många kategorier av demonstrationer lägger du till en mapp för kategorierna för att bättre hantera demos. Lägg till följande tre mappar för tillfället:

  • BasicReporting
  • Filtering
  • CustomFormatting

Lägg slutligen till nya filer som visas i Solution Explorer i bild 8. När du lägger till varje fil, kom ihåg att markera kryssrutan "Välj huvudsida".

Lägg till följande filer

Bild 8: Lägg till följande filer

Steg 2: Skapa en webbplatskarta

En av utmaningarna med att hantera en webbplats som består av mer än en handfull sidor är att ge ett enkelt sätt för besökare att navigera genom webbplatsen. Till att börja med måste webbplatsens navigeringsstruktur definieras. Sedan måste den här strukturen översättas till navigeringsbara användargränssnittselement, till exempel menyer eller sökvägar. Slutligen måste hela processen underhållas och uppdateras när nya sidor läggs till på webbplatsen och befintliga sidor tas bort. Innan ASP.NET 2.0 var utvecklarna på egen hand för att skapa webbplatsens navigeringsstruktur, underhålla den och översätta den till navigeringsbara användargränssnittselement. Med ASP.NET 2.0 kan utvecklare dock använda det mycket flexibla inbyggda platsnavigeringssystemet.

Webbplatsnavigeringssystemet ASP.NET 2.0 är ett sätt för en utvecklare att definiera en webbplatskarta och sedan komma åt den här informationen via ett programmatiskt API. ASP.NET levereras med en webbplatsöversiktsprovider som förväntar sig att webbplatsöversiktsdata ska lagras i en XML-fil som är formaterad på ett visst sätt. Men eftersom platsnavigeringssystemet bygger på providermodellen kan det utökas för att stödja alternativa sätt att serialisera webbplatsöversiktsinformationen. Jeff Prosises artikel, The SQL Site Map Provider You've Been Waiting For , visar hur du skapar en webbplatsöversiktsleverantör som lagrar webbplatsöversikten i en SQL Server-databas; Ett annat alternativ är att skapa en webbplatsöversiktsprovider baserat på filsystemstrukturen.

I den här självstudien ska vi dock använda standardprovidern för webbplatskartor som levereras med ASP.NET 2.0. Om du vill skapa webbplatskartan högerklickar du bara på projektnamnet i Solution Explorer, väljer Lägg till nytt objekt och väljer alternativet Webbplatsöversikt. Lämna namnet som Web.sitemap och klicka på knappen Lägg till.

Lägga till en webbplatsöversikt i projektet

Bild 9: Lägg till en webbplatskarta i projektet (Klicka om du vill visa en bild i full storlek)

Webbplatsöversiktsfilen är en XML-fil. Observera att Visual Studio tillhandahåller IntelliSense för webbplatskartans struktur. Platsöversiktsfilen måste ha <siteMap> noden som rotnod, som måste innehålla exakt ett <siteMapNode> underordnat element. Det första <siteMapNode> elementet kan sedan innehålla ett godtyckligt <siteMapNode> antal underordnade element.

Definiera webbplatskartan för att efterlikna filsystemstrukturen. Det vill säga: lägg till ett <siteMapNode> element för varje av de tre mapparna och underordnade <siteMapNode> element för varje ASP.NET sida i dessa mappar, så här:

Web.sitemap (på engelska)

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

Webbplatskartan definierar webbplatsens navigeringsstruktur, som är en hierarki som beskriver de olika avsnitten på webbplatsen. Varje <siteMapNode> element i Web.sitemap representerar ett avsnitt i webbplatsens navigeringsstruktur.

Webbplatskartan representerar en hierarkisk navigeringsstruktur

Bild 10: Webbplatskartan representerar en hierarkisk navigeringsstruktur (klicka om du vill visa en bild i full storlek)

ASP.NET exponerar webbplatskartans struktur via .NET Frameworks SiteMap-klass. Den här klassen har en CurrentNode egenskap som returnerar information om avsnittet som användaren för närvarande besöker. RootNode Egenskapen returnerar roten på webbplatskartan (Start, på vår webbplatskarta). CurrentNode Både egenskaperna och RootNode returnerar SiteMapNode-instanser, som har egenskaper som ParentNode, ChildNodes, NextSibling, PreviousSiblingoch så vidare, som gör det möjligt att gå igenom platskartahierarkin.

Steg 3: Visa en meny baserat på webbplatskartan

Åtkomst till data i ASP.NET 2.0 kan utföras programmatiskt, till exempel i ASP.NET 1.x eller deklarativt genom de nya datakällans kontroller. Det finns flera inbyggda datakällkontroller, till exempel SqlDataSource-kontrollen, för åtkomst till relationsdatabasdata, ObjectDataSource-kontrollen, för åtkomst till data från klasser och andra. Du kan till och med skapa egna anpassade datakällakontroller.

Datakällans kontroller fungerar som en proxy mellan din ASP.NET-sida och underliggande data. För att visa datakällans hämtade data lägger vi vanligtvis till ytterligare en webbkontroll på sidan och binder den till datakällans kontroll. Om du vill binda en webbkontroll till en datakällakontroll anger du helt enkelt webbkontrollens DataSourceID egenskap till värdet för datakällakontrollens ID egenskap.

För att underlätta arbetet med webbplatskartans data ASP.NET innehåller kontrollen SiteMapDataSource, som gör att vi kan binda en webbkontroll mot webbplatsens webbplatskarta. Två webbkontroller som TreeView och Menu ofta används för att tillhandahålla ett navigeringsanvändargränssnitt. Om du vill binda webbplatsöversiktsdata till en av dessa två kontroller lägger du helt enkelt till en SiteMapDataSource på sidan tillsammans med en TreeView- eller menykontroll vars DataSourceID egenskap anges i enlighet med detta. Vi kan till exempel lägga till en menykontroll på huvudsidan med hjälp av följande markering:

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

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

För en finare kontroll över den utgivna HTML-koden kan vi binda Kontrollen SiteMapDataSource till Repeater-kontrollen, så här:

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

Kontrollen SiteMapDataSource returnerar platsöversiktshierarkin en nivå i taget, från och med rotplatsmappningsnoden (Start, på webbplatskartan), sedan nästa nivå (Grundläggande rapportering, filtreringsrapporter och anpassad formatering) och så vidare. När du binder SiteMapDataSource till en Repeater räknas den första nivån som returneras och instansierar ItemTemplate för varje SiteMapNode instans på den första nivån. För att få åtkomst till en viss egenskap för SiteMapNode, kan vi använda Eval(propertyName), vilket är hur vi hämtar varje SiteMapNodes Url och Title-egenskaper för HyperLink-kontrollen.

Repeater-exemplet ovan återger följande markering:

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

De här platskartanoderna (grundläggande rapportering, filtreringsrapporter och anpassad formatering) utgör den andra nivån av webbplatskartan som återges, inte den första. Det beror på att egenskapen SiteMapDataSource är inställd på False, vilket gör att SiteMapDataSource kringgår rotplatsmappningsnoden ShowStartingNode och i stället börjar med att returnera den andra nivån i platsöversiktshierarkin.

Om du vill visa underordnade objekt för Grundläggande rapportering, filtrering av rapporter och anpassad formatering SiteMapNode kan vi lägga till ytterligare en Repeater i den första Repeater-funktionen ItemTemplate. Den andra repeatern kommer att bindas till SiteMapNode-instansens ChildNodes-egenskap, så här:

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

Dessa två Repeaters resulterar i följande markering (vissa markeringar har tagits bort för tydlighet):

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

Med hjälp av CSS-format som valts från Rachel Andrews bok The CSS Anthology: 101 Essential Tips, Tricks, & Hacks, är <ul> och <li> elementen stylade så att koden ger följande visuella utdata:

En meny som består av två repeterare och vissa CSS

Bild 11: En meny som består av två repeatrar och vissa CSS

Den här menyn finns på huvudsidan och är bunden till den webbplatskarta som definierats i Web.sitemap, vilket innebär att alla ändringar av webbplatskartan omedelbart återspeglas på alla sidor som använder Site.master huvudsidan.

Inaktivera ViewState

Alla ASP.NET kontroller kan eventuellt bevara sitt tillstånd till visningstillståndet, som serialiseras som ett dolt formulärfält i den renderade HTML-koden. Visningstillstånd används av kontroller för att komma ihåg deras programmatiskt ändrade tillstånd över postbacks, till exempel data som är bundna till en datawebbkontroll. Även om visningstillståndet tillåter att information sparas över postbacks ökar storleken på den markering som måste skickas till klienten och kan leda till allvarlig siduppsvälldhet om den inte övervakas noggrant. Datawebbkontroller, särskilt GridView, är särskilt ökända för att lägga till dussintals extra kilobyte på en sida. Även om en sådan ökning kan vara försumbar för bredbandsanvändare eller intranätanvändare, kan visningsstatusen lägga till flera sekunder till uppkopplingstiden för uppringningsmodemanvändare.

Om du vill se effekten av visningstillståndet går du till en sida i en webbläsare och visar sedan källan som skickas av webbsidan (i Internet Explorer går du till menyn Visa och väljer alternativet Källa). Du kan också aktivera sidspårning för att se den vytillståndsallokering som används av var och en av kontrollerna på sidan. Informationen om visningstillstånd serialiseras i ett dolt formulärfält med namnet __VIEWSTATE, som finns i ett <div> element omedelbart efter den inledande <form> taggen. Visningstillståndet sparas bara när ett webbformulär används. Om din ASP.NET-sida inte innehåller en <form runat="server"> i dess deklarativa syntax kommer det inte att finnas ett __VIEWSTATE dolt formulärfält i den renderade markeringen.

Formulärfältet __VIEWSTATE som genereras av huvudsidan lägger till ungefär 1 800 byte till sidans genererade markering. Den här extra uppsvälldheten beror främst på Repeater-kontrollen, eftersom innehållet i SiteMapDataSource-kontrollen sparas för att visa tillståndet. Även om ytterligare 1 800 byte kanske inte verkar så mycket att bli upphetsad över, kan vytillståndet lätt svälla med en faktor på 10 eller mer när du använder en GridView med många fält och poster.

Visningstillståndet kan inaktiveras på sidan eller kontrollnivån genom att ställa in EnableViewState egenskapen på false, vilket minskar storleken på den renderade markeringen. Eftersom visningstillståndet för en datawebbkontroll bevarar data som är bundna till datawebbkontrollen över postbacks, måste data vid inaktivering av visningstillståndet för en datawebbkontroll vara bundna till varje postback. I ASP.NET version 1.x föll detta ansvar på sidutvecklarens axlar. med ASP.NET 2.0 binds dock datawebbkontrollerna om till deras datakällkontroll vid varje postback om det behövs.

Om du vill minska sidans visningstillstånd anger vi repeater-kontrollens EnableViewState egenskap till false. Detta kan göras via fönstret Egenskaper i designern eller deklarativt i källvyn. När du har gjort den här ändringen bör repeaterns deklarativa markering se ut så här:

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

Efter den här ändringen har sidans renderade vytillståndsstorlek krympt till bara 52 byte, en 97-% besparingar i visningstillståndets storlek! I självstudierna i den här serien inaktiverar vi visningstillståndet för datawebbkontrollerna som standard för att minska storleken på den renderade markeringen. I de flesta av exemplen kommer egenskapen EnableViewState att anges till false och det sker utan att nämnas. Det enda tidsvytillståndet kommer att diskuteras är i scenarier där det måste aktiveras för att datawebbkontrollen ska kunna tillhandahålla dess förväntade funktioner.

Steg 4: Att lägga till brödsmulenavigering

För att slutföra huvudsidan ska vi lägga till ett gränssnittselement för sökvägsnavigering på varje sida. Brödsmulan visar snabbt användarna sin aktuella position i webbplatsens hierarki. Att lägga till en sökväg i ASP.NET 2.0 är enkelt; lägg bara till en SiteMapPath-kontroll på sidan, så behövs ingen kod.

För vår webbplats lägger du till den här kontrollen i rubriken <div>:

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

Den navigeringsvägen visar den aktuella sidan som användaren besöker i webbplatshierarkin samt platsnodens "föregångare", hela vägen upp till roten (Hem, på vår webbplatskarta).

Brödsmulan visar den aktuella sidan och dess föregångare i webbplatsens hierarki

Bild 12: Brödsmulan visar den aktuella sidan och dess överordnade sidor i platskartehierarkin

Steg 5: Lägga till standardsidan för varje avsnitt

Självstudierna på vår webbplats är uppdelade i olika kategorier grundläggande rapportering, filtrering, anpassad formatering och så vidare med en mapp för varje kategori och motsvarande självstudier som ASP.NET sidor i den mappen. Dessutom innehåller varje mapp en Default.aspx sida. För den här standardsidan låt oss visa alla handledningar för det aktuella avsnittet. Default.aspx För i BasicReporting mappen skulle vi alltså ha länkar till SimpleDisplay.aspx, DeclarativeParams.aspxoch ProgrammaticParams.aspx. Här kan vi återigen använda SiteMap klassen och en datawebbkontroll för att visa den här informationen baserat på den webbplatsöversikt som definierats i Web.sitemap.

Nu ska vi visa en osorterad lista med en Repeater igen, men den här gången visar vi rubriken och beskrivningen av självstudierna. Eftersom markering och kod för att åstadkomma detta måste upprepas för varje Default.aspx sida kan vi kapsla in den här användargränssnittslogik i en användarkontroll. Skapa en mapp på webbplatsen med namnet UserControls och lägg till ett nytt objekt av typen Web User Control med namnet SectionLevelTutorialListing.ascxoch lägg till följande markering:

Lägga till en ny webbanvändarkontroll i mappen UserControls

Bild 13: Lägg till en ny webbanvändarkontroll i UserControls mappen (Klicka om du vill visa en bild i full storlek)

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

I föregående Repeater-exempel band vi data till SiteMap Repeater deklarativt. SectionLevelTutorialListing Användarkontrollen gör det dock programmatiskt. Page_Load I händelsehanteraren görs en kontroll för att se till att den här sidans URL mappar till en nod i webbplatsöversikten. Om den här användarkontrollen används på en sida som inte har någon motsvarande <siteMapNode>-post, returnerar SiteMap.CurrentNodenull, och inga data bindas till Repeater. Förutsatt att vi har en CurrentNodebinder vi samlingen ChildNodes till Repeater. Eftersom vår webbplatskarta är konfigurerad så att Default.aspx sidan i varje avsnitt är den överordnade noden för alla självstudier i det avsnittet, visar den här koden länkar till och beskrivningar av alla avsnitts självstudier, enligt skärmbilden nedan.

När denna repeater har skapats öppnar du Default.aspx sidorna i var och en av mapparna, går till designvyn och drar helt enkelt användarkontrollen från Solution Explorer till designytan där du vill att handledningslistan ska visas.

Användarkontrollen har lagts till i Default.aspx

Bild 14: Användarkontrollen har lagts till Default.aspx (Klicka om du vill visa en bild i full storlek)

Självstudierna för grundläggande rapportering visas

Bild 15: Grundläggande rapporteringsguider visas (Klicka om du vill visa en bild i full storlek)

Sammanfattning

När webbplatskartan har definierats och huvudsidan är klar har vi nu en konsekvent sidlayout och ett navigeringsschema för våra datarelaterade självstudier. Oavsett hur många sidor vi lägger till på vår webbplats är det en snabb och enkel process att uppdatera webbplatsomfattande sidlayout eller webbplatsnavigeringsinformation på grund av att den här informationen centraliseras. Mer specifikt definieras sidlayoutinformationen på huvudsidan Site.master och webbplatskartan i Web.sitemap. Vi behövde inte skriva någon kod för att uppnå den här webbplatsomfattande sidlayouten och navigeringsmekanismen, och vi behåller fullständigt WYSIWYG-designerstöd i Visual Studio.

När vi har slutfört dataåtkomstskiktet och affärslogiklagret och har definierat en konsekvent sidlayout och webbplatsnavigering är vi redo att börja utforska vanliga rapporteringsmönster. I de kommande tre självstudierna kommer vi att titta på grundläggande rapporteringsuppgifter som visar data som hämtats från BLL i kontrollerna GridView, DetailsView och FormView.

Lycka till med programmerandet!

Ytterligare läsning

Mer information om de ämnen som beskrivs i den här självstudien finns i följande resurser:

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Särskilt tack till

Den här självstudieserien granskades av många användbara granskare. Huvudgranskare för den här självstudien var Liz Shulok, Dennis Patterson och Hilton Giesenow. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.

FöregåendeNästa