Cenni preliminari sul controllo server Web TreeView

Articolo
10/22/2014

Aggiornamento: novembre 2007

Il controllo server Web TreeView consente di creare una struttura per visualizzare dati organizzati in modo gerarchico, ad esempio un sommario o una directory.

Vengono illustrati i seguenti argomenti:

Funzionalità
Informazioni di supporto
Esempi di codice
Riferimento alle classi

Funzionalità

Il controllo TreeView supporta le seguenti funzionalità:

Associazione dati automatica, in base alla quale i nodi del controllo possono essere associati a dati organizzati in modo gerarchico, ad esempio un documento XML.
Supporto per gli spostamenti all'interno del sito mediante l'integrazione con il controllo SiteMapDataSource.
Possibilità di visualizzare il testo dei nodi come testo selezionabile o come collegamento ipertestuale.
Aspetto personalizzabile mediante temi, immagini definite dall'utente e stili.
Accesso a livello di codice al modello a oggetti TreeView, che consente di creare strutture, inserire dati nei nodi, impostare proprietà ed eseguire altre operazioni in modo dinamico.
Inserimento di dati nei nodi tramite l'esecuzione sul lato client di callback al server (sui browser supportati).
Possibilità di visualizzare una casella di controllo accanto a ciascun nodo.

Torna all'inizio

Informazioni di supporto

Il controllo TreeView può visualizzare diversi tipi di dati: dati statici, specificati in modo dichiarativo nel controllo, dati associati al controllo o dati aggiunti al controllo TreeView a livello di codice, in risposta alle azioni degli utenti.

Visualizzazione di dati statici

È possibile visualizzare dati statici nel controllo TreeView creando un insieme di elementi TreeNode, che sono elementi figlio del controllo TreeView. Questi elementi sono detti anche nodi figlio.

Nell'esempio riportato di seguito vengono illustrati i tag per un controllo TreeView contenente tre nodi, due dei quali hanno nodi figlio.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

Associazione di dati al controllo TreeView

È possibile associare un controllo TreeView a un'origine dati che supporta l'interfaccia IHierarchicalDataSource, ad esempio i controlli XmlDataSource e SiteMapDataSource. Inoltre, quando si esegue l'associazione di dati, è possibile avere il controllo completo dei campi in cui vengono inseriti i dati ottenuti dall'origine dati. Per ulteriori informazioni, vedere Associazione di dati al controllo server Web TreeView.

Visualizzazione dei dati a livello di codice mediante TreeNodeCollection

È possibile inserire dati in un controllo TreeView a livello di codice mediante l'accesso alla proprietà Nodes, che restituisce una classe TreeNodeCollection. TreeNodeCollection è un insieme fortemente tipizzato di oggetti TreeNode. Poiché un oggetto TreeNode contiene una proprietà denominata ChildNodes che può contenere oggetti TreeNode, la classe TreeNodeCollection è una struttura di dati gerarchica che rappresenta tutti i nodi del controllo TreeView.

Per un esempio di come attraversare l'insieme Nodes, vedere Nodes.

Tipi di nodi TreeView

Il controllo TreeView è costituito da uno o più nodi. Ciascun elemento della struttura è definito nodo ed è rappresentato da un oggetto TreeNode. Nella tabella riportata di seguito sono descritti i tre tipi di nodi supportati.

Tipo di nodo	Descrizione
Principale	Un nodo senza nodi padre e con uno o più nodi figlio.
Padre	Un nodo con un nodo padre e uno o più nodi figlio.
Foglia	Un nodo senza nodi figlio.

Anche se in una struttura è normalmente presente un solo nodo principale, il controllo TreeView consente di aggiungere più nodi principali alla struttura. Questa funzionalità risulta utile quando si desidera visualizzare elenchi di elementi senza visualizzare un singolo nodo principale, come nel caso di un elenco di categorie di prodotti.

Ciascun nodo dispone di una proprietà Text e di una proprietà Value. Il valore della proprietà Text viene visualizzato nel controllo TreeView, mentre la proprietà Value viene utilizzata per archiviare dati aggiuntivi relativi al nodo, ad esempio i dati passati all'evento di postback associato al nodo.

Quando viene fatto clic su un nodo del controllo TreeView, quest'ultimo può generare un evento di selezione (tramite postback) o eseguire lo spostamento in un'altra pagina. Se la proprietà href non è impostata, in risposta al clic su un nodo viene generato un evento SelectedNodeChanged, che può essere gestito per fornire funzionalità personalizzate. A ciascun nodo è inoltre assegnata una proprietà SelectAction, che consente di determinare le azioni che si verificano quando viene fatto clic su di esso, ad esempio l'espansione o la compressione del nodo. Anziché generare un evento di selezione per passare a una pagina quando viene fatto clic su un nodo, impostare la proprietà href del nodo su un valore diverso da una stringa vuota ("").

Inserimento di dati su richiesta nell'oggetto TreeNode

La definizione statica della struttura di dati può risultare poco efficiente oppure i dati possono dipendere da informazioni che vengono ottenute in fase di esecuzione. Per visualizzare i dati dinamicamente, il controllo TreeView supporta l'inserimento dinamico dei dati all'interno dei nodi. Se è configurato per l'inserimento di dati su richiesta, il controllo TreeView genera un evento ogni volta che un utente espande un nodo. Il gestore eventi recupera i dati appropriati e quindi li inserisce nel nodo sul quale l'utente ha fatto clic. Per inserire dati nell'oggetto TreeNode su richiesta, impostare la proprietà PopulateOnDemand di un nodo su true, quindi creare un gestore eventi TreeNodePopulate per l'inserimento di dati in TreeNode.

Inserimento di dati nei nodi TreeView sul lato client

Se nel file di configurazione delle funzionalità di un browser la proprietà SupportsCallback è impostata su true, il browser supporta l'inserimento di dati nei nodi sul lato client.

Questa funzionalità consente al controllo TreeView di inserire un nodo chiamando l'evento TreeNodePopulate del server dallo script client anziché richiedere un postback completo al server. Per ulteriori informazioni sull'inserimento di dati nei nodi sul lato client, vedere PopulateNodesFromClient.

Attivazione di script client

Per impostazione predefinita, nei browser più avanzati la funzionalità di espansione e compressione di un nodo sul controllo TreeView viene eseguita tramite script client. L'utilizzo di script client aumenta l'efficienza del rendering perché il controllo non deve eseguire un postback al server per eseguire il rendering della nuova configurazione.

Nota:
Se il supporto per script client è disattivato nel browser oppure il browser non supporta script client, il controllo TreeView ripristinerà la modalità meno avanzata ed eseguirà il postback al server ogni volta che un utente farà clic sul nodo.

Postback del controllo TreeView

Per impostazione predefinita, il controllo TreeView gestisce la funzionalità di espansione e compressione sul client, tranne nel caso in cui gli script client non sono supportati dal browser o la proprietà EnableClientScript è impostata su false. Se la proprietà PopulateNodesFromClient è impostata su true e il browser supporta lo script client, il controllo TreeView recupera i dati dal server senza eseguire il postback dell'intera pagina.

Quando il controllo TreeView è in modalità di selezione, ogni volta che un utente fa clic su un nodo si verifica un postback al server e viene generato l'evento SelectedNodeChanged.

Si consiglia in genere di gestire gli eventi di postback quando il controllo TreeView è in modalità di selezione oppure quando l'inserimento di dati nei nodi viene eseguito dinamicamente. In questi casi, infatti, la proprietà PopulateOnDemand o PopulateNodesFromClient è impostata su true.

Utilizzo del controllo TreeView con controlli UpdatePanel

I controlli UpdatePanel vengono utilizzati per aggiornare aree selezionate di una pagina anziché l'intera pagina con un postback. Il controllo TreeView può essere utilizzato all'interno di un controllo UpdatePanel con le restrizioni seguenti:

I callback TreeView devono essere associati a postback asincroni, in caso contrario la convalida dell'evento callback avrà esito negativo. Impostando la proprietà PopulateOnDemand dei controlli TreeNode su true, i callback vengono attivati. È possibile utilizzare uno degli approcci seguenti per assicurare che i callback TreeView funzionino con il controllo UpdatePanel:
- Se il controllo TreeView non si trova all'interno di un controllo UpdatePanel, disattivare i callback sui controlli TreeNode non appartenenti a un postback asincrono. A tal proposito, impostare la proprietà PopulateOnDemand su false.
- Aggiornare a livello di codice tutti i controlli che registrano i callback durante il postback asincrono. Ad esempio, è possibile collocare il controllo TreeView all'interno di un controllo UpdatePanel. Il controllo TreeView non deve trovarsi nel controllo UpdatePanel in cui ha origine il postback asincrono finché il controllo UpdatePanel contenente il controllo TreeView non viene aggiornato.
È necessario applicare gli stili utilizzando un riferimento a una classe Foglio di stile CSS. Ad esempio, anziché impostare la proprietà NodeStyle utilizzando un attributo proprietà-sottoproprietà, impostare lo stile utilizzando l'attributo proprietà-ClasseCss. Analogamente, quando si utilizza il modello NodeStyle per impostare lo stile, utilizzare l'attributo CssClass del modello.
La proprietà EnableClientScript deve essere true, ovvero il valore predefinito. Inoltre, se i callback sono attivati per il controllo TreeView, non è possibile modificare la proprietà EnableClientScript tra un postback asincrono e l'altro.

Per ulteriori informazioni sull'utilizzo dei controlli UpdatePanel, vedere Cenni preliminari sui controlli UpdatePanel e Cenni preliminari sul rendering a pagina parziale.

Rendering degli oggetti TreeNode

Ciascun oggetto TreeNode contiene quattro elementi di interfaccia utente, illustrati nell'immagine e nella tabella riportate di seguito.

Elementi di interfaccia utente dell'oggetto TreeNode

Elemento	Descrizione
Immagine per espansione/compressione	Un'immagine facoltativa che indica se il nodo può essere espanso in modo da visualizzare i nodi figlio. Per impostazione predefinita, questa immagine è rappresentata da un segno più [+] se il nodo può essere espanso o da un segno meno [-] se il nodo può essere compresso.
Casella di controllo	È possibile scegliere di attivare la visualizzazione di caselle di controllo per consentire agli utenti di selezionare un nodo specifico.
Immagine del nodo	È possibile specificare un'immagine di nodo da visualizzare accanto al testo del nodo.
Testo del nodo	Il testo effettivamente visualizzato sull'oggetto TreeNode. Questo testo può funzionare come un collegamento ipertestuale, in modalità di spostamento, oppure come un pulsante, in modalità di selezione.

Oltre alle proprietà di cui dispone, il controllo TreeView supporta le proprietà del controllo TreeNodeStyle per ciascun tipo di nodo. Queste proprietà di stile eseguono l'override della proprietà NodeStyle, che viene applicata a tutti i tipi di nodi.

Il controllo TreeView dispone anche di una proprietà NodeIndent che specifica il livello di rientro per tutti i nodi. La modalità di rientro dei nodi dipende dalla direzione in base alla quale viene eseguito il rendering del controllo TreeView. Per le lingue con rendering da sinistra a destra il rientro viene effettuato a partire da sinistra, mentre per quelle con rendering da destra a sinistra il rientro viene effettuato a partire da destra.

Un nodo può essere visualizzato con uno stile differente a seconda che sia selezionato o che su di esso venga spostato il mouse. Quando la proprietà Selected di un nodo è impostata su true, viene applicata la proprietà SelectedNodeStyle, che esegue l'override di tutte le proprietà di stile non selezionate per il nodo selezionato. Quando viene spostato il mouse su un nodo, viene applicata la proprietà HoverNodeStyle. Nell'immagine e nella tabella riportate di seguito sono illustrate le proprietà TreeNodeStyle.

Proprietà TreeNodeStyle

Proprietà del nodo	Descrizione
NodeSpacing	Specifica la spaziatura verticale tra l'intero nodo corrente e i nodi di livello immediatamente superiore e inferiore.
VerticalPadding	Specifica la quantità di spazio al di sopra e al di sotto del testo TreeNode.
HorizontalPadding	Specifica la quantità di spazio a sinistra e a destra del testo TreeNode.
ChildNodesPadding	Specifica la quantità di spazio al di sopra e al di sotto dei nodi figlio dell'oggetto TreeNode.
ImageUrl	Specifica il percorso dell'immagine visualizzata accanto all'oggetto TreeNode.

Per ulteriori informazioni, vedere Personalizzazione dell'aspetto del controllo server Web TreeView.

Visualizzazione di una casella di controllo accanto a un nodo TreeView

Un'altra funzionalità di rendering personalizzata del controllo TreeView consiste nella possibilità di eseguire il rendering di caselle di controllo tra il testo e l'immagine del nodo mediante la proprietà ShowCheckBoxes. La visualizzazione delle caselle di controllo consente all'utente di selezionare più nodi simultaneamente. Questa funzionalità risulta particolarmente utile per determinate interfacce, ad esempio una struttura di un newsgroup, in cui gli utenti possono selezionare ed effettuare la sottoscrizione a più newsgroup alla volta. Per ulteriori informazioni sull'utilizzo delle caselle di controllo, vedere Selezione, spostamento e caselle di controllo nel controllo server Web TreeView.

Utilizzo della proprietà ExpandDepth

Per impostazione predefinita, il controllo TreeView visualizza tutti i nodi della struttura espansa. È tuttavia possibile configurare TreeView in modo da visualizzare inizialmente la struttura espansa fino a un determinato livello. A questo scopo, è possibile impostare la proprietà ExpandDepth su un numero corrispondente ai livelli di nodo che si desidera visualizzare. Se ad esempio si imposta la proprietà ExpandDepth su 2, quando verrà inizialmente eseguito il rendering del sito sul client verranno visualizzati due livelli di nodo, ovvero due nodi figlio.