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:
Figura 1. Inserire il TreeView in modo visuale
Nelle Attività di TreeView (TreeView Tasks) bisogna scegliere una "nuova origine dati" (New data source).
Figura 2. Selezionare una origine per i dati
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:
Figura 3. Risultato Finale
I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.
Ultimi articoli ASP.Net
LINQ e la trappola della 'deferred execution'Una "trappola" in cui si può incappare utilizzando il risultato di... |
C#, le Custom Type ConversionConversioni personalizzate tra classi, creare metodi particolari per... |
Introduzione a Entity FrameworkIl framework ORM messo a disposizione da .NET |
Repeater: visualizzare un feed RSSUtilizzare il controllo XMLDataSource e sfruttare il metodo XPath()... |
Repeater, il server control "semplice"Cos'è e come funziona il controllo Repeater |
Guide ASP.Net
Guida ASP.NET MVC Best PracticesUn workflow dettagliato e ricco di suggerimenti pratici per... |
Guida ASP.NET Starter KitUn modo semplice per imparare ad utilizzare le tecnologie Microsoft... |
Guida Visual Studio 2010L'ambiente di sviluppo di riferimento per sviluppare applicazioni su... |
Newsletter @Microsoft Dev
Ogni giovedì, direttamente nella tua e-mail: articoli, guide, tutorial e script ASP, ASP.Net, SQL server e IIS.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Progettazione database11 Maggio 2012 a Milano |
|
|
Amministratore di Reti Windows Server 200811 Giugno 2012 a Milano |
|
Nessun corso previsto |
