- Learn
- Guida ASP.NET 2.0
- Il controllo TreeView
Il controllo TreeView
In questa lezione utilizziamo i risultati a cui siamo arrivati nella lezione precedente e mostreremo come realizzare un menu di navigazione ad albero usando il il controllo TreeView di ASP.NET 2.0
Operiamo sulla nostra Master Page al fine di mettere il menu ad albero nella parte sinistra della pagina. Per fare questo possiamo inserire una tabella di una riga e due colonne in modo da mettere nella cella di sinistra il menu e nella cella di destra il contenuto. Un esempio di realizzazione è il seguente:
Listato 25. Separare menu e contenuto
<table>
<tr>
<td style=”border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 10px;”>
<asp:TreeView ID=”TreeView1″ runat=”server” BackColor=”White” DataSourceID=”SiteMapDataSource1″
ImageSet=”WindowsHelp” BorderColor=”Gray”>
<ParentNodeStyle Font-Bold=”False” />
<SelectedNodeStyle Font-Underline=”False” HorizontalPadding=”0px” VerticalPadding=”0px” BackColor=”#B5B5B5″ />
<NodeStyle Font-Names=”Tahoma” Font-Size=”8pt” ForeColor=”Black” HorizontalPadding=”5px”
NodeSpacing=”0px” VerticalPadding=”1px” />
<HoverNodeStyle Font-Underline=”True” ForeColor=”#6666AA” />
</asp:TreeView>
<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
</td>
<td valign=”top” style=”padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 10px;”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
Il codice mostrato sopra è visibile può essere realizzato in modo visuale trascinando nell’area di lavoro prima una tabella, poi il TreeView
. La tabella va impostata con una riga e due colonne. Il ContentPlaceHolder
va trascinato nella cella di destra ed il TreeView
nella cella di sinistra ed impostato nel seguente modo:

Nelle Attività di TreeView (TreeView Tasks) bisogna scegliere una “nuova origine dati” (New data source).

Scegliamo quindi SiteMap e diamo l’OK.
Possiamo poi formattare a piacere il TreeView con una delle possibilità di visualizzazione preinstallate, scegliendo la formattazione automatica tra le Attività di TreeView ed usare i CSS per altre opzioni di visualizzazione.
Vediamo il risultato premendo F5:

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.
Se vuoi aggiornamenti su Il controllo TreeView inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Norton Family, sicurezza per tutta la famiglia
Molto spesso i genitori si preoccupano di cosa succede sui PC, gli smartphone o i tablet dei propri figli. Ecco […]