Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Il controllo Accordion in AJAX Control Toolkit fornisce più riquadri e consente all'utente di visualizzare uno di essi alla volta. I pannelli vengono in genere dichiarati all'interno della pagina stessa, ma l'associazione a un'origine dati offre maggiore flessibilità.
Panoramica
Il controllo Accordion in AJAX Control Toolkit fornisce più riquadri e consente all'utente di visualizzare uno di essi alla volta. I pannelli vengono in genere dichiarati all'interno della pagina stessa, ma l'associazione a un'origine dati offre maggiore flessibilità.
Passaggi
Prima di tutto, è necessaria un'origine dati. Questo esempio usa il database AdventureWorks e microsoft SQL Server 2005 Express Edition. Il database è una parte facoltativa di un'installazione di Visual Studio (inclusa l'edizione express) ed è disponibile anche come download separato in https://go.microsoft.com/fwlink/?LinkId=64064. Il database AdventureWorks fa parte dell'SQL Server 2005 Samples and Sample Database (download in https://www.microsoft.com/download/details.aspx?id=10679). Il modo più semplice per impostare il database è usare microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e collegare il file di AdventureWorks.mdf database.
Per questo esempio si presuppone che l'istanza del SQL Server 2005 Express Edition venga chiamata SQLEXPRESS e si trovi nello stesso computer del server Web. Questa è anche la configurazione predefinita. Se la configurazione è diversa, è necessario adattare le informazioni di connessione per il database.
Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito ovunque nella pagina (ma all'interno dell'elemento <form> ):
<asp:ScriptManager ID="asm" runat="server"/>
Aggiungere quindi un'origine dati alla pagina. Per usare una quantità limitata di dati, vengono selezionate solo le prime cinque voci nella tabella Vendor del database AdventureWorks. Se si usa il assistente di Visual Studio per creare l'origine dati, tenere presente che un bug nella versione corrente non prefisso il nome della tabella (Vendor) con Purchasing. Il markup seguente mostra la sintassi corretta:
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
Tenere presente il nome (ID) dell'origine dati. Questa identificazione deve quindi essere usata nella DataSourceID proprietà del controllo Accordion:
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
All'interno del controllo Accordion è possibile fornire modelli per varie parti del controllo, tra cui l'intestazione () e il contenuto (<HeaderTemplate><ContentTemplate>). All'interno di questi elementi, è sufficiente restituire i dati dall'origine dati usando il DataBinder.Eval() metodo:
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
Quando la pagina viene caricata, l'origine dati deve essere associata alla fisarmonica con questo codice sul lato server:
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
Per concludere questo esempio, è necessario definire le due classi CSS a cui si fa riferimento nel controllo Accordion (nelle relative proprietà HeaderCssClass e ContentCssClass). Inserire il markup seguente nella <head> sezione della pagina:
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
I dati della fisarmonica provengono direttamente dall'origine dati (fare clic per visualizzare l'immagine full-size)
