Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
door Scott Mitchell
Een veelvoorkomend kenmerk van gebruiksvriendelijke websites is dat ze een consistente, sitebrede pagina-indeling en navigatieschema hebben. In deze zelfstudie wordt uitgelegd hoe u een consistent uiterlijk kunt maken op alle pagina's die eenvoudig kunnen worden bijgewerkt.
Introductie
Een veelvoorkomend kenmerk van gebruiksvriendelijke websites is dat ze een consistente, sitebrede pagina-indeling en navigatieschema hebben. ASP.NET 2.0 introduceert twee nieuwe functies die het implementeren van zowel een pagina-indeling als een navigatieschema voor de hele site aanzienlijk vereenvoudigen: basispagina's en sitenavigatie. Met basispagina's kunnen ontwikkelaars een sitebrede sjabloon maken met aangewezen bewerkbare regio's. Deze sjabloon kan vervolgens worden toegepast op ASP.NET pagina's op de site. Dergelijke ASP.NET pagina's hoeven alleen inhoud te bieden voor de opgegeven bewerkbare regio's van de basispagina, alle andere markeringen op de basispagina zijn identiek op alle ASP.NET pagina's die gebruikmaken van de basispagina. Met dit model kunnen ontwikkelaars een pagina-indeling voor de hele site definiëren en centraliseren, waardoor het eenvoudiger is om een consistent uiterlijk te creëren op alle pagina's die eenvoudig kunnen worden bijgewerkt.
Het sitenavigatiesysteem biedt zowel een mechanisme voor paginaontwikkelaars voor het definiëren van een siteoverzicht als een API voor die siteoverzicht die programmatisch moet worden opgevraagd. Het nieuwe navigatiewebbesturingselementen Menu, TreeView en SiteMapPath maken het eenvoudig om de hele of een deel van de sitemap weer te geven in een gemeenschappelijk navigatie-interface-element. We gebruiken de standaardsitenavigatieprovider, wat betekent dat ons siteoverzicht wordt gedefinieerd in een bestand met XML-indeling.
Om deze concepten te illustreren en onze zelfstudiewebsite bruikbaarder te maken, besteden we deze les aan het definiëren van een pagina-indeling voor de hele site, het implementeren van een siteoverzicht en het toevoegen van de navigatiegebruikersinterface. Aan het einde van deze zelfstudie hebben we een professioneel websiteontwerp voor het bouwen van onze zelfstudiewebpagina's.
Afbeelding 1: Het eindresultaat van deze zelfstudie (klik hier om de volledige afbeelding weer te geven)
Stap 1: de basispagina maken
De eerste stap is het maken van de basispagina voor de site. Op dit moment bestaat onze website uit alleen de getypte gegevensset (in de Northwind.xsd map), de BLL-klassen (App_Code, ProductsBLL.vbenzovoort, alle in de CategoriesBLL.vb map), de database (App_Codein de NORTHWND.MDF map), het configuratiebestand (App_Data) en een CSS-opmaakmodelbestand (Web.config).Styles.css Ik heb die pagina's en bestanden opgeschoond die het gebruik van de DAL en BLL uit de eerste twee zelfstudies demonstreerden, omdat we deze voorbeelden in toekomstige zelfstudies gedetailleerder zullen bestuderen.
Afbeelding 2: De bestanden in ons project
Als u een basispagina wilt maken, klikt u met de rechtermuisknop op de projectnaam in Solution Explorer en kiest u Nieuw item toevoegen. Selecteer vervolgens het type basispagina in de lijst met sjablonen en geef het een Site.masternaam.
Afbeelding 3: Een nieuwe basispagina toevoegen aan de website (klik om de volledige afbeelding weer te geven)
Definieer hier de pagina-indeling voor de hele site op de basispagina. U kunt de ontwerpweergave gebruiken en de gewenste indelings- of webbesturingselementen toevoegen, of u kunt de opmaak handmatig toevoegen in de bronweergave. Op mijn basispagina gebruik ik trapsgewijze opmaakmodellen voor plaatsing en stijlen met de CSS-instellingen die zijn gedefinieerd in het externe bestand Style.css. Hoewel u niet kunt zien uit de onderstaande markeringen, worden de CSS-regels gedefinieerd, zodat de inhoud van de navigatie <div>absoluut is ingesteld, zodat deze aan de linkerkant wordt weergegeven en een vaste breedte van 200 pixels heeft.
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>
Een basispagina definieert zowel de statische pagina-indeling als de regio's die kunnen worden bewerkt door de ASP.NET pagina's die gebruikmaken van de basispagina. Deze bewerkbare inhoudsgebieden worden aangegeven door het ContentPlaceHolder-besturingselement, dat binnen de inhoud <div> te zien is. Onze basispagina heeft één ContentPlaceHolder (MainContent), maar de basispagina's hebben mogelijk meerdere ContentPlaceHolders.
Wanneer de bovenstaande opmaak is ingevoerd, wordt de indeling van de hoofdpagina weergegeven in de ontwerpweergave. Alle ASP.NET pagina's die gebruikmaken van deze basispagina hebben deze uniforme indeling, met de mogelijkheid om de markeringen voor de MainContent regio op te geven.
Afbeelding 4: De basispagina, wanneer deze wordt bekeken in de ontwerpweergave (klik hier om de afbeelding op volledige grootte weer te geven)
Stap 2: Een startpagina toevoegen aan de website
Nu de basispagina is gedefinieerd, kunt u de ASP.NET pagina's voor de website toevoegen. Laten we beginnen met het toevoegen Default.aspxvan de startpagina van onze website. Klik met de rechtermuisknop op de projectnaam in Solution Explorer en kies Nieuw item toevoegen. Kies de optie Webformulier in de lijst met sjablonen en geef het bestand Default.aspxeen naam. Schakel ook het selectievakje Basispagina selecteren in.
Afbeelding 5: Een nieuw webformulier toevoegen, het selectievakje Basispagina selecteren inschakelen (klik hier om de volledige afbeelding weer te geven)
Nadat u op de knop OK hebt geklikt, wordt u gevraagd te kiezen welke basispagina deze nieuwe ASP.NET pagina moet gebruiken. Hoewel u meerdere basispagina's in uw project kunt hebben, hebben we er slechts één.
Afbeelding 6: Kies de basispagina die deze ASP.NET Pagina moet gebruiken (klik hier om de volledige afbeelding weer te geven)
Na het kiezen van de basispagina bevatten de nieuwe ASP.NET pagina's de volgende markeringen:
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>
In de @Page-richtlijn is er een verwijzing naar het masterpagina-bestand dat wordt gebruikt (MasterPageFile="~/Site.master") en bevat de opmaak van de ASP.NET-pagina een Content-besturingselement voor elk van de ContentPlaceHolder-controls die zijn gedefinieerd op de masterpagina, waarbij de control ContentPlaceHolderID de inhoud aan een specifieke ContentPlaceHolder koppelt. In het besturingselement Inhoud plaatst u de markeringen die u wilt weergeven in de bijbehorende ContentPlaceHolder. Stel het @Page kenmerk van de Title richtlijn in op Home en voeg enkele welkomstinhoud toe aan het Content-besturingselement:
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>
Met Title het kenmerk in de @Page instructie kunnen we de titel van de pagina instellen vanaf de ASP.NET pagina, ook al is het <title> element gedefinieerd op de basispagina. We kunnen de titel ook programmatisch instellen met behulp van Page.Title. Houd er ook rekening mee dat de verwijzingen van de basispagina's naar opmaakmodellen (zoals Style.css) automatisch worden bijgewerkt, zodat ze op elke ASP.NET pagina werken, ongeacht de map waarin de ASP.NET pagina zich bevindt ten opzichte van de basispagina.
Als u overschakelt naar de ontwerpweergave, kunt u zien hoe onze pagina eruitziet in een browser. Houd er rekening mee dat in de ontwerpweergave voor de ASP.NET pagina alleen de regio's waar inhoud kan worden bewerkt, kunnen worden bewerkt. De markeringen die niet als ContentPlaceHolder zijn gedefinieerd op de basispagina worden grijs weergegeven.
Afbeelding 7: In de ontwerpweergave voor de ASP.NET pagina worden zowel de bewerkbare als niet-bewerkbare regio's weergegeven (klik om de volledige afbeelding weer te geven)
Wanneer de Default.aspx pagina door een browser wordt bezocht, combineert de ASP.NET-engine automatisch de inhoud van de masterpagina en de eigen ASP.NET-inhoud, en zet de samengevoegde inhoud om in de definitieve HTML die naar de verzoekende browser wordt verzonden. Wanneer de inhoud van de basispagina wordt bijgewerkt, worden alle ASP.NET pagina's die deze basispagina gebruiken, hun inhoud opnieuw gekoppeld aan de nieuwe basispagina-inhoud wanneer ze de volgende keer worden aangevraagd. Kortom, met het model van de basispagina kan één sjabloon voor pagina-indeling worden gedefinieerd (de basispagina) waarvan de wijzigingen direct worden doorgevoerd op de hele site.
Extra ASP.NET pagina's toevoegen aan de website
Laten we even de tijd nemen om extra ASP.NET pagina-stubs toe te voegen aan de site die uiteindelijk de verschillende rapportagedemo's zal bevatten. Er zijn in totaal meer dan 35 demo's, dus in plaats van alle stub-pagina's te maken, gaan we de eerste paar maken. Omdat er ook veel categorieën demo's zijn, voegt u een map voor de categorieën toe om de demo's beter te beheren. Voeg nu de volgende drie mappen toe:
BasicReportingFilteringCustomFormatting
Voeg ten slotte nieuwe bestanden toe, zoals wordt weergegeven in Solution Explorer in afbeelding 8. Wanneer u elk bestand toevoegt, moet u het selectievakje Basispagina selecteren inschakelen.
Afbeelding 8: De volgende bestanden toevoegen
Stap 2: Een siteoverzicht maken
Een van de uitdagingen van het beheren van een website die bestaat uit meer dan een handvol pagina's is een eenvoudige manier voor bezoekers om door de site te navigeren. Om te beginnen moet de navigatiestructuur van de site worden gedefinieerd. Vervolgens moet deze structuur worden omgezet in navigeerbare elementen van de gebruikersinterface, zoals menu's of breadcrumbs. Ten slotte moet dit hele proces worden onderhouden en bijgewerkt wanneer nieuwe pagina's worden toegevoegd aan de site en bestaande pagina's worden verwijderd. Vóór ASP.NET 2.0 waren ontwikkelaars zelfstandig voor het maken van de navigatiestructuur van de site, het onderhouden ervan en het vertalen ervan in bevaarbare gebruikersinterface-elementen. Met ASP.NET 2.0 kunnen ontwikkelaars echter gebruikmaken van het zeer flexibele ingebouwde sitenavigatiesysteem.
Het ASP.NET 2.0-sitenavigatiesysteem biedt een ontwikkelaar een middel om een siteoverzicht te definiëren en deze informatie vervolgens te openen via een programmatische API. ASP.NET wordt geleverd met een siteoverzichtprovider die verwacht dat siteoverzichtgegevens op een bepaalde manier worden opgeslagen in een XML-bestandsindeling. Maar omdat het sitenavigatiesysteem is gebouwd op het providermodel , kan het worden uitgebreid om alternatieve manieren te ondersteunen voor het serialiseren van de siteoverzichtinformatie. Jeff Prosise's artikel, The SQL Site Map Provider You've Been Waiting For laat zien hoe u een siteoverzichtprovider maakt waarin het siteoverzicht wordt opgeslagen in een SQL Server-database.
Voor deze zelfstudie gebruiken we echter de standaardsiteoverzichtprovider die wordt geleverd met ASP.NET 2.0. Als u het siteoverzicht wilt maken, klikt u met de rechtermuisknop op de projectnaam in Solution Explorer, kiest u Nieuw item toevoegen en kiest u de optie Siteoverzicht. Laat de naam als Web.sitemap staan en klik op de knop Toevoegen.
Afbeelding 9: Een siteoverzicht toevoegen aan uw project (klik hier om de volledige afbeelding weer te geven)
Het siteoverzichtsbestand is een XML-bestand. Merk op dat Visual Studio IntelliSense biedt voor de structuur van de sitemap. Het siteoverzichtsbestand moet het <siteMap> knooppunt hebben als hoofdknooppunt, dat precies één <siteMapNode> onderliggend element moet bevatten. Dat eerste <siteMapNode> element kan vervolgens een willekeurig aantal afstammende <siteMapNode> elementen bevatten.
Definieer het siteoverzicht om de structuur van het bestandssysteem na te bootsen. Voeg dus een <siteMapNode> element toe voor elk van de drie mappen en onderliggende <siteMapNode> elementen voor elk van de ASP.NET pagina's in die mappen, zoals:
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>
Het siteoverzicht definieert de navigatiestructuur van de website, een hiërarchie die de verschillende secties van de site beschrijft. Elk <siteMapNode> element in Web.sitemap vertegenwoordigt een sectie in de navigatiestructuur van de site.
Afbeelding 10: Het siteoverzicht vertegenwoordigt een hiërarchische navigatiestructuur (klik om de afbeelding op volledige grootte weer te geven)
ASP.NET de structuur van het siteoverzicht beschikbaar maakt via de sitemapklasse van .NET Framework. Deze klasse heeft een CurrentNode eigenschap die informatie retourneert over de sectie die de gebruiker momenteel bezoekt. De RootNode eigenschap retourneert de hoofdmap van het siteoverzicht (Start, in ons siteoverzicht). Zowel de eigenschappen CurrentNode en RootNode retourneren SiteMapNode-exemplaren, die eigenschappen hebben zoals ParentNode, ChildNodes, NextSibling, PreviousSibling, enzovoort, zodat de sitemap-hiërarchie kan worden doorlopen.
Stap 3: een menu weergeven op basis van het siteoverzicht
Toegang tot gegevens in ASP.NET 2.0 kan programmatisch worden uitgevoerd, zoals in ASP.NET 1.x of declaratief, via de nieuwe besturingselementen voor gegevensbronnen. Er zijn verschillende ingebouwde besturingselementen voor gegevensbronnen, zoals het besturingselement SqlDataSource, voor toegang tot relationele databasegegevens, het besturingselement ObjectDataSource, voor toegang tot gegevens uit klassen en andere. U kunt zelfs uw eigen aangepaste besturingselementen voor gegevensbronnen maken.
De besturingselementen voor gegevensbronnen fungeren als een proxy tussen uw ASP.NET pagina en de onderliggende gegevens. Om de opgehaalde gegevens van een gegevensbronbesturingselement weer te geven, voegen we doorgaans een ander webbesturingselement toe aan de pagina en binden we dit aan het besturingselement voor de gegevensbron. Als u een webbesturingselement wilt binden aan een besturingselement voor een gegevensbron, stelt u de eigenschap van DataSourceID het webbesturingselement in op de waarde van de eigenschap van het gegevensbronbesturingselement ID .
Om u te helpen bij het werken met de gegevens van het siteoverzicht, bevat ASP.NET het besturingselement SiteMapDataSource, waarmee we een webbesturingselement kunnen binden aan het siteoverzicht van onze website. Twee webbesturingselementen voor treeview en menu worden vaak gebruikt om een gebruikersinterface voor navigatie te bieden. Als u de siteoverzichtgegevens aan een van deze twee besturingselementen wilt koppelen, voegt u een SiteMapDataSource toe aan de pagina, samen met een treeview- of menubesturingselement waarvan de DataSourceID eigenschap dienovereenkomstig is ingesteld. We kunnen bijvoorbeeld een menu-besturingselement toevoegen aan de basispagina met behulp van de volgende markeringen:
<div id="navigation">
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
Voor een nauwkeurigere mate van controle over de verzonden HTML, kunnen we het besturingselement SiteMapDataSource binden aan het besturingselement Repeater, bijvoorbeeld:
<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>
Het besturingselement SiteMapDataSource retourneert de siteoverzichthiërarchie één niveau tegelijk, te beginnen met het hoofdsiteoverzichtknooppunt (Start, in onze siteoverzicht), vervolgens het volgende niveau (Basisrapportage, Filterrapporten en Aangepaste opmaak), enzovoort. Wanneer u de SiteMapDataSource aan een Repeater bindt, wordt het eerste niveau geïnventareerd en ItemTemplate geïnstitueerd voor elk SiteMapNode exemplaar in dat eerste niveau. Voor toegang tot een bepaalde eigenschap van de SiteMapNode kunnen we Eval(propertyName) gebruiken, waarmee we elk SiteMapNode's Url en Title eigenschappen voor de HyperLink-controle krijgen.
In het bovenstaande repeatervoorbeeld worden de volgende markeringen weergegeven:
<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>
Deze siteoverzichtknooppunten (Basisrapportage, Rapporten filteren en Aangepaste opmaak) vormen het tweede niveau van de siteoverzicht die wordt weergegeven, niet de eerste. Dit komt doordat de eigenschap van ShowStartingNode SiteMapDataSource is ingesteld op False, waardoor de SiteMapDataSource het hoofdsiteoverzichtknooppunt omzeilt en in plaats daarvan het tweede niveau in de siteoverzichtshiërarchie retourneert.
Als u de onderliggende elementen voor de basisrapportage, filterrapporten en aangepaste opmaak SiteMapNode wilt weergeven, kunnen we een andere repeater toevoegen aan de initiële repeater ItemTemplate. Deze tweede repeater wordt gebonden aan de SiteMapNode eigenschap van het ChildNodes exemplaar, zoals:
<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>
Deze twee repeaters resulteren in de volgende markeringen (sommige markeringen zijn verwijderd om kort te zijn):
<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>
Het gebruik van CSS-stijlen uit het boek van Rachel Andrew, The CSS Anthology: 101 Essential Tips, Tricks, & Hacks, zorgt ervoor dat de elementen <ul> en <li> zo zijn gestyled dat de markup de volgende visuele uitvoer produceert.
Afbeelding 11: Een menu samengesteld uit twee repeaters en sommige CSS
Dit menu bevindt zich op de basispagina en is gebonden aan het siteoverzicht dat is gedefinieerd, Web.sitemapwat betekent dat elke wijziging in het siteoverzicht onmiddellijk wordt weergegeven op alle pagina's die gebruikmaken van de Site.master basispagina.
ViewState uitschakelen
Alle ASP.NET besturingselementen kunnen optioneel hun status behouden in de weergavestatus, die wordt geserialiseerd als een verborgen formulierveld in de weergegeven HTML. Viewstate wordt door besturingselementen gebruikt om hun programmatisch gewijzigde status te onthouden bij postbacks, zoals de gegevens die zijn gebonden aan een webgegevensbesturingselement. Hoewel de weergavestatus toestaat dat informatie over postbacks wordt onthouden, wordt de grootte van de markeringen vergroot die naar de client moeten worden verzonden en kan dit leiden tot ernstige pagina-bloat als deze niet nauwkeurig wordt bewaakt. Gegevenswebbesturingselementen met name de GridView zijn bijzonder beroemd om tientallen extra kilobytes aan markeringen toe te voegen aan een pagina. Hoewel een dergelijke toename voor breedband- of intranetgebruikers te verwaarlozen kan zijn, kan de weergavetoestand het proces met enkele seconden vertragen voor inbelgebruikers.
Als u de impact van de weergavestatus wilt zien, gaat u naar een pagina in een browser en bekijkt u vervolgens de bron die is verzonden door de webpagina (in Internet Explorer gaat u naar het menu Beeld en kiest u de optie Bron). U kunt ook paginatracering inschakelen om de weergavestatustoewijzing weer te geven die door elk van de besturingselementen op de pagina wordt gebruikt. De informatie over de weergavestatus wordt geserialiseerd in een verborgen formulierveld met de naam__VIEWSTATE, dat zich direct na de openingstag <div> in een <form> element bevindt. De weergavestatus blijft alleen behouden wanneer er een webformulier wordt gebruikt; als de ASP.NET-pagina geen <form runat="server"> in zijn declaratieve syntaxis bevat, zal er geen __VIEWSTATE verborgen formulierveld zijn in de weergegeven markup.
Het __VIEWSTATE formulierveld dat door de basispagina wordt gegenereerd, telt ongeveer 1800 bytes toe aan de gegenereerde markeringen van de pagina. Deze extra bloat wordt voornamelijk veroorzaakt door het besturingselement Repeater, omdat de inhoud van het besturingselement SiteMapDataSource behouden blijft om de status weer te geven. Hoewel een extra 1800 bytes misschien niet veel lijkt, kan de weergavestatus bij gebruik van een GridView met veel velden en records gemakkelijk met een factor van 10 of meer toenemen.
Op paginaniveau of controleniveau kan de view state worden uitgeschakeld door de eigenschap EnableViewState op False in te stellen, waardoor de grootte van de weergegeven markering wordt verkleind. Aangezien de weergavestatus van een gegevenswebbesturingselement de gegevens die aan het gegevenswebbesturingselement zijn gebonden tussen postbacks behoudt, moeten de gegevens bij het uitschakelen van de weergavestatus bij elke postback opnieuw worden gebonden. In ASP.NET versie 1.x viel deze verantwoordelijkheid op de schouders van de pagina-ontwikkelaar; met ASP.NET 2.0 worden de gegevens-webbesturingselementen echter zo nodig opnieuw verbonden met hun gegevensbron.
Als u de weergavestatus van de pagina wilt verminderen, stellen we de eigenschap van het besturingselement Repeater EnableViewState in op False. Dit kan worden gedaan via het venster Eigenschappen in de ontwerpfunctie of declaratief in de bronweergave. Nadat u deze wijziging hebt aangebracht, moet de declaratieve markering van de repeater er als volgt uitzien:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
EnableViewState="False">
<ItemTemplate>
... <i>ItemTemplate contents omitted for brevity</i> ...
</ItemTemplate>
</asp:Repeater>
Na deze wijziging is de grootte van de weergegeven weergavestatus van de pagina verkleind tot slechts 52 bytes, een besparing van 97% in de grootte van de weergavestatus. In de zelfstudies in deze reeks schakelen we de weergavestatus van de webbesturingselementen voor gegevens standaard uit om de grootte van de weergegeven markeringen te verkleinen. In het merendeel van de voorbeelden wordt de EnableViewState eigenschap ingesteld op False en wordt dit zonder vermelding gedaan. De enige tijdweergavestatus wordt besproken in scenario's waarin deze moet worden ingeschakeld om het gegevenswebbesturingselement de verwachte functionaliteit te bieden.
Stap 4: Breadcrumb-navigatie toevoegen
Als u de basispagina wilt voltooien, voegen we een breadcrumb-navigatie-UI-element toe aan elke pagina. De breadcrumb toont snel de huidige positie van gebruikers binnen de sitehiërarchie. Het toevoegen van een breadcrumb in ASP.NET 2.0 is eenvoudig om een SiteMapPath-besturingselement toe te voegen aan de pagina; er is geen code nodig.
Voeg dit element toe aan de header van onze site <div>:
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
De breadcrumb toont de huidige pagina die de gebruiker bezoekt in de siteoverzichthiërarchie, evenals de 'voorouders' van dat siteoverzichtknooppunt, helemaal tot aan de hoofdmap (Home, in onze siteoverzicht).
Afbeelding 12: De breadcrumb geeft de huidige pagina en de bovenliggende items weer in de siteoverzichthiërarchie
Stap 5: de standaardpagina voor elke sectie toevoegen
De zelfstudies op onze site zijn onderverdeeld in verschillende categorieën Basisrapportage, Filteren, Aangepaste opmaak, enzovoort, met een map voor elke categorie en de bijbehorende zelfstudies als ASP.NET pagina's in die map. Daarnaast bevat elke map een Default.aspx pagina. Voor deze standaardpagina laten we alle tutorials voor de huidige sectie weergeven. Dat wil zeggen, in de map Default.aspx zouden we koppelingen hebben naar BasicReporting, SimpleDisplay.aspx en DeclarativeParams.aspx. Hier kunnen we de SiteMap klasse en een gegevensweb controle gebruiken om deze informatie weer te geven op basis van de sitemap die is gedefinieerd in Web.sitemap.
We gaan een niet-geordende lijst weergeven met behulp van een Repeater, maar deze keer geven we de titel en beschrijving van de tutorials weer. Omdat de opmaak en code om dit te bereiken voor elke Default.aspx pagina moeten worden herhaald, kunnen we deze UI-logica in een gebruikersbeheer inkapselen. Maak een map op de website met de naam UserControls en voeg er een nieuw item van het type Web User Control met de naam SectionLevelTutorialListing.ascxtoe en voeg de volgende markeringen toe:
Afbeelding 13: Een nieuw webgebruikersbesturingselement toevoegen aan de UserControls map (klik om de afbeelding op volledige grootte weer te geven)
SectieLevelTutorialListing.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
In het vorige repeater-voorbeeld hebben we de SiteMap gegevens declaratief gebonden aan de Repeater. SectionLevelTutorialListing Het gebruikersbeheer doet dit echter programmatisch. In de Page_Load gebeurtenis-handler wordt een controle uitgevoerd om ervoor te zorgen dat de URL van deze pagina wordt toegewezen aan een knooppunt in het siteoverzicht. Als dit gebruikersbesturingselement wordt gebruikt op een pagina die geen bijbehorend <siteMapNode> item heeft, zal SiteMap.CurrentNodeNothing retourneren en worden er geen gegevens aan de Repeater gebonden. Ervan uitgaande dat we een CurrentNode, we binden de ChildNodes verzameling aan de Repeater. Omdat ons siteoverzicht zodanig is ingesteld dat de Default.aspx pagina in elke sectie het bovenliggende knooppunt is van alle zelfstudies in die sectie, worden in deze code koppelingen naar en beschrijvingen van alle zelfstudies van de sectie weergegeven, zoals wordt weergegeven in de onderstaande schermafbeelding.
Zodra deze Repeater is gemaakt, opent u de Default.aspx pagina's in elk van de mappen, gaat u naar de ontwerpweergave en sleept u eenvoudig de gebruikerscontrole vanuit de Solution Explorer naar het ontwerpoppervlak waar u de lijst met tutorials wilt weergeven.
Afbeelding 14: Het gebruikersbesturingselement is toegevoegd aan Default.aspx (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 15: De zelfstudies voor basisrapportage worden weergegeven (klik hier om de volledige afbeelding weer te geven)
Samenvatting
Nu het siteoverzicht is gedefinieerd en de basispagina is voltooid, hebben we nu een consistente pagina-indeling en navigatieschema voor onze zelfstudies met betrekking tot gegevens. Ongeacht het aantal pagina's dat we aan onze site toevoegen, is het bijwerken van de pagina-indeling of sitenavigatie-informatie een snel en eenvoudig proces omdat deze informatie wordt gecentraliseerd. De informatie over de pagina-indeling wordt specifiek gedefinieerd op de basispagina Site.master en de siteoverzicht in Web.sitemap. We hoeven geen code te schrijven om dit sitebrede pagina-indeling en navigatiemechanisme te bereiken, en we behouden volledige ondersteuning voor WYSIWYG Designer in Visual Studio.
Nadat u de Data Access-laag en de bedrijfslogicalaag hebt voltooid en een consistente pagina-indeling en sitenavigatie hebt gedefinieerd, zijn we klaar om algemene rapportagepatronen te verkennen. In de volgende drie zelfstudies bekijken we basisrapportagetaken met gegevens die zijn opgehaald uit de BLL in de besturingselementen GridView, DetailsView en FormView.
Veel plezier met programmeren!
Meer lezen
Raadpleeg de volgende bronnen voor meer informatie over de onderwerpen die in deze zelfstudie worden besproken:
- Overzicht van ASP.NET basispagina's
- Sjablonen in ASP.NET 2.0
- ASP.NET 2.0-ontwerpsjablonen
- Overzicht van ASP.NET sitenavigatie
- Sitenavigatie van ASP.NET 2.0 onderzoeken
- ASP.NET 2.0 site navigatiefuncties
- Inzicht in ASP.NET weergavestatus
- Procedure: Tracering inschakelen voor een ASP.NET-pagina
- ASP.NET gebruikersbesturingselementen
Over de auteur
Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.
Speciale dank aan
Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrecensenten voor deze zelfstudie waren Liz Shulok, Dennis Patterson en Hilton Giesenow. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.