Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : Databinding to an Accordion
Étapes▲
Tout d'abord, une source de données est nécessaire. Cet exemple utilise la base de données AdventureWorks et Microsoft SQL Server 2005 Express Edition. SQL Server 2005 Express Edition est une partie optionnelle d'une installation de Visual Studio (y compris Express Edition) et est également disponible en téléchargement séparé à l'adresse http://msdn.microsoft.com/fr-fr/express/bb410791.aspx. La base de données AdventureWorks fait partie des exemples fournis pour SQL Server 2005 (à télécharger à http://codeplex.com/SqlServerSamples). La façon la plus simple dce mettre en place la base de données est d'utiliser Microsoft SQL Server Management Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=fr) et d'attacher le fichier AdventureWorks.mdf à la base de données.
Pour cet exemple, nous supposons que l'instance de SQL Server 2005 Express Edition est appelée SQLEXPRESS et réside sur la même machine que le serveur web, ce qui est également la configuration par défaut. Si votre configuration est différente, vous devrez adapter les informations de connexion à la base de données.
Afin d'activer les fonctionnalités d'ASP.NET AJAX et du Control Toolkit, le contrôle ScriptManager doit être mis n'importe où sur la page (mais dans l'élément <form>) :
<asp:ScriptManager ID="asm" runat="server"/>Ensuite, ajoutez une source de données à la page. Afin d'utiliser une quantité limitée de données, nous ne sélectionnerons que les cinq premières entrées de la table Vendor de la base de données AdventureWorks. Si vous utilisez l'assistant de Visual Studio pour créer la source de données, gardez à l'esprit d'un bug dans la version actuelle fait que le préfixe Purchasing n'est pas ajouté au nom de la table Vendor. Le marquage suivant montre la syntaxe correcte:
<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]" />N'oubliez pas le nom (ID) de la source de données. Cette identification doit être utilisée dans la propriété DataSourceID du contrôle Accordion :
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">Dans le contrôle Accordion, vous pouvez fournir des modèles pour les différentes parties du contrôle, y compris l'en-tête <HeaderTemplate> et le contenu <ContentTemplate> . Dans ces éléments, il vous suffit d'exploiter les données de la source de données, en utilisant la méthode DataBinder.Eval() :
<HeaderTemplate>
<b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate>
<%#DataBinder.Eval(Container.DataItem, "Name")%>
</ContentTemplate>
</ajaxToolkit:Accordion>Lorsque la page est chargée, la source de données doit être liée à l'accordéon avec ce code côté serveur :
<script runat="server">
void Page_Load(){
acc1.DataBind();
}
</script>Pour conclure cet exemple, vous devez définir les deux classes CSS qui sont référencées dans le contrôle Accordion (dans les propriétés HeaderCssClass et ContentCssClass). Pour cela, mettez les balises suivantes dans la section <head> de la page :
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
