Controlli associati a dati
da Microsoft
La maggior parte delle applicazioni ASP.NET si basa su un certo grado di presentazione dei dati da un'origine dati back-end. I controlli associati ai dati sono stati una parte fondamentale dell'interazione con i dati nelle applicazioni Web dinamiche. ASP.NET 2.0 introduce alcuni miglioramenti sostanziali ai controlli associati ai dati, inclusa una nuova classe BaseDataBoundControl e una sintassi dichiarativa.
La maggior parte delle applicazioni ASP.NET si basa su un certo grado di presentazione dei dati da un'origine dati back-end. I controlli associati ai dati sono stati una parte fondamentale dell'interazione con i dati nelle applicazioni Web dinamiche. ASP.NET 2.0 introduce alcuni miglioramenti sostanziali ai controlli associati ai dati, inclusa una nuova classe BaseDataBoundControl e una sintassi dichiarativa.
BaseDataBoundControl funge da classe di base per la classe DataBoundControl e la classe GerarchicaDataBoundControl. In questo modulo verranno illustrate le classi seguenti derivate da DataBoundControl:
- AdRotator
- Controlli elenco
- GridView
- Formview
- Detailsview
Verranno illustrate anche le classi seguenti che derivano dalla classe GerarchicaDataBoundControl:
- TreeView
- Menu
- Sitemappath
Classe DataBoundControl
La classe DataBoundControl è una classe astratta (contrassegnata mustInherit in VB) usata per interagire con dati tabulari o di stile elenco. I controlli seguenti sono alcuni dei controlli che derivano da DataBoundControl.
AdRotator
Il controllo AdRotator consente di visualizzare un banner grafico in una pagina Web collegata a un URL specifico. L'elemento grafico visualizzato viene ruotato usando le proprietà per il controllo. La frequenza di visualizzazione di un annuncio specifico in una pagina può essere configurata usando la proprietà Impressions e gli annunci possono essere filtrati usando il filtro delle parole chiave.
I controlli AdRotator usano un file XML o una tabella in un database per i dati. Gli attributi seguenti vengono usati nei file XML per configurare il controllo AdRotator.
ImageUrl
URL di un'immagine da visualizzare per l'annuncio.
Navigateurl
URL che l'utente deve essere impiegato quando viene fatto clic sull'annuncio. Questo deve essere codificato con URL.
Alternatetext
Testo alternativo visualizzato in una descrizione comando e letto dalle utilità di lettura dello schermo. Visualizza anche quando l'immagine specificata da ImageUrl non è disponibile.
Parola chiave
Definisce una parola chiave che può essere usata quando si usa il filtro delle parole chiave. Se specificato, verranno visualizzati solo gli annunci con una parola chiave corrispondente al filtro delle parole chiave.
Impression
Numero di peso che determina la frequenza di visualizzazione di un determinato annuncio. È relativo all'impressione di altri annunci nello stesso file. Il valore massimo delle impressioni collettive per tutti gli annunci in un file XML è 2.048.000.000 1.
Altezza
Altezza dell'annuncio in pixel.
Larghezza
Larghezza dell'annuncio in pixel.
Nota
Gli attributi Height e Width sostituiscono l'altezza e la larghezza per il controllo AdRotator stesso.
Un file XML tipico potrebbe essere simile al seguente:
<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>
Nell'esempio precedente, l'annuncio per Contoso è due volte più probabile che venga visualizzato come annuncio per il sito Web ASP.NET a causa del valore per l'attributo Impressions.
Per visualizzare gli annunci dal file XML precedente, aggiungere un controllo AdRotator a una pagina e impostare la proprietà AdvertisingFile per puntare al file XML, come illustrato di seguito:
<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />
Se si sceglie di usare una tabella di database come origine dati per il controllo AdRotator, è prima necessario configurare un database usando lo schema seguente:
| Nome colonna | Tipo di dati | Descrizione |
|---|---|---|
| ID | INT | Chiave primaria. Questa colonna può avere qualsiasi nome. |
| ImageUrl | nvarchar(length) | URL relativo o assoluto dell'immagine da visualizzare per l'annuncio. |
| Navigateurl | nvarchar(length) | URL di destinazione per l'annuncio. Se non si specifica un valore, l'annuncio non è un collegamento ipertestuale. |
| Alternatetext | nvarchar(length) | Testo visualizzato se non è possibile trovare l'immagine. In alcuni browser il testo viene visualizzato come descrizione comando. Il testo alternativo viene usato anche per l'accessibilità in modo che gli utenti che non possono vedere l'elemento grafico possano sentire la sua descrizione a voce alta. |
| Parola chiave | nvarchar(length) | Categoria per l'annuncio in cui la pagina può filtrare. |
| Impression | int(4) | Numero che indica la probabilità di visualizzazione dell'annuncio. Più grande sarà il numero, più spesso verrà visualizzato l'annuncio. Il totale di tutti i valori di impressioni nel file XML potrebbe non superare 2.048.000.000 - 1. |
| Larghezza | int(4) | Larghezza dell'immagine in pixel. |
| Altezza | int(4) | Altezza dell'immagine in pixel. |
Nei casi in cui si dispone già di un database con uno schema diverso, è possibile usare le proprietà AlternateTextField, ImageUrlField e NavigateUrlField per eseguire il mapping degli attributi AdRotator al database esistente. Per visualizzare i dati dal database nel controllo AdRotator, aggiungere un controllo origine dati alla pagina, configurare la stringa di connessione per il controllo origine dati per puntare al database e impostare la proprietà DataSourceID del controllo AdRotator sull'ID del controllo origine dati. Nei casi in cui è necessario configurare gli annunci AdRotator a livello di codice, usare l'evento AdCreated. L'evento AdCreated accetta due parametri; un oggetto e l'altro un'istanza di AdCreatedEventArgs. AdCreatedEventArgs è un riferimento all'annuncio creato.
Il frammento di codice seguente imposta imageUrl, NavigateUrl e AlternateText per un annuncio a livello di codice:
protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }
Controlli elenco
I controlli elenco includono ListBox, DropDownList, CheckBoxList, RadioButtonList e BulletedList. Ognuno di questi controlli può essere associato a un'origine dati. Usano un campo nell'origine dati come testo visualizzato e possono usare facoltativamente un secondo campo come valore di un elemento. Gli elementi possono anche essere aggiunti in modo statico in fase di progettazione ed è possibile combinare elementi statici e elementi dinamici aggiunti da un'origine dati.
Per associare dati a un controllo elenco, aggiungere un controllo origine dati alla pagina. Specificare un comando SELECT per il controllo origine dati e quindi impostare la proprietà DataSourceID del controllo elenco sull'ID del controllo origine dati. Utilizzare le proprietà DataTextField e DataValueField per definire il testo visualizzato e il valore per il controllo. Inoltre, è possibile utilizzare la proprietà DataTextFormatString per controllare l'aspetto del testo visualizzato come segue:
| Espressione | Descrizione |
|---|---|
| Prezzo: {0:C} | Per i dati numerici/decimali. Visualizza il valore letterale "Price:" seguito dai numeri in formato valuta. Il formato valuta dipende dall'impostazione delle impostazioni cultura specificata nell'attributo delle impostazioni cultura nella direttiva Page o nel file Web.config. |
| {0:D4} | Per i dati integer. Non è possibile utilizzare con numeri decimali. I numeri interi vengono visualizzati in un campo a spaziatura zero con 4 caratteri di larghezza. |
| {0:N2}% | Per i dati numerici. Visualizza il numero con precisione di 2 cifre decimali seguita dal valore letterale "%". |
| {0:000.0} | Per i dati numerici/decimali. I numeri vengono arrotondati a una posizione decimale. I numeri composti da meno di tre cifre sono riempiti con degli zero. |
| {0:D} | Per i dati di data/ora. Visualizza il formato di data estesa ("Giovedì, Agosto 06, 1996"). Il formato della data dipende dalle impostazioni cultura della pagina o del file Web.config. |
| {0:d} | Per i dati di data/ora. Visualizza il formato di data breve ("12/31/99"). |
| {0:yy-MM-dd} | Per i dati di data/ora. Visualizza la data in formato anno-mese-giorno numerico (96-08-06) |
GridView
Il controllo GridView consente la visualizzazione e la modifica di dati tabulari usando un approccio dichiarativo ed è il successore del controllo DataGrid. Nel controllo GridView sono disponibili le funzionalità seguenti.
- Associazione ai controlli origine dati, ad esempio SqlDataSource.
- Funzionalità di ordinamento predefinite.
- Funzionalità predefinite per l'aggiornamento e l'eliminazione.
- Funzionalità di paging predefinite.
- Funzionalità predefinite di selezione delle righe.
- Accesso a livello di codice al modello a oggetti GridView per impostare in modo dinamico le proprietà, gestire gli eventi e così via.
- Più campi chiave.
- Più campi dati per le colonne di collegamento ipertestuale.
- Aspetto personalizzabile tramite temi e stili.
Campi colonna
Ogni colonna del controllo GridView è rappresentata da un oggetto DataControlField. Per impostazione predefinita, la proprietà AutoGenerateColumns è impostata su true, che crea un oggetto AutoGeneratedField per ogni campo nell'origine dati. Ogni campo viene quindi sottoposto a rendering come colonna nel controllo GridView nell'ordine in cui ogni campo viene visualizzato nell'origine dati. È anche possibile controllare manualmente quali campi di colonna vengono visualizzati nel controllo GridView impostando la proprietà AutoGenerateColumns su false e quindi definendo la propria raccolta di campi di colonna. Tipi di campi di colonna diversi determinano il comportamento delle colonne nel controllo .
Nella tabella seguente sono elencati i diversi tipi di campo di colonna che è possibile utilizzare.
| Tipo di campo colonna | Descrizione |
|---|---|
| BoundField | Visualizza il valore di un campo in un'origine dati. Si tratta del tipo di colonna predefinito del controllo GridView. |
| ButtonField | Visualizza un pulsante di comando per ogni elemento nel controllo GridView. In questo modo è possibile creare una colonna di controlli pulsante personalizzati, ad esempio il pulsante Aggiungi o Rimuovi. |
| CheckBoxField | Visualizza una casella di controllo per ogni elemento nel controllo GridView. Questo tipo di campo di colonna viene comunemente usato per visualizzare i campi con un valore booleano. |
| CommandField | Visualizza i pulsanti di comando predefiniti per eseguire operazioni di selezione, modifica o eliminazione. |
| HyperLinkField | Visualizza il valore di un campo in un'origine dati come collegamento ipertestuale. Questo tipo di campo colonna consente di associare un secondo campo all'URL del collegamento ipertestuale. |
| ImageField | Visualizza un'immagine per ogni elemento nel controllo GridView. |
| Templatefield | Visualizza il contenuto definito dall'utente per ogni elemento nel controllo GridView in base a un modello specificato. Questo tipo di campo colonna consente di creare un campo colonna personalizzato. |
Per definire una raccolta di campi di colonna in modo dichiarativo, aggiungere prima di tutto tag Columns> di apertura e chiusura< tra i tag di apertura e chiusura del controllo GridView. Elencare quindi i campi di colonna da includere tra i tag Columns> di apertura e chiusura<. Le colonne specificate vengono aggiunte all'insieme Columns nell'ordine elencato. L'insieme Columns archivia tutti i campi di colonna nel controllo e consente di gestire a livello di codice i campi delle colonne nel controllo GridView.
I campi colonna dichiarati in modo esplicito possono essere visualizzati in combinazione con campi di colonna generati automaticamente. Quando vengono usati entrambi, viene eseguito il rendering dei campi colonna dichiarati in modo esplicito, seguiti dai campi colonna generati automaticamente.
Associazione a un controllo origine dati
Il controllo GridView può essere associato a un controllo origine dati ,ad esempio SqlDataSource, ObjectDataSource e così via, nonché a qualsiasi origine dati che implementa l'interfaccia System.Collections.IEnumerable,ad esempio System.Data.DataView, System.Collections.ArrayList o System.Collections.Hashtable. Utilizzare uno dei metodi seguenti per associare il controllo GridView al tipo di origine dati appropriato:
- Per eseguire l'associazione a un controllo origine dati, impostare la proprietà DataSourceID del controllo GridView sul valore ID del controllo origine dati. Il controllo GridView esegue automaticamente l'associazione al controllo origine dati specificato e può sfruttare le funzionalità del controllo origine dati per eseguire l'ordinamento, l'aggiornamento, l'eliminazione e la funzionalità di paging. Si tratta del metodo preferito da associare ai dati.
- Per eseguire l'associazione a un'origine dati che implementa l'interfaccia System.Collections.IEnumerable, impostare a livello di codice la proprietà DataSource del controllo GridView sull'origine dati e quindi chiamare il metodo DataBind. Quando si usa questo metodo, il controllo GridView non fornisce funzionalità predefinite di ordinamento, aggiornamento, eliminazione e paging. È necessario fornire questa funzionalità manualmente.
Operazioni di controllo GridView
Il controllo GridView offre molte funzionalità predefinite che consentono all'utente di ordinare, aggiornare, eliminare, selezionare e scorrere gli elementi nel controllo. Quando il controllo GridView è associato a un controllo origine dati, il controllo GridView può sfruttare le funzionalità del controllo origine dati e fornire funzionalità di ordinamento, aggiornamento ed eliminazione automatiche.
Nota
Il controllo GridView può fornire supporto per l'ordinamento, l'aggiornamento e l'eliminazione con altri tipi di origini dati; Tuttavia, sarà necessario fornire un gestore eventi appropriato con l'implementazione per queste operazioni.
L'ordinamento consente all'utente di ordinare gli elementi nel controllo GridView rispetto a una colonna specifica facendo clic sull'intestazione della colonna. Per abilitare l'ordinamento, impostare la proprietà AllowSorting su true.
Le funzionalità di aggiornamento, eliminazione e selezione automatiche sono abilitate quando si fa clic su un pulsante in un campo di colonna ButtonField o TemplateField , con un nome di comando "Modifica", "Elimina" e "Seleziona", rispettivamente. Il controllo GridView può aggiungere automaticamente un campo colonna CommandField con un pulsante Modifica, Elimina o Seleziona se la proprietà AutoGenerateEditButton, AutoGenerateDeleteButton o AutoGenerateSelectButton è impostata rispettivamente su true.
Nota
L'inserimento di record nell'origine dati non è supportato direttamente dal controllo GridView. Tuttavia, è possibile inserire record usando il controllo GridView insieme al controllo DetailsView o FormView.
Anziché visualizzare tutti i record nell'origine dati contemporaneamente, il controllo GridView può suddividere automaticamente i record in pagine. Per abilitare il paging, impostare la proprietà AllowPaging su true.
Personalizzazione dell'aspetto di GridView
È possibile personalizzare l'aspetto del controllo GridView impostando le proprietà di stile per le diverse parti del controllo. Nella tabella seguente sono elencate le diverse proprietà di stile.
| Proprietà Style | Descrizione |
|---|---|
| AlternateRowStyle | Impostazioni di stile per le righe di dati alternate nel controllo GridView. Quando questa proprietà è impostata, le righe di dati vengono visualizzate alternando tra le impostazioni RowStyle e le impostazioni AlternateRowStyle . |
| EditRowStyle | Impostazioni di stile per la riga da modificare nel controllo GridView. |
| EmptyDataRowStyle | Le impostazioni di stile per la riga di dati vuota visualizzata nel controllo GridView quando l'origine dati non contiene record. |
| Footerstyle | Impostazioni di stile per la riga del piè di pagina del controllo GridView. |
| Headerstyle | Impostazioni di stile per la riga di intestazione del controllo GridView. |
| Pagerstyle | Impostazioni di stile per la riga del cercapersone del controllo GridView. |
| Rowstyle | Impostazioni di stile per le righe di dati nel controllo GridView. Quando viene impostata anche la proprietà AlternateRowStyle , le righe di dati vengono visualizzate alternando tra le impostazioni RowStyle e le impostazioni AlternateRowStyle . |
| SelectedRowStyle | Impostazioni di stile per la riga selezionata nel controllo GridView. |
È anche possibile visualizzare o nascondere parti diverse del controllo. Nella tabella seguente sono elencate le proprietà che controllano quali parti vengono visualizzate o nascoste.
| Proprietà | Descrizione |
|---|---|
| ShowFooter | Mostra o nasconde la sezione piè di pagina del controllo GridView. |
| Showheader | Mostra o nasconde la sezione di intestazione del controllo GridView. |
evento
Il controllo GridView fornisce diversi eventi che è possibile programmare. In questo modo è possibile eseguire una routine personalizzata ogni volta che si verifica un evento. Nella tabella seguente sono elencati gli eventi supportati dal controllo GridView.
| Event | Descrizione |
|---|---|
| Pageindexchanged | Si verifica quando si fa clic su uno dei pulsanti del cercapersone, ma dopo che il controllo GridView gestisce l'operazione di paging. Questo evento viene comunemente usato quando è necessario eseguire un'attività dopo che l'utente passa a una pagina diversa nel controllo. |
| Pageindexchanging | Si verifica quando si fa clic su uno dei pulsanti del cercapersone, ma prima che il controllo GridView gestisca l'operazione di paging. Questo evento viene spesso usato per annullare l'operazione di paging. |
| RowCancelingEdit | Si verifica quando si fa clic sul pulsante Annulla di una riga, ma prima che il controllo GridView esce dalla modalità di modifica. Questo evento viene spesso usato per arrestare l'operazione di annullamento. |
| Rowcommand | Si verifica quando si fa clic su un pulsante nel controllo GridView. Questo evento viene spesso usato per eseguire un'attività quando si fa clic su un pulsante nel controllo . |
| Rowcreated | Si verifica quando viene creata una nuova riga nel controllo GridView. Questo evento viene spesso usato per modificare il contenuto di una riga quando viene creata la riga. |
| RowDataBound | Si verifica quando una riga di dati è associata ai dati nel controllo GridView. Questo evento viene spesso usato per modificare il contenuto di una riga quando la riga è associata ai dati. |
| Rowdeleted | Si verifica quando si fa clic sul pulsante Elimina di una riga, ma dopo che il controllo GridView elimina il record dall'origine dati. Questo evento viene spesso usato per controllare i risultati dell'operazione di eliminazione. |
| RowDeleting | Si verifica quando si fa clic sul pulsante Elimina di una riga, ma prima che il controllo GridView elimini il record dall'origine dati. Questo evento viene spesso usato per annullare l'operazione di eliminazione. |
| Modifica righe | Si verifica quando si fa clic sul pulsante Modifica di una riga, ma prima che il controllo GridView entri in modalità di modifica. Questo evento viene spesso usato per annullare l'operazione di modifica. |
| Rowupdated | Si verifica quando si fa clic sul pulsante Aggiorna di una riga, ma dopo che il controllo GridView aggiorna la riga. Questo evento viene spesso usato per controllare i risultati dell'operazione di aggiornamento. |
| Rowupdating | Si verifica quando si fa clic sul pulsante Aggiorna di una riga, ma prima che il controllo GridView aggiorni la riga. Questo evento viene spesso usato per annullare l'operazione di aggiornamento. |
| SelectedIndexChanged | Si verifica quando si fa clic sul pulsante Seleziona di una riga, ma dopo che il controllo GridView gestisce l'operazione di selezione. Questo evento viene spesso usato per eseguire un'attività dopo l'selezione di una riga nel controllo . |
| SelectedIndexChanging | Si verifica quando si fa clic sul pulsante Seleziona di una riga, ma prima che il controllo GridView gestisca l'operazione di selezione. Questo evento viene spesso usato per annullare l'operazione di selezione. |
| Ordinati | Si verifica quando si fa clic sul collegamento ipertestuale per ordinare una colonna, ma dopo che il controllo GridView gestisce l'operazione di ordinamento. Questo evento viene comunemente usato per eseguire un'attività dopo che l'utente fa clic su un collegamento ipertestuale per ordinare una colonna. |
| Ordinamento | Si verifica quando si fa clic sul collegamento ipertestuale per ordinare una colonna, ma prima che il controllo GridView gestisca l'operazione di ordinamento. Questo evento viene spesso utilizzato per annullare l'operazione di ordinamento o per eseguire una routine di ordinamento personalizzata. |
Formview
Il controllo FormView viene utilizzato per visualizzare un singolo record da un'origine dati. È simile al controllo DetailsView, ad eccezione dei modelli definiti dall'utente anziché dei campi riga. La creazione di modelli personalizzati offre maggiore flessibilità nel controllo della modalità di visualizzazione dei dati. Il controllo FormView supporta le funzionalità seguenti:
- Associazione ai controlli origine dati, ad esempio SqlDataSource e ObjectDataSource.
- Funzionalità di inserimento predefinite.
- Funzionalità predefinite per l'aggiornamento e l'eliminazione.
- Funzionalità di paging predefinite.
- Accesso a livello di codice al modello a oggetti FormView per impostare in modo dinamico le proprietà, gestire gli eventi e così via.
- Aspetto personalizzabile tramite modelli, temi e stili definiti dall'utente.
Modelli
Per visualizzare il contenuto del controllo FormView, è necessario creare modelli per le diverse parti del controllo. La maggior parte dei modelli è facoltativa; È tuttavia necessario creare un modello per la modalità in cui è configurato il controllo. Ad esempio, un controllo FormView che supporta l'inserimento di record deve avere un modello di elemento di inserimento definito. Nella tabella seguente sono elencati i diversi modelli che è possibile creare.
| Tipo di modello | Descrizione |
|---|---|
| Edititemtemplate | Definisce il contenuto della riga di dati quando il controllo FormView è in modalità di modifica. Questo modello contiene in genere controlli di input e pulsanti di comando con cui l'utente può modificare un record esistente. |
| Emptydatatemplate | Definisce il contenuto per la riga di dati vuota visualizzata quando il controllo FormView è associato a un'origine dati che non contiene record. Questo modello contiene in genere contenuto per avvisare l'utente che l'origine dati non contiene record. |
| Footertemplate | Definisce il contenuto per la riga del piè di pagina. Questo modello contiene in genere qualsiasi contenuto aggiuntivo che si desidera visualizzare nella riga del piè di pagina. In alternativa, è possibile specificare semplicemente il testo da visualizzare nella riga del piè di pagina impostando la proprietà FooterText. |
| Headertemplate | Definisce il contenuto per la riga di intestazione. Questo modello contiene in genere qualsiasi contenuto aggiuntivo che si desidera visualizzare nella riga di intestazione. In alternativa, è possibile specificare semplicemente il testo da visualizzare nella riga di intestazione impostando la proprietà HeaderText. |
| ItemTemplate | Definisce il contenuto della riga di dati quando il controllo FormView è in modalità di sola lettura. Questo modello contiene in genere contenuto per visualizzare i valori di un record esistente. |
| Insertitemtemplate | Definisce il contenuto della riga di dati quando il controllo FormView è in modalità di inserimento. Questo modello contiene in genere controlli di input e pulsanti di comando con cui l'utente può aggiungere un nuovo record. |
| PagerTemplate | Definisce il contenuto per la riga del cercapersone visualizzata quando la funzionalità di paging è abilitata (quando la proprietà AllowPaging è impostata su true). Questo modello contiene in genere controlli con cui l'utente può passare a un altro record. |
I controlli di input nel modello di elemento di modifica e il modello di elemento di inserimento possono essere associati ai campi di un'origine dati usando un'espressione di associazione bidirezionale. Ciò consente al controllo FormView di estrarre automaticamente i valori del controllo di input per un'operazione di aggiornamento o inserimento. Le espressioni di associazione bidirezionali consentono anche ai controlli di input in un modello di elemento di modifica di visualizzare automaticamente i valori dei campi originali.
Associazione ai dati
Il controllo FormView può essere associato a un controllo origine dati (ad esempio SqlDataSource, AccessDataSource, ObjectDataSource e così via) o a qualsiasi origine dati che implementa l'interfaccia System.Collections.IEnumerable, ad esempio System.Data.DataView, System.Collections.ArrayList e System.Collections.Hashtable. Utilizzare uno dei metodi seguenti per associare il controllo FormView al tipo di origine dati appropriato:
- Per eseguire l'associazione a un controllo origine dati, impostare la proprietà DataSourceID del controllo FormView sul valore ID del controllo origine dati. Il controllo FormView esegue automaticamente l'associazione al controllo origine dati specificato e può sfruttare le funzionalità del controllo origine dati per eseguire l'inserimento, l'aggiornamento, l'eliminazione e la funzionalità di paging. Si tratta del metodo preferito da associare ai dati.
- Per eseguire l'associazione a un'origine dati che implementa l'interfaccia System.Collections.IEnumerable , impostare a livello di codice la proprietà DataSource del controllo FormView sull'origine dati e quindi chiamare il metodo DataBind. Quando si usa questo metodo, il controllo FormView non fornisce funzionalità predefinite di inserimento, aggiornamento, eliminazione e paging. È necessario fornire questa funzionalità usando l'evento appropriato.
Operazioni di controllo FormView
Il controllo FormView offre molte funzionalità predefinite che consentono all'utente di aggiornare, eliminare, inserire e scorrere gli elementi nel controllo . Quando il controllo FormView è associato a un controllo origine dati, il controllo FormView può sfruttare le funzionalità del controllo origine dati e fornire funzionalità di aggiornamento automatico, eliminazione, inserimento e paging. Il controllo FormView può fornire supporto per le operazioni di aggiornamento, eliminazione, inserimento e paging con altri tipi di origini dati; Tuttavia, è necessario fornire un gestore eventi appropriato con l'implementazione per queste operazioni.
Poiché il controllo FormView usa modelli, non consente di generare automaticamente pulsanti di comando per eseguire operazioni di aggiornamento, eliminazione o inserimento. È necessario includere manualmente questi pulsanti di comando nel modello appropriato. Il controllo FormView riconosce determinati pulsanti con le relative proprietà CommandName impostate su valori specifici. Nella tabella seguente sono elencati i pulsanti di comando riconosciuti dal controllo FormView.
| Button | Valore commandname | Descrizione |
|---|---|---|
| Annulla | "Annulla" | Utilizzato nelle operazioni di aggiornamento o inserimento per annullare l'operazione e per eliminare i valori immessi dall'utente. Il controllo FormView torna quindi alla modalità specificata dalla proprietà DefaultMode. |
| Elimina | "Delete" | Utilizzato nelle operazioni di eliminazione per eliminare il record visualizzato dall'origine dati. Genera gli eventi ItemDeleting e ItemDeleted. |
| Modifica | "Modifica" | Usato nelle operazioni di aggiornamento per impostare il controllo FormView in modalità di modifica. Il contenuto specificato nella proprietà EditItemTemplate viene visualizzato per la riga di dati. |
| Insert | "Inserisci" | Utilizzato nelle operazioni di inserimento per tentare di inserire un nuovo record nell'origine dati usando i valori forniti dall'utente. Genera gli eventi ItemInserting e ItemInserted. |
| Nuovo | "Nuovo" | Utilizzato nelle operazioni di inserimento per inserire il controllo FormView in modalità di inserimento. Il contenuto specificato nella proprietà InsertItemTemplate viene visualizzato per la riga di dati. |
| Pagina | "Pagina" | Utilizzato nelle operazioni di paging per rappresentare un pulsante nella riga del cercapersone che esegue il paging. Per specificare l'operazione di paging, impostare la proprietà CommandArgument del pulsante su "Avanti", "Prev", "First", "Last" o l'indice della pagina su cui spostarsi. Genera gli eventi PageIndexChanging e PageIndexChanged. |
| Aggiornamento | "Aggiorna" | Utilizzato nelle operazioni di aggiornamento per tentare di aggiornare il record visualizzato nell'origine dati con i valori forniti dall'utente. Genera gli eventi ItemUpdating e ItemUpdated. |
A differenza del pulsante Elimina (che elimina immediatamente il record visualizzato), quando si fa clic sul pulsante Modifica o Nuovo, il controllo FormView passa rispettivamente alla modalità di modifica o inserimento. In modalità di modifica, il contenuto contenuto contenuto nella proprietà EditItemTemplate viene visualizzato per l'elemento di dati corrente. In genere, il modello di elemento di modifica viene definito in modo che il pulsante Modifica venga sostituito con un pulsante Aggiorna e Annulla. I controlli di input appropriati per il tipo di dati del campo (ad esempio un controllo TextBox o CheckBox) vengono in genere visualizzati con il valore di un campo da modificare. Facendo clic sul pulsante Aggiorna viene aggiornato il record nell'origine dati, mentre facendo clic sul pulsante Annulla vengono abbandonate le modifiche.
Analogamente, il contenuto contenuto contenuto nella proprietà InsertItemTemplate viene visualizzato per l'elemento di dati quando il controllo è in modalità di inserimento. Il modello di elemento di inserimento viene in genere definito in modo che il pulsante Nuovo venga sostituito con un pulsante Inserisci e un pulsante Annulla e vengano visualizzati controlli di input vuoti affinché l'utente immetta i valori per il nuovo record. Facendo clic sul pulsante Inserisci, il record viene inserito nell'origine dati, facendo clic sul pulsante Annulla vengono abbandonate le modifiche.
Il controllo FormView offre una funzionalità di paging, che consente all'utente di passare ad altri record nell'origine dati. Se abilitata, viene visualizzata una riga del cercapersone nel controllo FormView che contiene i controlli di spostamento della pagina. Per abilitare il paging, impostare la proprietà AllowPaging su true. È possibile personalizzare la riga del cercapersone impostando le proprietà degli oggetti contenuti nella proprietà PagerStyle e PagerSettings. Anziché usare l'interfaccia utente della riga del cercapersone predefinita, è possibile creare un'interfaccia utente personalizzata usando la proprietà PagerTemplate .
Personalizzazione dell'aspetto di FormView
È possibile personalizzare l'aspetto del controllo FormView impostando le proprietà di stile per le diverse parti del controllo. Nella tabella seguente sono elencate le diverse proprietà di stile.
| Proprietà Style | Descrizione |
|---|---|
| EditRowStyle | Impostazioni di stile per la riga di dati quando il controllo FormView è in modalità di modifica. |
| EmptyDataRowStyle | Le impostazioni di stile per la riga di dati vuota visualizzata nel controllo FormView quando l'origine dati non contiene record. |
| Footerstyle | Impostazioni di stile per la riga del piè di pagina del controllo FormView. |
| Headerstyle | Impostazioni di stile per la riga di intestazione del controllo FormView. |
| InsertRowStyle | Impostazioni di stile per la riga di dati quando il controllo FormView è in modalità di inserimento. |
| Pagerstyle | Impostazioni di stile per la riga del cercapersone visualizzata nel controllo FormView quando la funzionalità di paging è abilitata. |
| Rowstyle | Impostazioni di stile per la riga di dati quando il controllo FormView è in modalità di sola lettura. |
Eventi FormView
Il controllo FormView fornisce diversi eventi che è possibile programmare. In questo modo è possibile eseguire una routine personalizzata ogni volta che si verifica un evento. Nella tabella seguente sono elencati gli eventi supportati dal controllo FormView.
| Event | Descrizione |
|---|---|
| Itemcommand | Si verifica quando si fa clic su un pulsante all'interno di un controllo FormView. Questo evento viene spesso usato per eseguire un'attività quando si fa clic su un pulsante nel controllo . |
| Itemcreated | Si verifica dopo la creazione di tutti gli oggetti FormViewRow nel controllo FormView. Questo evento viene spesso usato per modificare i valori di un record prima che venga visualizzato. |
| Itemdeleted | Si verifica quando si fa clic su un pulsante Elimina (un pulsante con la relativa proprietà CommandName impostato su "Elimina"), ma dopo che il controllo FormView elimina il record dall'origine dati. Questo evento viene spesso usato per controllare i risultati dell'operazione di eliminazione. |
| ItemDeleting | Si verifica quando si fa clic su un pulsante Elimina, ma prima che il controllo FormView elimini il record dall'origine dati. Questo evento viene spesso usato per annullare l'operazione di eliminazione. |
| Iteminserted | Si verifica quando si fa clic su un pulsante Insert (un pulsante con la relativa proprietà CommandName impostato su "Insert"), ma dopo che il controllo FormView inserisce il record. Questo evento viene spesso usato per controllare i risultati dell'operazione di inserimento. |
| Iteminserting | Si verifica quando si fa clic su un pulsante Inserisci, ma prima che il controllo FormView inserisca il record. Questo evento viene spesso usato per annullare l'operazione di inserimento. |
| Itemupdated | Si verifica quando si fa clic su un pulsante Update (un pulsante con la relativa proprietà CommandName impostato su "Update"), ma dopo che il controllo FormView aggiorna la riga. Questo evento viene spesso usato per controllare i risultati dell'operazione di aggiornamento. |
| Itemupdating | Si verifica quando si fa clic su un pulsante Aggiorna, ma prima che il controllo FormView aggiorni il record. Questo evento viene spesso usato per annullare l'operazione di aggiornamento. |
| ModeChanged | Si verifica dopo la modifica delle modalità del controllo FormView (per modificare, inserire o in sola lettura). Questo evento viene spesso usato per eseguire un'attività quando il controllo FormView cambia modalità. |
| Modechanging | Si verifica prima che il controllo FormView modifichi le modalità (per modificare, inserire o in sola lettura). Questo evento viene spesso usato per annullare una modifica della modalità. |
| Pageindexchanged | Si verifica quando si fa clic su uno dei pulsanti del cercapersone, ma dopo che il controllo FormView gestisce l'operazione di paging. Questo evento viene comunemente usato quando è necessario eseguire un'attività dopo che l'utente passa a un record diverso nel controllo. |
| Pageindexchanging | Si verifica quando si fa clic su uno dei pulsanti del cercapersone, ma prima che il controllo FormView gestisca l'operazione di paging. Questo evento viene spesso usato per annullare l'operazione di paging. |
Detailsview
Il controllo DetailsView viene utilizzato per visualizzare un singolo record da un'origine dati in una tabella, in cui ogni campo del record viene visualizzato in una riga della tabella. Può essere usato in combinazione con un controllo GridView per gli scenari master-detail. Il controllo DetailsView supporta le funzionalità seguenti:
- Associazione ai controlli origine dati, ad esempio SqlDataSource.
- Funzionalità di inserimento predefinite.
- Funzionalità predefinite per l'aggiornamento e l'eliminazione.
- Funzionalità di paging predefinite.
- Accesso a livello di codice al modello a oggetti DetailsView per impostare in modo dinamico le proprietà, gestire gli eventi e così via.
- Aspetto personalizzabile tramite temi e stili.
Campi riga
Ogni riga di dati nel controllo DetailsView viene creata dichiarando un controllo campo. Diversi tipi di campo riga determinano il comportamento delle righe nel controllo . I controlli campo derivano da DataControlField. Nella tabella seguente sono elencati i diversi tipi di campo riga che è possibile utilizzare.
| Tipo di campo colonna | Descrizione |
|---|---|
| BoundField | Visualizza il valore di un campo in un'origine dati come testo. |
| ButtonField | Visualizza un pulsante di comando nel controllo DetailsView. In questo modo è possibile visualizzare una riga con un controllo pulsante personalizzato, ad esempio un pulsante Aggiungi o Rimuovi. |
| CheckBoxField | Visualizza una casella di controllo nel controllo DetailsView. Questo tipo di campo riga viene comunemente usato per visualizzare i campi con un valore booleano. |
| CommandField | Visualizza i pulsanti di comando predefiniti per eseguire operazioni di modifica, inserimento o eliminazione nel controllo DetailsView. |
| HyperLinkField | Visualizza il valore di un campo in un'origine dati come collegamento ipertestuale. Questo tipo di campo riga consente di associare un secondo campo all'URL del collegamento ipertestuale. |
| ImageField | Visualizza un'immagine nel controllo DetailsView. |
| Templatefield | Visualizza il contenuto definito dall'utente per una riga nel controllo DetailsView in base a un modello specificato. Questo tipo di campo riga consente di creare un campo riga personalizzato. |
Per impostazione predefinita, la proprietà AutoGenerateRows è impostata su true, che genera automaticamente un oggetto campo riga associato per ogni campo di un tipo associabile nell'origine dati. I tipi associabili validi sono String, DateTime, Decimal, Guid e il set di tipi primitivi. Ogni campo viene quindi visualizzato in una riga come testo, nell'ordine in cui ogni campo viene visualizzato nell'origine dati.
La generazione automatica delle righe offre un modo rapido e semplice per visualizzare ogni campo nel record. Tuttavia, per usare le funzionalità avanzate del controllo DetailsView, è necessario dichiarare in modo esplicito i campi di riga da includere nel controllo DetailsView. Per dichiarare i campi di riga, impostare prima la proprietà AutoGenerateRows su false. Aggiungere quindi i tag Fields> di apertura e chiusura< tra i tag di apertura e chiusura del controllo DetailsView. Infine, elencare i campi di riga che si desidera includere tra i tag Fields> di apertura e chiusura<. I campi di riga specificati vengono aggiunti all'insieme Fields nell'ordine elencato. L'insieme Fields consente di gestire a livello di codice i campi di riga nel controllo DetailsView.
Nota
I campi di riga generati automaticamente non vengono aggiunti all'insieme Fields.
Associazione a dati con DetailsView
Il controllo DetailsView può essere associato a un controllo origine dati, ad esempio SqlDataSource o AccessDataSource, o a qualsiasi origine dati che implementa l'interfaccia System.Collections.IEnumerable, ad esempio System.Data.DataView, System.Collections.ArrayList e System.Collections.Hashtable.
Utilizzare uno dei metodi seguenti per associare il controllo DetailsView al tipo di origine dati appropriato:
- Per eseguire l'associazione a un controllo origine dati, impostare la proprietà DataSourceID del controllo DetailsView sul valore ID del controllo origine dati. Il controllo DetailsView viene associato automaticamente al controllo origine dati specificato. Si tratta del metodo preferito da associare ai dati.
- Per eseguire l'associazione a un'origine dati che implementa l'interfaccia System.Collections.IEnumerable , impostare a livello di codice la proprietà DataSource del controllo DetailsView sull'origine dati e quindi chiamare il metodo DataBind.
Sicurezza
Questo controllo può essere usato per visualizzare l'input utente, che potrebbe includere script client dannosi. Controllare tutte le informazioni inviate da un client per script eseguibili, istruzioni SQL o altro codice prima di visualizzarlo nell'applicazione. ASP.NET fornisce una funzionalità di convalida della richiesta di input per bloccare script e HTML nell'input utente.
Operazioni sui dati in DetailsView
Il controllo DetailsView offre funzionalità predefinite che consentono all'utente di aggiornare, eliminare, inserire e pagina tramite elementi nel controllo. Quando il controllo DetailsView è associato a un controllo origine dati, il controllo DetailsView può sfruttare le funzionalità del controllo origine dati e fornire aggiornamenti automatici, eliminazione, inserimento e funzionalità di paging.
Il controllo DetailsView può fornire supporto per le operazioni di aggiornamento, eliminazione, inserimento e paging con altri tipi di origini dati; Tuttavia, è necessario fornire l'implementazione per queste operazioni in un gestore eventi appropriato.
Il controllo DetailsView può aggiungere automaticamente un campo di riga CommandField con un pulsante Edit, Delete o New impostando rispettivamente le proprietà AutoGenerateEditButton, AutoGenerateDeleteButton o AutoGenerateInsertButton. A differenza del pulsante Elimina (che elimina immediatamente il record selezionato), quando viene fatto clic sul pulsante Modifica o Nuovo, il controllo DetailsView passa rispettivamente alla modalità di modifica o inserimento. In modalità di modifica, il pulsante Modifica viene sostituito con un pulsante Aggiorna e Annulla. I controlli di input appropriati per il tipo di dati del campo ,ad esempio un controllo TextBox o CheckBox, vengono visualizzati con il valore di un campo da modificare. Facendo clic sul pulsante Aggiorna viene aggiornato il record nell'origine dati, facendo clic sul pulsante Annulla vengono abbandonate le modifiche. Analogamente, in modalità di inserimento, il pulsante Nuovo viene sostituito con un pulsante Inserisci e un pulsante Annulla e i controlli di input vuoti vengono visualizzati per l'utente per immettere i valori per il nuovo record.
Il controllo DetailsView fornisce una funzionalità di paging che consente all'utente di passare ad altri record nell'origine dati. Se abilitato, i controlli di spostamento della pagina vengono visualizzati in una riga del pager. Per abilitare il paging, impostare la proprietà AllowPaging su true. La riga del pager può essere personalizzata usando le proprietà PagerStyle e PagerSettings.
Personalizzazione dell'aspetto di DetailsView
È possibile personalizzare l'aspetto del controllo DetailsView impostando le proprietà dello stile per le diverse parti del controllo. Nella tabella seguente sono elencate le diverse proprietà di stile.
| Proprietà Style | Descrizione |
|---|---|
| AlternateRowStyle | Impostazioni di stile per le righe di dati alternate nel controllo DetailsView. Quando questa proprietà è impostata, le righe di dati vengono visualizzate alternando tra le impostazioni RowStyle e le impostazioni AlternateRowStyle . |
| CommandRowStyle | Impostazioni di stile per la riga contenente i pulsanti di comando predefiniti nel controllo DetailsView. |
| EditRowStyle | Impostazioni di stile per le righe di dati quando il controllo DetailsView è in modalità di modifica. |
| EmptyDataRowStyle | Le impostazioni di stile per la riga di dati vuota visualizzata nel controllo DetailsView quando l'origine dati non contiene record. |
| Footerstyle | Impostazioni di stile per la riga piè di pagina del controllo DetailsView. |
| Headerstyle | Impostazioni di stile per la riga di intestazione del controllo DetailsView. |
| InsertRowStyle | Impostazioni di stile per le righe di dati quando il controllo DetailsView è in modalità di inserimento. |
| Pagerstyle | Impostazioni di stile per la riga del pager del controllo DetailsView. |
| Rowstyle | Impostazioni di stile per le righe di dati nel controllo DetailsView. Quando la proprietà AlternateRowStyle è impostata anche, le righe di dati vengono visualizzate alternando tra le impostazioni RowStyle e le impostazioni AlternateRowStyle . |
| FieldHeaderStyle | Impostazioni di stile per la colonna di intestazione del controllo DetailsView. |
Eventi in DetailsView
Il controllo DetailsView fornisce diversi eventi che è possibile programmare. Ciò consente di eseguire una routine personalizzata ogni volta che si verifica un evento. Nella tabella seguente sono elencati gli eventi supportati dal controllo DetailsView. Il controllo DetailsView eredita anche questi eventi dalle relative classi di base: DataBinding, DataBound, Eliminate, Init, Load, PreRender e Rendering.
| Event | Descrizione |
|---|---|
| Itemcommand | Si verifica quando viene fatto clic su un pulsante nel controllo DetailsView. |
| Itemcreated | Si verifica dopo la creazione di tutti gli oggetti DetailsViewRow nel controllo DetailsView. Questo evento viene spesso usato per modificare i valori di un record prima che venga visualizzato. |
| Itemdeleted | Si verifica quando viene fatto clic su un pulsante Elimina, ma dopo il controllo DetailsView elimina il record dall'origine dati. Questo evento viene spesso usato per controllare i risultati dell'operazione di eliminazione. |
| ItemDeleting | Si verifica quando viene fatto clic su un pulsante Elimina, ma prima del controllo DetailsView elimina il record dall'origine dati. Questo evento viene spesso usato per annullare l'operazione di eliminazione. |
| Iteminserted | Si verifica quando viene fatto clic su un pulsante Inserisci, ma dopo che il controllo DetailsView inserisce il record. Questo evento viene spesso usato per controllare i risultati dell'operazione di inserimento. |
| Iteminserting | Si verifica quando viene fatto clic su un pulsante Inserisci, ma prima del controllo DetailsView inserisce il record. Questo evento viene spesso usato per annullare l'operazione di inserimento. |
| Itemupdated | Si verifica quando viene fatto clic su un pulsante Aggiorna, ma dopo che il controllo DetailsView aggiorna la riga. Questo evento viene spesso usato per controllare i risultati dell'operazione di aggiornamento. |
| Itemupdating | Si verifica quando viene fatto clic su un pulsante Aggiorna, ma prima che il controllo DetailsView aggiorni il record. Questo evento viene spesso usato per annullare l'operazione di aggiornamento. |
| ModeChanged | Si verifica dopo le modalità di modifica del controllo DetailsView (modifica, inserimento o modalità di sola lettura). Questo evento viene spesso usato per eseguire un'attività quando il controllo DetailsView modifica le modalità. |
| Modechanging | Si verifica prima delle modalità di modifica del controllo DetailsView (modifica, inserimento o modalità di sola lettura). Questo evento viene spesso usato per annullare una modifica della modalità. |
| Pageindexchanged | Si verifica quando viene fatto clic su uno dei pulsanti del pager, ma dopo il controllo DetailsView gestisce l'operazione di paging. Questo evento viene comunemente usato quando è necessario eseguire un'attività dopo che l'utente passa a un record diverso nel controllo. |
| Pageindexchanging | Si verifica quando viene fatto clic su uno dei pulsanti del pager, ma prima del controllo DetailsView gestisce l'operazione di paging. Questo evento viene spesso usato per annullare l'operazione di paging. |
Controllo menu
Il controllo Menu in ASP.NET 2.0 è progettato per essere un sistema di spostamento completo. Può essere facilmente in ingresso dati alle origini dati gerarchica, ad esempio SiteMapDataSource.
Una struttura dei controlli menu può essere definita in modo dichiarativo o dinamico ed è costituita da un singolo nodo radice e da un numero qualsiasi di sotto-nodi. Il codice seguente definisce in modo dichiarativo un menu per il controllo Menu.
<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>
Nell'esempio precedente il nodo Home.aspx è il nodo radice. Tutti gli altri nodi vengono annidati all'interno del nodo radice a vari livelli.
Esistono due tipi di menu che il controllo Menu può eseguire il rendering; menu statici e menu dinamici. I menu statici sono costituiti da voci di menu sempre visibili. I menu dinamici sono costituiti da voci di menu visibili solo quando l'utente passa il puntatore del mouse. I clienti possono spesso confondere i menu statici con menu definiti in modo dichiarativo e dinamico con menu in ingresso dati in fase di esecuzione. Infatti, i menu dinamici e statici non sono correlati al metodo di popolamento. I termini statici e dinamici fanno riferimento solo al fatto che il menu sia visualizzato in modo statico o visualizzato solo quando l'utente esegue un'azione.
La proprietà StaticDisplayLevels viene utilizzata per configurare il numero di livelli del menu statici e quindi visualizzati per impostazione predefinita. Nell'esempio precedente, l'impostazione della proprietà StaticDisplayLevels su un valore pari a 2 comporta la visualizzazione statica del nodo Home, del nodo Music e del nodo Movies. Tutti gli altri nodi verranno visualizzati dinamicamente quando l'utente passa il puntatore del mouse sul nodo padre.
La proprietà MaximumDynamicDisplayLevels configura il numero massimo di livelli dinamici che il menu è in grado di visualizzare. Tutti i menu dinamici a un livello superiore al valore specificato dalla proprietà MaximumDynamicDisplayLevels vengono ignorati .
Nota
È quasi certo che si verifichino situazioni in cui i menu non vengono visualizzati a causa della proprietà MaximumDynamicDisplayLevels. In questi casi, assicurarsi che la proprietà sia impostata sufficientemente per consentire la visualizzazione dei menu dei clienti.
Data Binding del controllo menu
Il controllo Menu può essere associato a qualsiasi origine dati gerarchica, ad esempio SiteMapDataSource o XMLDataSource. SiteMapDataSource è il metodo più comunemente usato per il data binding a un controllo Menu perché genera feed del file Web.sitemap e il relativo schema fornisce un'API nota al controllo Menu. L'elenco seguente mostra un semplice file Web.sitemap.
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>
Si noti che è presente un solo elemento siteMapNode radice, in questo caso, l'elemento Home. È possibile configurare diversi attributi per ogni siteMapNode. Gli attributi usati più comunemente sono:
- Url Specifica l'URL da visualizzare quando un utente fa clic sulla voce di menu. Se questo attributo non è presente, il nodo eseguirà semplicemente il postback quando si fa clic.
- Titolo Specifica il testo visualizzato nella voce di menu.
- Descrizione Usato come documentazione per il nodo. Visualizza anche come suggerimento dello strumento quando il mouse viene spostato sul nodo.
- siteMapFile Consente di annidare le sitemap. Questo attributo deve puntare a un file ASP.NET della sitemap ben formato.
- Ruoli Consente di controllare l'aspetto di un nodo tramite ASP.NET limitazione della sicurezza.
Si noti che, mentre questi attributi sono tutti facoltativi, il comportamento del menu potrebbe non essere quello previsto se non sono specificati. Ad esempio, se l'attributo url viene specificato, ma l'attributo di descrizione non è, il nodo non sarà visibile e non sarà possibile passare all'URL specificato.
Controllo di un'operazione menu
Esistono diverse proprietà che influiscono sull'operazione di un controllo menu ASP.NET; la proprietà Orientation , la proprietà DisappearAfter , la proprietà StaticItemFormatString e la proprietà StaticPopoutImageUrl sono solo alcune di queste.
- L'orientamento può essere impostato su orizzontale o verticale e controlla se le voci di menu statiche sono disposte orizzontalmente in una riga o verticalmente e sovrapposte tra loro. Questa proprietà non influisce sui menu dinamici.
- La proprietà DisappearAfter configura la durata di un menu dinamico che deve rimanere visibile dopo che il mouse è stato spostato da esso. Il valore viene specificato in millisecondi e il valore predefinito è 500. Se si imposta questa proprietà su un valore di -1, il menu non scompare automaticamente. In tal caso, il menu scompare solo quando l'utente fa clic all'esterno del menu.
- La proprietà StaticItemFormatString semplifica la manutenzione di verbi coerenti nel sistema di menu. Quando si specifica questa proprietà, {0} deve essere immessa al posto della descrizione visualizzata nell'origine dati. Ad esempio, per avere la voce di menu dall'esercizio 1 dire Visita la pagina Prodotti e così via, si specifica Visitare la {0} pagina Per staticItemFormatString. In fase di esecuzione, ASP.NET sostituirà qualsiasi occorrenza di con la descrizione corretta per la voce di {0} menu.
- La proprietà StaticPopoutImageUrl specifica l'immagine usata per indicare che un determinato nodo del menu ha nodi figlio a cui è possibile accedere passando il puntatore del mouse su di esso. I menu dinamici continueranno a usare l'immagine predefinita.
Controlli menu modelli
Il controllo Menu è un controllo modello e consente due elementi diversi; staticItemTemplate e DynamicItemTemplate. Usando questi modelli, è possibile aggiungere facilmente controlli server o controlli utente ai menu.
Per modificare i modelli in Visual Studio .NET, fare clic sul pulsante Smart Tag nel menu e scegliere Modifica modelli. È quindi possibile scegliere tra la modifica di StaticItemTemplate o DynamicItemTemplate.
Tutti i controlli aggiunti all'oggetto StaticItemTemplate verranno visualizzati nel menu statico quando la pagina viene caricata. Tutti i controlli aggiunti a DynamicItemTemplate verranno visualizzati in tutti i menu popup.
Eventi del menu
Il controllo Menu include due eventi univoci per esso; MenuItemClicked e l'evento MenuItemDatabound .
L'evento MenuItemClicked viene generato quando viene fatto clic su una voce di menu. L'evento MenuItemDatabound viene generato quando una voce di menu è in ingresso dati. MenuEventArgs passato al gestore eventi fornisce l'accesso alla voce di menu tramite la proprietà Item.
Controllo di un aspetto di menu
È anche possibile influire sull'aspetto di un controllo menu usando uno o più stili disponibili per formattare i menu. Tra questi sono StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle e DynamicHoverStyle. Queste proprietà sono configurate usando una stringa di stile HTML standard. Ad esempio, il codice seguente influisce sullo stile per i menu dinamici.
<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
BackColor="#D6D3CE" />
Nota
Se si usa uno degli stili del puntatore del mouse, è necessario aggiungere un <elemento head> nella pagina con l'elemento runat impostato sul server.
I controlli menu supportano anche l'uso di temi ASP.NET 2.0.
Controllo TreeView
Il controllo TreeView visualizza i dati in una struttura ad albero. Come per il controllo Menu, può essere facilmente associato a qualsiasi origine dati gerarchica, ad esempio SiteMapDataSource.
La prima domanda che i clienti potrebbero porre sul controllo TreeView in ASP.NET 2.0 è se è correlato o meno a TreeView IE WebControl disponibile per ASP.NET 1.x. Non è. Il controllo TreeView ASP.NET 2.0 è stato scritto da zero e offre un miglioramento significativo sul Controllo Web TreeView di Internet Explorer precedentemente disponibile.
Non si esaminerà in dettaglio come associare un controllo TreeView a una mappa del sito come viene eseguito esattamente come il controllo Menu. Tuttavia, il controllo TreeView presenta alcune differenze distinte nel modo in cui opera.
Per impostazione predefinita, viene visualizzato un controllo TreeView completamente espanso. Per modificare il livello di espansione al caricamento iniziale, modificare la proprietà ExpandDepth del controllo. Ciò è particolarmente importante nei casi in cui TreeView è in ingresso dati in base all'espansione di nodi specifici.
DataBinding del controllo TreeView
A differenza del controllo Menu, TreeView si presta bene alla gestione di grandi quantità di dati. Pertanto, oltre al databinding in un oggetto SiteMapDataSource o XMLDataSource, treeView è spesso associato a un oggetto DataSet o ad altri dati relazionali. Nei casi in cui il controllo TreeView è associato a grandi quantità di dati, è consigliabile associare solo ai dati effettivamente visibili nel controllo. È quindi possibile associare dati ad altri dati perché i nodi TreeView vengono espansi.
In questi casi, la proprietà PopeOnDemand di TreeView deve essere impostata su true. Sarà quindi necessario fornire un'implementazione per il metodo TreeNodePopulate .
Data Binding senza PostBack
Si noti che quando si espande un nodo nell'esempio precedente per la prima volta, la pagina pubblica e aggiorna. Ciò non è un problema in questo esempio, ma si può immaginare che sia in un ambiente di produzione con una grande quantità di dati. Uno scenario migliore sarebbe uno in cui TreeView sarebbe ancora popolato dinamicamente i relativi nodi, ma senza un postback al server.
Impostando le proprietà PopolamentoNodesFromClient e PopolamentoOnDemand su true, il controllo ASP.NET TreeView popola dinamicamente i nodi senza un postback. Quando il nodo padre viene espanso, viene eseguita una richiesta XMLHttp dal client e viene attivato l'evento OnTreeNodePopulate. Il server risponde con un'isola dati XML che viene quindi usata per associare i nodi figlio.
ASP.NET crea dinamicamente il codice client che implementa questa funzionalità. I <tag di script> che contengono lo script vengono generati puntando a un file AXD. Ad esempio, l'elenco seguente mostra i collegamenti di script per il codice script che genera la richiesta XMLHttp.
<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
amp;t=632514255396426531"
type="text/javascript"></script>
Se si sfoglia il file AXD precedente nel browser e lo si apre, verrà visualizzato il codice che implementa la richiesta XMLHttp. Questo metodo impedisce ai clienti di modificare il file di script.
Controllo dell'operazione del controllo TreeView
Il controllo TreeView ha diverse proprietà che influiscono sull'operazione del controllo. Le proprietà più ovvie sono ShowCheckBoxes, ShowExpandCollapse e ShowLines.
La proprietà ShowCheckBoxes influisce sul fatto che i nodi visualizzino una casella di controllo quando viene eseguito il rendering. I valori validi per questa proprietà sono None, Root, Parent, Leaf e All. Questi influiscono sul controllo TreeView come indicato di seguito:
| Valore della proprietà | Effetto |
|---|---|
| Nessuno | Le caselle di controllo non vengono visualizzate in alcun nodo. Si tratta dell'impostazione predefinita. |
| Root | Una casella di controllo viene visualizzata solo nel nodo radice. |
| Parent | Una casella di controllo viene visualizzata solo in tali nodi con nodi figlio. Questi nodi figlio possono essere nodi padre o nodi foglia. |
| Foglia | Una casella di controllo viene visualizzata solo nei nodi che non hanno nodi figlio. |
| Tutti | Viene visualizzata una casella di controllo in tutti i nodi. |
Quando vengono usate le caselle di controllo, la proprietà CheckedNodes restituirà una raccolta di nodi TreeView controllati al postback.
La proprietà ShowExpandCollapse controlla l'aspetto dell'immagine di espansione/compressione accanto ai nodi radice e padre. Se questa proprietà è impostata su false, i nodi TreeView vengono visualizzati come collegamenti ipertestuali e vengono espansi/compressi facendo clic sul collegamento.
La proprietà ShowLines controlla se vengono visualizzate o meno righe che connettono i nodi padre ai nodi figlio. Quando false (impostazione predefinita), non vengono visualizzate righe. Se true, il controllo TreeView userà le immagini delle righe nella cartella specificata dalla proprietà LineImagesFolder .
Per personalizzare l'aspetto delle righe TreeView, Visual Studio .NET 2005 include uno strumento line Designer. È possibile accedere a questo strumento usando il pulsante Smart Tag nel controllo TreeView come indicato di seguito.
Figura 1
Quando si seleziona l'opzione di menu Personalizza immagini riga, verrà avviato lo strumento Line Designer che consente di configurare l'aspetto delle righe TreeView.
Eventi TreeView
Il controllo TreeView include gli eventi univoci seguenti:
- SelectedNodeChanged Si verifica quando un nodo viene selezionato in base alla proprietà SelectAction .
- TreeNodeCheckChanged si verifica quando viene modificato lo stato delle caselle di controllo dei nodi.
- TreeNodeExpanded Si verifica quando un nodo viene espanso in base alla proprietà SelectAction .
- TreeNodeCollapsed Si verifica quando un nodo viene compresso.
- TreeNodeDataBound Si verifica quando un nodo è associato ai dati.
- TreeNodePopulate Si verifica quando viene popolato un nodo.
La proprietà SelectAction consente di configurare l'evento generato quando viene selezionato un nodo. La proprietà SelectAction fornisce le azioni seguenti:
- TreeNodeSelectAction.Expand Genera TreeNodeExpanded quando viene selezionato il nodo.
- TreeNodeSelectAction.None Genera nessun evento quando viene selezionato il nodo.
- TreeNodeSelectAction.Select Genera l'evento SelectedNodeChanged quando viene selezionato il nodo.
- TreeNodeSelectAction.SelectExpand Genera sia l'evento SelectedNodeChanged che l'evento TreeNodeExpanded quando viene selezionato il nodo.
Controllo dell'aspetto con TreeView
Il controllo TreeView fornisce molte proprietà per controllare l'aspetto del controllo con stili. Sono disponibili le proprietà seguenti.
| Nome proprietà | Controlli |
|---|---|
| HoverNodeStyle | Controlla lo stile dei nodi quando il mouse viene spostato sul mouse. |
| LeafNodeStyle | Controlla lo stile dei nodi foglia. |
| Nodestyle | Controlla lo stile per tutti i nodi. Gli stili di nodo specifici (ad esempio LeafNodeStyle) eseguono l'override di questo stile. |
| ParentNodeStyle | Controlla lo stile per tutti i nodi padre. |
| Rootnodestyle | Controlla lo stile per il nodo radice. |
| Selectednodestyle | Controlla lo stile per il nodo selezionato. |
Ognuna di queste proprietà è di sola lettura. Tuttavia, ognuno restituirà un oggetto TreeNodeStyle e le proprietà di tale oggetto possono essere modificate usando il formato proprietà-sottoproperty . Ad esempio, per impostare la proprietà ForeColor di SelectedNodeStyle, usare la sintassi seguente:
<asp:TreeView id=sampleTreeView
SelectedNodeStyle-ForeColor=Blue
runat=server>
Si noti che il tag precedente non è chiuso. Questo è dovuto al fatto che quando si usa la sintassi dichiarativa illustrata qui, si includerebbero anche i nodi TreeViews nel codice HTML.
Le proprietà di stile possono essere specificate anche nel codice usando il formato property.subproperty . Ad esempio, per impostare la proprietà ForeColor del codice RootNodeStyle , si userà la sintassi seguente:
treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;
Nota
Per un elenco completo delle diverse proprietà di stile, vedere la documentazione MSDN sull'oggetto TreeNodeStyle.
Controllo SiteMapPath
Il controllo SiteMapPath fornisce un controllo di spostamento di tipo pane per gli sviluppatori di ASP.NET. Come gli altri controlli di spostamento, può essere facilmente associato a origini dati gerarchica, ad esempio SiteMapDataSource o XmlDataSource.
Un controllo SiteMapPath è costituito da oggetti SiteMapNodeItem. Esistono tre tipi di nodi; nodo radice, nodi padre e nodo Corrente. Il nodo radice è il nodo nella parte superiore della struttura gerarchica. Il nodo corrente rappresenta la pagina corrente. Tutti gli altri nodi sono nodi padre.
Controllo dell'operazione del controllo SiteMapPath
Le proprietà che controllano l'operazione del controllo SiteMapPath sono le seguenti:
| Proprietà | Descrizione della proprietà |
|---|---|
| ParentLevelsDisplayed | Controlla il numero di nodi padre visualizzati. Il valore predefinito è -1 che non impone alcuna restrizione sul numero di nodi padre visualizzati. |
| PathDirection | Controlla la direzione di SiteMapPath. I valori validi sono RootToCurrent (impostazione predefinita) e CurrentToRoot. |
| PathSeparator | Stringa che controlla il carattere che separa i nodi in un controllo SiteMapPath. Il valore predefinito è :. |
| RenderingCurrentNodeAsLink | Valore booleano che controlla se il nodo corrente viene eseguito il rendering come collegamento. Il valore predefinito è False. |
| Skiplinktext | Aiuta con l'accessibilità quando la pagina viene visualizzata dalle utilità di lettura dello schermo. Questa proprietà consente alle utilità di lettura dello schermo di ignorare il controllo SiteMapPath. Per disabilitare questa funzionalità, impostare la proprietà su String.Empty. |
Controlli SiteMapPath modelli
SiteMapControl è un controllo modellizzato e, di conseguenza, è possibile definire modelli diversi da usare nella visualizzazione del controllo. Per modificare i modelli in un controllo SiteMapPath, fare clic sul pulsante Smart Tag nel controllo e scegliere Modifica modelli dal menu. In questo modo viene visualizzato il menu SiteMapTasks, come illustrato di seguito, in cui è possibile scegliere tra i diversi modelli disponibili.
Figura 2
Il modello NodeTemplate fa riferimento a qualsiasi nodo in SiteMapPath. Se il nodo è un nodo radice o il nodo corrente e viene configurato un oggetto RootNodeTemplate o CurrentNodeTemplate, il nodoTemplate viene sottoposto a override.
Eventi SiteMapPath
Il controllo SiteMapPath ha due eventi che non sono derivati dalla classe Control; evento ItemCreated e l'evento ItemDataBound . L'evento ItemCreated viene generato quando viene creato un elemento SiteMapPath. ItemDataBound viene generato quando viene chiamato il metodo DataBind durante il data binding di un nodo SiteMapPath. Un oggetto SiteMapNodeItemEventArgs fornisce l'accesso all'oggetto SiteMapNodeItem specifico tramite la proprietà Item.
Controllo dell'aspetto con SiteMapPath
Gli stili seguenti sono disponibili per la formattazione di un controllo SiteMapPath.
| Nome proprietà | Controlli |
|---|---|
| CurrentNodeStyle | Controlla lo stile del testo per il nodo corrente. |
| Rootnodestyle | Controlla lo stile del testo per il nodo radice. |
| Nodestyle | Controlla lo stile del testo per tutti i nodi presupponendo che un oggetto CurrentNodeStyle o RootNodeStyle non venga applicato. |
La proprietà NodeStyle viene sostituita da CurrentNodeStyle o rootNodeStyle. Ognuna di queste proprietà è di sola lettura e restituisce un oggetto Style . Per influire sull'aspetto di un nodo usando una di queste proprietà, sarà necessario impostare le proprietà dell'oggetto Style restituito. Ad esempio, il codice seguente modifica la proprietà forecolor del nodo corrente.
<asp:SiteMapPath runat="server" ID="SiteMapPath1"
CurrentNodeStyle-ForeColor="Orange"/>
La proprietà può anche essere applicata a livello di codice come segue:
this.SiteMapPath1.CurrentNodeStyle.ForeColor =
System.Drawing.Color.Orange;
Nota
Se viene applicato un modello, lo stile non verrà applicato.
Lab 1: Configurazione di un controllo menu ASP.NET
Creare un nuovo sito Web.
Aggiungere un file mappa siti selezionando File, Nuovo, File e scegliendo Mappa siti nell'elenco dei modelli di file.
Aprire la mappa del sito (Web.sitemap per impostazione predefinita) e modificarla in modo che sia simile alla presentazione seguente. Le pagine a cui si sta collegando il file della mappa del sito non esistono in realtà, ma che non saranno un problema per questo esercizio.
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>Aprire il modulo Web predefinito nella visualizzazione Progettazione.
Nella sezione Navigazione della casella degli strumenti aggiungere un nuovo controllo Menu alla pagina.
Nella sezione Dati della casella degli strumenti aggiungere un nuovo SiteMapDataSource. SiteMapDataSource userà automaticamente il file Web.sitemap nel sito. Il file Web.sitemap deve trovarsi nella cartella radice del sito.
Fare clic sul controllo Menu e quindi sul pulsante Smart Tag per visualizzare la finestra di dialogo Attività menu.
Nell'elenco a discesa Scegli origine dati selezionare SiteMapDataSource1.
Fare clic sul collegamento Formattazione automatica e scegliere un formato per il menu.
Nel riquadro Proprietà impostare la proprietà StaticDisplayLevels su 2. Il controllo Menu dovrebbe ora visualizzare il nodo Home, Products e Services nella Designer.
Esplorare la pagina nel browser per usare il menu. Poiché le pagine aggiunte alla mappa del sito non esistono effettivamente, verrà visualizzato un errore quando si prova e si passa a loro.
Sperimentare la modifica delle proprietà StaticDisplayLevels e MaximumDynamicDisplayLevels e vedere come influiscono sul rendering del menu.
Lab 2: Associazione dinamica di un controllo TreeView
Questo esercizio presuppone che sia disponibile SQL Server in esecuzione in locale e che il database Northwind sia presente nell'istanza di SQL Server. Se queste condizioni non vengono soddisfatte, modificare la stringa di connessione nell'esempio. Si noti che potrebbe essere necessario specificare anche SQL Server autenticazione anziché una connessione attendibile.
Creare un nuovo sito Web.
Passare alla visualizzazione Codice per Default.aspx e sostituire tutto il codice con il codice elencato di seguito.
<%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server"> void PopulateNode(Object sender, TreeNodeEventArgs e) { // Call the appropriate method to populate a node at a particular level. switch (e.Node.Depth) { case 0: // Populate the first-level nodes. PopulateCategories(e.Node); break; case 1: // Populate the second-level nodes. PopulateProducts(e.Node); break; default: // Do nothing. break; } } void PopulateCategories(TreeNode node) { // Query for the product categories. These are the values // for the second-level nodes. DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories"); // Create the second-level nodes. if (ResultSet.Tables.Count > 0) { // Iterate through and create a new node for each row in the query results. // Notice that the query results are stored in the table of the DataSet. foreach (DataRow row in ResultSet.Tables[0].Rows) { // Create the new node. Notice that the CategoryId is stored in the Value property // of the node. This will make querying for items in a specific category easier when // the third-level nodes are created. TreeNode newNode = new TreeNode(); newNode.Text = row["CategoryName"].ToString(); newNode.Value = row["CategoryID"].ToString(); // Set the PopulateOnDemand property to true so that the child nodes can be // dynamically populated. newNode.PopulateOnDemand = true; // Set additional properties for the node. newNode.SelectAction = TreeNodeSelectAction.Expand; // Add the new node to the ChildNodes collection of the parent node. node.ChildNodes.Add(newNode); } } } void PopulateProducts(TreeNode node) { // Query for the products of the current category. These are the values // for the third-level nodes. DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value); // Create the third-level nodes. if (ResultSet.Tables.Count > 0) { // Iterate through and create a new node for each row in the query results. // Notice that the query results are stored in the table of the DataSet. foreach (DataRow row in ResultSet.Tables[0].Rows) { // Create the new node. TreeNode NewNode = new TreeNode(row["ProductName"].ToString()); // Set the PopulateOnDemand property to false, because these are leaf nodes and // do not need to be populated. NewNode.PopulateOnDemand = false; // Set additional properties for the node. NewNode.SelectAction = TreeNodeSelectAction.None; // Add the new node to the ChildNodes collection of the parent node. node.ChildNodes.Add(NewNode); } } } DataSet RunQuery(String QueryString) { // Declare the connection string. This example uses Microsoft SQL Server // and connects to the Northwind sample database. String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI"; SqlConnection DBConnection = new SqlConnection(ConnectionString); SqlDataAdapter DBAdapter; DataSet ResultsDataSet = new DataSet(); try { // Run the query and create a DataSet. DBAdapter = new SqlDataAdapter(QueryString, DBConnection); DBAdapter.Fill(ResultsDataSet); // Close the database connection. DBConnection.Close(); } catch (Exception ex) { // Close the database connection if it is still open. if (DBConnection.State == ConnectionState.Open) { DBConnection.Close(); } Message.Text = "Unable to connect to the database."; } return ResultsDataSet; } </script> <html> <body> <form id="Form1" runat="server"> <h3> TreeView PopulateNodesFromClient Example</h3> <asp:TreeView ID="LinksTreeView" Font-Name="Arial" ForeColor="Blue" EnableClientScript="true" PopulateNodesFromClient="false" OnTreeNodePopulate="PopulateNode" runat="server" ExpandDepth="0"> <Nodes> <asp:TreeNode Text="Inventory" SelectAction="Expand" PopulateOnDemand="True" Value="Inventory" /> </Nodes> </asp:TreeView> <br> <br> <asp:Label ID="Message" runat="server" /> </form> </body> </html>Salvare la pagina come treeview.aspx.
Esplorare la pagina.
Quando la pagina viene visualizzata per la prima volta, visualizzare l'origine della pagina nel browser. Si noti che solo i nodi visibili sono stati inviati al client.
Fare clic sul segno più accanto a qualsiasi nodo.
Visualizzare di nuovo l'origine nella pagina. Si noti che i nodi appena visualizzati sono ora presenti.
Lab 3: Visualizzazione dettagli e modifica dei dati tramite gridView e DetailsView
Creare un nuovo sito Web.
Aggiungere un nuovo web.config al sito Web.
Aggiungere una stringa di connessione al file web.config, come illustrato di seguito:
<connectionStrings> <add name="Northwind" providerName="System.Data.SqlClient" connectionString="Data Source=localhost;Integrated Security=SSPI; Initial Catalog=Northwind;"/> </connectionStrings>Nota
Potrebbe essere necessario modificare la stringa di connessione in base all'ambiente.
Salvare e chiudere il file Web.config.
Aprire Default.aspx e aggiungere un nuovo controllo SqlDataSource.
Modificare l'ID del controllo SqlDataSource in Products.
Nel menu Attività SqlDataSource fare clic su Configura origine dati.
Selezionare Northwind nell'elenco a discesa connessione e fare clic su Avanti.
Selezionare Prodotti dall'elenco a discesa Nome e selezionare le caselle di controllo ProductID, ProductName, UnitPrice e UnitsInStock , come illustrato di seguito.
Figura 3
- Fare clic su Avanti.
- Fare clic su Fine.
- Passare alla visualizzazione Origine ed esaminare il codice generato. Si noti il controllo SelectCommand, DeleteCommand, InsertCommand e UpdateCommand aggiunto al controllo SqlDataSource. Si notino anche i parametri aggiunti.
- Passare alla visualizzazione Progettazione e aggiungere un nuovo controllo GridView alla pagina.
- Selezionare Prodotti dall'elenco a discesa Scegli origine dati .
- Selezionare Abilita paging e Abilita selezione, come illustrato di seguito.
Figura 4
- Fare clic sul collegamento Modifica colonne e verificare che i campi generati automaticamente vengano controllati.
- Fare clic su OK.
- Con il controllo GridView selezionato, fare clic sul pulsante accanto alla proprietà DataKeyNames nel riquadro Proprietà.
- Selezionare ProductID nell'elenco Campi dati disponibili e fare clic sul > pulsante per aggiungerlo.
- Fare clic su OK.
- Aggiungere un nuovo controllo SqlDataSource alla pagina.
- Modificare l'ID del controllo SqlDataSource in Dettagli.
- Dal menu Attività SqlDataSource scegliere Configura origine dati.
- Scegliere Northwind dall'elenco a discesa e fare clic su Avanti.
- Selezionare Prodotti dall'elenco a discesa Nome e selezionare la <casella di controllo /strong>* nella casella di riepilogo Colonne .
- Fare clic sul pulsante WHERE .
- Selezionare ProductID nell'elenco a discesa Colonna .
- Selezionare = nell'elenco a discesa Operatore.
- Selezionare Controllo nell'elenco a discesa Origine .
- Selezionare GridView1 nell'elenco a discesa ID controllo .
- Fare clic sul pulsante Aggiungi per aggiungere la clausola WHERE.
- Fare clic su OK.
- Fare clic sul pulsante Avanzate e selezionare la casella di controllo Genera ISTRUZIONI INSERT, UPDATE e DELETE .
- Fare clic su OK.
- Fare clic su Avanti e fare clic su Fine.
- Aggiungere un controllo DetailsView alla pagina.
- Nell'elenco a discesa Scegli origine dati scegliere Dettagli.
- Selezionare la casella di controllo Abilita modifica come illustrato di seguito.
Figura 5 39. Salvare la pagina e esplorare Default.aspx. 40. Fare clic sul collegamento Seleziona accanto a record diversi per visualizzare automaticamente l'aggiornamento DetailsView. 41. Fare clic sul collegamento Modifica nel controllo DetailsView. 42. Apportare una modifica al record e fare clic su Aggiorna.