Pagine master ed esplorazione del sito (VB)
Una caratteristica comune dei siti Web descrittivi è che hanno un layout di pagina coerente e a livello di sito e uno schema di spostamento. Questa esercitazione illustra come creare un aspetto coerente e sentire in tutte le pagine che possono essere facilmente aggiornate.
Introduzione
Una caratteristica comune dei siti Web descrittivi è che hanno un layout di pagina coerente e a livello di sito e uno schema di spostamento. ASP.NET 2.0 introduce due nuove funzionalità che semplificano notevolmente l'implementazione di un layout di pagina a livello di sito e uno schema di spostamento: pagine master e spostamento del sito. Le pagine master consentono agli sviluppatori di creare un modello a livello di sito con aree modificabili designata. Questo modello può quindi essere applicato alle pagine ASP.NET nel sito. Tali ASP.NET pagine richiedono solo contenuto per le aree modificabili specificate della pagina master tutte le altre aree modificabili nella pagina master sono identiche in tutte le pagine ASP.NET che usano la pagina master. Questo modello consente agli sviluppatori di definire e centralizzare un layout di pagina a livello di sito, rendendo quindi più semplice creare un aspetto coerente e sentire in tutte le pagine che possono essere facilmente aggiornate.
Il sistema di spostamento del sito fornisce sia un meccanismo per gli sviluppatori di pagine per definire una mappa del sito sia un'API per la mappa del sito da eseguire query a livello di codice. Il nuovo Web di spostamento controlla menu, TreeView e SiteMapPath semplifica il rendering di tutte o parte della mappa del sito in un elemento dell'interfaccia utente di spostamento comune. Verrà usato il provider di spostamento del sito predefinito, ovvero la mappa del sito verrà definita in un file formattato xml.
Per illustrare questi concetti e rendere più utilizzabile il sito Web esercitazioni, è possibile dedicare questa lezione alla definizione di un layout di pagina a livello di sito, implementazione di una mappa del sito e aggiunta dell'interfaccia utente di spostamento. Alla fine di questa esercitazione si avrà una progettazione di siti Web lucidata per la creazione delle pagine Web dell'esercitazione.
Figura 1: Il risultato finale di questa esercitazione (fare clic per visualizzare l'immagine full-size)
Passaggio 1: Creazione della pagina master
Il primo passaggio consiste nel creare la pagina master per il sito. A questo momento il nostro sito Web è costituito solo da Typed DataSet (, nella cartella), le classiProductsBLL.vb BLL (, CategoriesBLL.vbe così via, tutte nella App_Code cartella), il databaseNORTHWND.MDF (Northwind.xsd, nella App_DataApp_Code cartella), il file di configurazione (Web.config) e un file foglio di stile CSS (Styles.css). Ho pulito queste pagine e file che illustrano l'uso di DAL e BLL dalle prime due esercitazioni, poiché verranno riexaminati questi esempi in dettaglio in esercitazioni future.
Figura 2: File nel progetto
Per creare una pagina master, fare clic con il pulsante destro del mouse sul nome del progetto nella Esplora soluzioni e scegliere Aggiungi nuovo elemento. Selezionare quindi il tipo di pagina master nell'elenco dei modelli e assegnarne il Site.masternome .
Figura 3: Aggiungere una nuova pagina master al sito Web (fare clic per visualizzare l'immagine full-size)
Definire il layout della pagina a livello di sito qui nella pagina master. È possibile usare la visualizzazione Progettazione e aggiungere qualsiasi controllo Layout o Web necessario oppure è possibile aggiungere manualmente il markup in base alla visualizzazione Origine. Nella pagina master si usano fogli di stile a catena per posizionare e stili con le impostazioni CSS definite nel file Style.cssesterno . Anche se non è possibile indicare dal markup illustrato di seguito, le regole CSS sono definite in modo che il <div>contenuto della navigazione sia assolutamente posizionato in modo che venga visualizzato a sinistra e abbia una larghezza fissa di 200 pixel.
Site.master
<%@ Master Language="VB" AutoEventWireup="true"
CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Working with Data Tutorials</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">Working with Data Tutorials</span>
<span class="breadcrumb">
TODO: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:contentplaceholder id="MainContent"
runat="server">
<!-- Page-specific content will go here... -->
</asp:contentplaceholder>
</div>
<div id="navigation">
TODO: Menu will go here...
</div>
</form>
</div>
</body>
</html>
Una pagina master definisce sia il layout di pagina statico che le aree che possono essere modificate dalle pagine ASP.NET che usano la pagina master. Queste aree modificabili contenuto sono indicate dal controllo ContentPlaceHolder, che può essere visualizzato all'interno del contenuto <div>. La pagina master include un singolo ContentPlaceHolder (MainContent), ma la pagina master può avere più ContentPlaceHolder.
Con il markup immesso sopra, passare alla visualizzazione Progettazione mostra il layout della pagina master. Tutte le pagine ASP.NET che usano questa pagina master avranno questo layout uniforme, con la possibilità di specificare il markup per l'area MainContent .
Figura 4: Pagina master, quando visualizzata tramite la visualizzazione progettazione (fare clic per visualizzare l'immagine a dimensioni complete)
Passaggio 2: Aggiunta di una home page al sito Web
Con la pagina master definita, è possibile aggiungere le pagine ASP.NET per il sito Web. Iniziamo aggiungendo Default.aspx, la home page del nostro sito Web. Fare clic con il pulsante destro del mouse sul nome del progetto nella Esplora soluzioni e scegliere Aggiungi nuovo elemento. Selezionare l'opzione Web Form dall'elenco dei modelli e assegnare al file Default.aspxil nome . Selezionare anche la casella di controllo "Seleziona pagina master".
Figura 5: Aggiungere un nuovo modulo Web, selezionare la casella di controllo Seleziona pagina master (Fare clic per visualizzare l'immagine full-size)
Dopo aver fatto clic sul pulsante OK, verrà chiesto di scegliere quale pagina master verrà usata la nuova pagina ASP.NET. Anche se è possibile avere più pagine master nel progetto, ne abbiamo solo una.
Figura 6: scegliere la pagina master di questa pagina ASP.NET deve essere usata (fare clic per visualizzare l'immagine full-size)
Dopo aver scelto la pagina master, le nuove pagine di ASP.NET contengono il markup seguente:
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>
@Page Nella direttiva è presente un riferimento al file di pagina master usato (MasterPageFile="~/Site.master") e il markup della pagina di ASP.NET contiene un controllo Contenuto per ognuno dei controlli ContentPlaceHolder definiti nella pagina master, con il ContentPlaceHolderID mapping del controllo Contenuto a un ContentPlaceHolder specifico. Il controllo Contenuto è la posizione in cui si inserisce il markup che si desidera visualizzare nel contentPlaceHolder corrispondente. Impostare l'attributo @Page della Title direttiva su Home e aggiungere un contenuto accogliente al controllo Contenuto:
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>
L'attributo Title nella @Page direttiva consente di impostare il titolo della pagina dalla pagina ASP.NET, anche se l'elemento <title> è definito nella pagina master. È anche possibile impostare il titolo a livello di codice usando Page.Title. Si noti anche che i riferimenti della pagina master ai fogli di stile (ad esempio Style.css) vengono aggiornati automaticamente in modo che funzionino in qualsiasi pagina ASP.NET, indipendentemente dalla directory in cui la pagina ASP.NET è in relazione alla pagina master.
Passando alla visualizzazione Progettazione è possibile vedere come verrà visualizzata la pagina in un browser. Si noti che nella visualizzazione Progettazione per la pagina ASP.NET che solo le aree modificabili del contenuto sono modificabili, il markup non ContentPlaceHolder definito nella pagina master è disattivato.
Figura 7: Visualizzazione progettazione per la pagina ASP.NET mostra sia le aree modificabili che non modificabili (fare clic per visualizzare l'immagine full-size)
Quando la Default.aspx pagina viene visitata da un browser, il motore di ASP.NET unisce automaticamente il contenuto della pagina master della pagina e l'ASP. Il contenuto di NET e esegue il rendering del contenuto unito nel codice HTML finale inviato al browser di richiesta. Quando il contenuto della pagina master viene aggiornato, tutte le pagine ASP.NET che usano questa pagina master avranno il contenuto remercato con il nuovo contenuto della pagina master alla successiva richiesta. In breve, il modello di pagina master consente di definire un singolo modello di layout di pagina (la pagina master) le cui modifiche vengono immediatamente riflesse nell'intero sito.
Aggiunta di pagine di ASP.NET aggiuntive al sito Web
Per aggiungere altri stub di pagina ASP.NET al sito che conterrà infine le varie demo di report, è necessario prendere un momento. Ci saranno più di 35 demo in totale, quindi anziché creare tutte le pagine stub, è sufficiente creare i primi pochi. Poiché ci saranno anche molte categorie di demo, per gestire meglio le demo aggiungere una cartella per le categorie. Aggiungere le tre cartelle seguenti per il momento:
BasicReportingFilteringCustomFormatting
Aggiungere infine nuovi file, come illustrato nella Esplora soluzioni nella figura 8. Quando si aggiunge ogni file, ricordarsi di selezionare la casella di controllo "Seleziona pagina master".
Figura 8: Aggiungere i file seguenti
Passaggio 2: Creazione di una mappa del sito
Una delle sfide di gestione di un sito Web composto da più di una manciata di pagine offre un modo semplice per i visitatori di spostarsi attraverso il sito. Per iniziare, è necessario definire la struttura di navigazione del sito. Successivamente, questa struttura deve essere tradotta in elementi dell'interfaccia utente navigabili, ad esempio menu o panecrumb. Infine, questo intero processo deve essere mantenuto e aggiornato quando vengono aggiunte nuove pagine al sito e quelle esistenti rimosse. Prima di ASP.NET 2.0, gli sviluppatori erano proprietari per la creazione della struttura di navigazione del sito, la gestione e la conversione in elementi dell'interfaccia utente navigabili. Con ASP.NET 2.0, tuttavia, gli sviluppatori possono usare il sistema di spostamento del sito molto flessibile.
Il sistema di spostamento del sito ASP.NET 2.0 fornisce un mezzo per uno sviluppatore per definire una mappa del sito e quindi accedere a queste informazioni tramite un'API a livello di codice. ASP.NET viene fornito con un provider di mappe del sito che prevede l'archiviazione dei dati della mappa del sito in un file XML formattato in modo specifico. Tuttavia, poiché il sistema di spostamento del sito è basato sul modello del provider , può essere esteso per supportare modi alternativi per serializzare le informazioni sulla mappa del sito. L'articolo di Jeff Prosise illustra come creare un provider di mappe del sito SQL che archivia la mappa del sito in un database SQL Server.
Per questa esercitazione, tuttavia, si userà il provider predefinito della mappa del sito fornito con ASP.NET 2.0. Per creare la mappa del sito, fare semplicemente clic con il pulsante destro del mouse sul nome del progetto nella Esplora soluzioni, scegliere Aggiungi nuovo elemento e scegliere l'opzione Mappa siti. Lasciare il nome come Web.sitemap e fare clic sul pulsante Aggiungi.
Figura 9: Aggiungere una mappa del sito al progetto (fare clic per visualizzare l'immagine full-size)
Il file della mappa del sito è un file XML. Si noti che Visual Studio fornisce IntelliSense per la struttura della mappa del sito. Il file della mappa del sito deve avere il <siteMap> nodo come nodo radice, che deve contenere esattamente un <siteMapNode> elemento figlio. Tale primo <siteMapNode> elemento può quindi contenere un numero arbitrario di elementi discendenti <siteMapNode> .
Definire la mappa del sito per simulare la struttura del file system. Ovvero, aggiungere un <siteMapNode> elemento per ognuna delle tre cartelle e gli elementi figlio <siteMapNode> per ognuna delle pagine ASP.NET in tali cartelle, ad esempio:
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>
La mappa del sito definisce la struttura di navigazione del sito Web, ovvero una gerarchia che descrive le varie sezioni del sito. Ogni <siteMapNode> elemento in Web.sitemap rappresenta una sezione nella struttura di navigazione del sito.
Figura 10: La mappa del sito rappresenta una struttura di navigazione gerarchica (fare clic per visualizzare l'immagine a dimensioni complete)
ASP.NET espone la struttura della mappa del sito tramite la classe SiteMap di .NET Framework. Questa classe ha una CurrentNode proprietà che restituisce informazioni sulla sezione che l'utente sta attualmente visitando. La RootNode proprietà restituisce la radice della mappa del sito (Home, nella mappa del sito). Entrambe le CurrentNodeRootNode proprietà restituiscono istanze di SiteMapNode, che hanno proprietà come ParentNode, ChildNodesNextSiblingPreviousSiblinge così via, che consentono di eseguire la procedura dettagliata della gerarchia della mappa del sito.
Passaggio 3: Visualizzazione di un menu in base alla mappa del sito
L'accesso ai dati in ASP.NET 2.0 può essere eseguito a livello di codice, ad esempio in ASP.NET 1.x o dichiarativo, tramite i nuovi controlli origine dati. Esistono diversi controlli di origine dati predefiniti, ad esempio il controllo SqlDataSource, per l'accesso ai dati del database relazionale, il controllo ObjectDataSource, per l'accesso ai dati da classi e altri. È anche possibile creare controlli di origine dati personalizzati.
I controlli origine dati fungono da proxy tra la pagina ASP.NET e i dati sottostanti. Per visualizzare i dati recuperati da un controllo origine dati, in genere verrà aggiunto un altro controllo Web alla pagina e associarlo al controllo origine dati. Per associare un controllo Web a un controllo origine dati, è sufficiente impostare la proprietà del controllo Web sul valore della proprietà del ID controllo DataSourceID origine dati.
Per facilitare l'uso dei dati della mappa del sito, ASP.NET include il controllo SiteMapDataSource, che consente di associare un controllo Web alla mappa del sito web. Due controlli Web vengono comunemente usati per fornire un'interfaccia utente di spostamento. Per associare i dati del mapping del sito a uno di questi due controlli, è sufficiente aggiungere un oggetto SiteMapDataSource alla pagina insieme a un controllo TreeView o Menu la cui DataSourceID proprietà è impostata di conseguenza. Ad esempio, è possibile aggiungere un controllo Menu alla pagina master usando il markup seguente:
<div id="navigation">
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
Per un grado più fine di controllo sul codice HTML generato, è possibile associare il controllo SiteMapDataSource al controllo Ripetitore, ad esempio:
<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>
Il controllo SiteMapDataSource restituisce la gerarchia della mappa del sito un livello alla volta, a partire dal nodo mappa del sito radice (Home, nella mappa del sito), quindi il livello successivo (creazione di report di base, filtro report e formattazione personalizzata) e così via. Quando si associa SiteMapDataSource a un ripetitore, enumera il primo livello restituito e crea un'istanza ItemTemplate per ogni SiteMapNode istanza di tale primo livello. Per accedere a una determinata proprietà di SiteMapNode, è possibile usare Eval(propertyName), ovvero come ottenere le SiteMapNodeUrl proprietà e Title per il controllo HyperLink.
L'esempio di ripetitore precedente eseguirà il rendering del markup seguente:
<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>
Questi nodi della mappa del sito (creazione di report di base, filtro report e formattazione personalizzata) comprendono il secondo livello della mappa del sito in fase di rendering, non il primo. Ciò avviene perché la proprietà SiteMapDataSource ShowStartingNode è impostata su False, causando il bypass del nodo della mappa del sito radice e iniziare restituendo il secondo livello nella gerarchia della mappa del sito.
Per visualizzare gli elementi figlio per la creazione di report di base, il filtro dei report e la formattazione SiteMapNode personalizzata, è possibile aggiungere un altro ripetitore al ripetitore ItemTemplateiniziale. Questo secondo ripetitore verrà associato alla SiteMapNode proprietà dell'istanza ChildNodes , ad esempio:
<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>
Questi due ripetitori comportano il markup seguente (alcuni markup sono stati rimossi per brevità):
<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>
Usando gli stili CSS scelti dal libro di Rachel AndrewThe CSS Anthology: 101 Essential Tips, Tricks, & Hacks, gli <ul> elementi e <li> sono in stile in modo che il markup produci l'output visivo seguente:
Figura 11: un menu composto da due ripetitori e alcuni CSS
Questo menu si trova nella pagina master e associato alla mappa del sito definita in Web.sitemap, ovvero qualsiasi modifica alla mappa del sito verrà immediatamente riflessa in tutte le pagine che usano la Site.master pagina master.
Disabilitazione di ViewState
Tutti i controlli ASP.NET possono facoltativamente mantenere lo stato dello stato di visualizzazione, serializzato come campo modulo nascosto nel codice HTML sottoposto a rendering. Lo stato di visualizzazione viene usato dai controlli per ricordare lo stato modificato a livello di codice tra postback, ad esempio i dati associati a un controllo Web dati. Mentre lo stato di visualizzazione consente di ricordare le informazioni tra postback, aumenta le dimensioni del markup che deve essere inviato al client e può causare un grave bloat di pagina se non monitorato da vicino. I controlli Web dati in particolare GridView sono particolarmente noti per aggiungere decine di kilobyte aggiuntivi di markup a una pagina. Anche se tale aumento può essere trascurabile per gli utenti a banda larga o intranet, lo stato di visualizzazione può aggiungere diversi secondi al round trip per gli utenti con accesso esterno.
Per visualizzare l'impatto dello stato di visualizzazione, visitare una pagina in un browser e quindi visualizzare l'origine inviata dalla pagina Web (in Internet Explorer, passare al menu Visualizza e scegliere l'opzione Origine). È anche possibile attivare la traccia della pagina per visualizzare l'allocazione dello stato di visualizzazione utilizzata da ognuno dei controlli nella pagina. Le informazioni sullo stato di visualizzazione vengono serializzate in un campo modulo nascosto denominato __VIEWSTATE, situato in un <div> elemento immediatamente dopo il tag di apertura <form> . Lo stato di visualizzazione viene mantenuto solo quando è in uso un Modulo Web; se la pagina ASP.NET non include una <form runat="server"> nella relativa sintassi dichiarativa non sarà presente un __VIEWSTATE campo modulo nascosto nel markup sottoposto a rendering.
Il __VIEWSTATE campo modulo generato dalla pagina master aggiunge circa 1.800 byte al markup generato dalla pagina. Questo bloat aggiuntivo è dovuto principalmente al controllo Repeater, poiché il contenuto del controllo SiteMapDataSource viene mantenuto per visualizzare lo stato. Anche se un numero aggiuntivo di 1.800 byte potrebbe non sembrare molto simile a quello di essere entusiasta, quando si usa Un controllo GridView con molti campi e record, lo stato di visualizzazione può facilmente aumentare di un fattore di 10 o più.
Lo stato di visualizzazione può essere disabilitato a livello di pagina o controllo impostando la EnableViewState proprietà su False, riducendo così le dimensioni del markup sottoposto a rendering. Poiché lo stato di visualizzazione per un controllo Web dati mantiene persistenti i dati associati al controllo Web dei dati tra postback, quando si disabilita lo stato di visualizzazione per un controllo Web dati, i dati devono essere associati a ogni postback. In ASP.NET versione 1.x questa responsabilità è caduta sulle spalle dello sviluppatore di pagine; con ASP.NET 2.0, tuttavia, i controlli Web dati verranno ribinati al controllo origine dati in ogni postback, se necessario.
Per ridurre lo stato di visualizzazione della pagina, impostare la proprietà del EnableViewState controllo Repeater su False. Questa operazione può essere eseguita tramite il Finestra Proprietà nella Designer o dichiarativamente nella visualizzazione Origine. Dopo aver apportato questa modifica, il markup dichiarativo del ripetitore dovrebbe essere simile al seguente:
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
EnableViewState="False">
<ItemTemplate>
... <i>ItemTemplate contents omitted for brevity</i> ...
</ItemTemplate>
</asp:Repeater>
Dopo questa modifica, le dimensioni dello stato di visualizzazione di cui è stato eseguito il rendering della pagina hanno ridotto il numero di 52 byte, un risparmio del 97% nella dimensione dello stato di visualizzazione! Nelle esercitazioni in questa serie verrà disabilitato lo stato di visualizzazione dei controlli Web dati per impostazione predefinita per ridurre le dimensioni del markup sottoposto a rendering. Nella maggior parte degli esempi la EnableViewState proprietà verrà impostata su False e eseguita senza menzionare. L'unico stato di visualizzazione ora verrà illustrato negli scenari in cui deve essere abilitato per consentire al controllo Web dati di fornire la funzionalità prevista.
Passaggio 4: Aggiunta di spostamento di pane
Per completare la pagina master, aggiungere un elemento dell'interfaccia utente di spostamento di tipo breadcrumb a ogni pagina. Il panecrumb mostra rapidamente agli utenti la loro posizione corrente all'interno della gerarchia del sito. L'aggiunta di un panecrumb in ASP.NET 2.0 è semplice aggiungere un controllo SiteMapPath alla pagina; non è necessario alcun codice.
Per il sito, aggiungere questo controllo all'intestazione <div>:
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
Il panecrumb mostra la pagina corrente che l'utente sta visitando nella gerarchia della mappa del sito e nel nodo "predecessori" della mappa del sito, fino alla radice (Home, nella mappa del sito).
Figura 12: Il panecrumb visualizza la pagina corrente e i relativi predecessori nella gerarchia della mappa del sito
Passaggio 5: Aggiunta della pagina predefinita per ogni sezione
Le esercitazioni nel sito sono suddivise in categorie diverse Creazione di report di base, Filtro, Formattazione personalizzata e così via con una cartella per ogni categoria e le esercitazioni corrispondenti come pagine di ASP.NET all'interno di tale cartella. Inoltre, ogni cartella contiene una Default.aspx pagina. Per questa pagina predefinita, verranno visualizzate tutte le esercitazioni per la sezione corrente. Vale a dire, per la Default.aspxBasicReporting cartella sono disponibili collegamenti a SimpleDisplay.aspx, DeclarativeParams.aspxe ProgrammaticParams.aspx. In questo caso, è possibile usare la SiteMap classe e un controllo Web dati per visualizzare queste informazioni in base alla mappa del sito definita in Web.sitemap.
Verrà visualizzato di nuovo un elenco non ordinato usando un ripetitore, ma questa volta verrà visualizzato il titolo e la descrizione delle esercitazioni. Poiché il markup e il codice per eseguire questa operazione dovranno essere ripetuti per ogni Default.aspx pagina, è possibile incapsulare questa logica dell'interfaccia utente in un controllo utente. Creare una cartella nel sito Web denominata UserControls e aggiungere a tale nuovo elemento di tipo Controllo utente Web denominato SectionLevelTutorialListing.ascxe aggiungere il markup seguente:
Figura 13: Aggiungere un nuovo controllo utente Web alla UserControls cartella (fare clic per visualizzare l'immagine full-size)
SectionLevelTutorialListing.ascx
<%@ Control Language="VB" AutoEventWireup="true"
CodeFile="SectionLevelTutorialListing.ascx.vb"
Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate>
<li><asp:HyperLink runat="server"
NavigateUrl='<%# Eval("Url") %>'
Text='<%# Eval("Title") %>'></asp:HyperLink>
- <%# Eval("Description") %></li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
SectionLevelTutorialListing.ascx.vb
Partial Class UserControls_SectionLevelTutorialListing
Inherits UserControl
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If SiteMap.CurrentNode IsNot Nothing Then
TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
TutorialList.DataBind()
End If
End Sub
End Class
Nell'esempio di ripetitore precedente è stato associato i SiteMap dati al ripetitore dichiarativo. SectionLevelTutorialListing Il controllo utente, tuttavia, esegue questa operazione a livello di codice. Page_Load Nel gestore eventi viene eseguito un controllo per assicurarsi che l'URL della pagina venga mappato a un nodo nella mappa del sito. Se questo controllo utente viene usato in una pagina che non ha una voce corrispondente <siteMapNode> , SiteMap.CurrentNode restituirà Nothing e non verranno associati dati al ripetitore. Supponendo che si disponga di un CurrentNodeoggetto , si associa la relativa ChildNodes raccolta al ripetitore. Poiché la mappa del sito è configurata in modo che la Default.aspx pagina in ogni sezione sia il nodo padre di tutte le esercitazioni all'interno di tale sezione, questo codice visualizzerà collegamenti a e descrizioni di tutte le esercitazioni della sezione, come illustrato nella schermata seguente.
Dopo aver creato questo ripetitore, aprire le Default.aspx pagine in ognuna delle cartelle, passare alla visualizzazione Progettazione e trascinare semplicemente il controllo utente dall'Esplora soluzioni nell'area Progettazione in cui si vuole che venga visualizzato l'elenco di esercitazioni.
Figura 14: Il controllo utente è stato aggiunto a Default.aspx (fare clic per visualizzare l'immagine a dimensioni complete)
Figura 15: Le esercitazioni di base sulla creazione di report sono elencate (fare clic per visualizzare l'immagine full-size)
Riepilogo
Con la mappa del sito definita e la pagina master completa, ora è disponibile un layout di pagina coerente e uno schema di spostamento per le esercitazioni correlate ai dati. Indipendentemente dal numero di pagine aggiunte al sito, l'aggiornamento del layout di pagina a livello di sito o le informazioni di spostamento del sito è un processo rapido e semplice a causa di queste informazioni centralizzate. In particolare, le informazioni sul layout della pagina sono definite nella pagina Site.master master e nella mappa del sito in Web.sitemap. Non è necessario scrivere codice per ottenere questo meccanismo di layout e navigazione a livello di sito e mantenere il supporto completo della finestra di progettazione WYSIWYG in Visual Studio.
Dopo aver completato il livello di accesso ai dati e il livello di logica di business e avere un layout di pagina coerente e lo spostamento del sito definiti, è possibile iniziare a esplorare modelli di creazione di report comuni. Nelle tre esercitazioni successive verranno esaminate le attività di creazione di report di base che visualizzano i dati recuperati dal BLL nei controlli GridView, DetailsView e FormView.
Programmazione felice!
Altre informazioni
Per altre informazioni sugli argomenti illustrati in questa esercitazione, vedere le risorse seguenti:
- Panoramica delle pagine master ASP.NET
- Pagine master in ASP.NET 2.0
- modelli di progettazione ASP.NET 2.0
- Panoramica della navigazione del sito ASP.NET
- Esame della navigazione del sito di ASP.NET 2.0
- funzionalità di spostamento del sito ASP.NET 2.0
- Informazioni sullo stato di visualizzazione ASP.NET
- Come fare per: Attivare la traccia per una pagina ASP.NET
- ASP.NET controlli utente
Informazioni sull'autore
Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Microsoft Web dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2,0 in 24 Ore. Può essere raggiunto a mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato in http://ScottOnWriting.NET.
Grazie speciali
Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori principali per questa esercitazione sono stati Liz Shulok, Dennis Patterson e Hilton Giesenow. Interessati a esaminare i prossimi articoli MSDN? In tal caso, lasciami una riga in mitchell@4GuysFromRolla.com.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per