Liaison de données à un Accordion (VB)
par Christian Wenz
Le contrôle Accordéon dans ajax Control Toolkit fournit plusieurs volets et permet à l’utilisateur d’afficher l’un d’entre eux à la fois. Les panneaux sont généralement déclarés dans la page elle-même, mais la liaison à une source de données offre plus de flexibilité.
Vue d’ensemble
Le contrôle Accordéon dans ajax Control Toolkit fournit plusieurs volets et permet à l’utilisateur d’afficher l’un d’entre eux à la fois. Les panneaux sont généralement déclarés dans la page elle-même, mais la liaison à une source de données offre plus de flexibilité.
Étapes
Tout d’abord, une source de données est requise. Cet exemple utilise la base de données AdventureWorks et microsoft SQL Server 2005 Express Edition. La base de données est une partie facultative d’une installation de Visual Studio (y compris express edition) et est également disponible en tant que téléchargement distinct sous https://go.microsoft.com/fwlink/?LinkId=64064. La base de données AdventureWorks fait partie de la SQL Server 2005 Samples and Sample Databases (télécharger à l’adresse https://www.microsoft.com/download/details.aspx?id=10679). Le moyen le plus simple de configurer la base de données consiste à utiliser microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) et à attacher le AdventureWorks.mdf fichier de base de données.
Pour cet exemple, nous partons du principe que la instance du SQL Server 2005 Express Edition est appelée SQLEXPRESS et réside sur la même machine que le serveur web ; il s’agit également de la configuration par défaut. Si votre configuration diffère, vous devez adapter les informations de connexion pour la base de données.
Pour activer les fonctionnalités de ASP.NET AJAX et control Toolkit, le ScriptManager contrôle doit être placé n’importe où sur la page (mais dans l’élément <form> ) :
<asp:ScriptManager ID="asm" runat="server"/>
Ajoutez ensuite une source de données à la page. Pour utiliser une quantité limitée de données, nous sélectionnons uniquement les cinq premières entrées dans la table Vendor de la base de données AdventureWorks. Si vous utilisez le assistant Visual Studio pour créer la source de données, n’oubliez pas qu’un bogue dans la version actuelle ne précédent pas le nom de la table (Vendor) avec Purchasing. Le balisage 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 ensuite être utilisée dans la DataSourceID propriété du contrôle Accordéon :
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
Dans le contrôle Accordéon, vous pouvez fournir des modèles pour différentes parties du contrôle, notamment l’en-tête (<HeaderTemplate>) et le contenu (<ContentTemplate>). Dans ces éléments, il suffit de sortir les données de la source de données, à l’aide de la DataBinder.Eval() méthode :
<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">
Sub Page_Load()
acc1.DataBind()
End Sub
</script>
Pour conclure cet exemple, vous devez définir les deux classes CSS référencées dans le contrôle Accordéon (dans ses propriétés HeaderCssClass et ContentCssClass). Placez le balisage suivant dans la <head> section de la page :
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Les données de l’accordéon proviennent directement de la source de données (cliquer pour afficher l’image en taille réelle)
