Lier une source de données à un contrôle Accordion

Date de publication : 03 mai 2009 , Date de mise à jour : 03 mai 2009

Par Christian Wenz
 Philippe Vialatte (Traduction) (ma page DVP) (Blog)
 

Le contrôle Accordion de l'AJAX Control Toolkit permet de gérer de multiples volets et autorise l'utilisateur à les afficher un à la fois. Les volets 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é.
Voir une démo
Téléchargez le code de ce tutoriel

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en  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 fr  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 à fr 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 (fr  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>
Les données de l'accordéon proviennent directement de la source de données


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web