Ajout dynamique d'un volet à un contrôle Accordion

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 le code coté serveur peut être utilisé pour atteindre le même résultat.
Voir une démo
Téléchargez le code de ce tutoriel

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Cet article est la traduction la plus fidèle possible de l'article original : Dynamically Adding An Accordion Pane

Étapes

Le contrôle Accordion expose toutes ses propriétés importantes sous forme de code côté serveur. Entre autres choses, la propriété Panes autorise l'accès à la collection de volets qui composent l'accordéon. Chaque volet est de type AccordionPane. Il est donc trivial de créer un tel volet :

 
Sélectionnez

AccordionPane ap1 = new AccordionPane(); 

La propriété HeaderContainer du contrôle AccordionPane donne accès aux contrôles ASP.NET situés à l'intérieur de la section d'en-tête du volet, tandis que la propriété ContentContainer fait de même pour le contenu du volet. Cela permet au code ASP.NET d'ajouter du contenu aux volets:

 
Sélectionnez

ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Code")); 
ap1.ContentContainer.Controls.Add(new LiteralControl("Adding panes using code is really flexible.")); 

Enfin, le nouveau volet doit être ajouté à collection Panes de l'accordéon :

 
Sélectionnez

acc1.Panes.Add(ap1); 

Voici exemple complet de code côté serveur, qui ajoute deux volets à un contrôle Accordion :

 
Sélectionnez

<script runat="server"> 
	void Page_Load(){      
		if (!Page.IsPostBack){           
			AccordionPane ap1 = new AccordionPane();           
			ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));           
			ap1.ContentContainer.Controls.Add(new                
			LiteralControl("Adding panes using markup is really simple."));           
			AccordionPane ap2 = new AccordionPane();           
			ap2.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));           
			ap2.ContentContainer.Controls.Add(new                
			LiteralControl("Adding panes using code is really flexible."));           
			acc1.Panes.Add(ap1);           
			acc1.Panes.Add(ap2);      
		} 
	} 
</script> 

Le seul élément manquant est l'accordéon lui-même, qui dépend de la présence du contrôle ASP.NET ScriptManager :

 
Sélectionnez

<form id="form1" runat="server">      
	<asp:ScriptManager ID="asm" runat="server" />      
	<div>           
		<ajaxToolkit:Accordion ID="acc1" runat="server"                
			HeaderCssClass="header" ContentCssClass="content"                
			Width="300px" FadeTransitions="true">           
		</ajaxToolkit:Accordion>      
	</div> 
</form> 

Pour terminer l'exemple, les deux classes CSS référencées par le contrôle d'accordéon fournissent des informations de style pour le navigateur :

 
Sélectionnez

<style type="text/css">      
	.header {background-color: blue;}      
	.content {border: solid;} 
</style> 
Image non disponible
Les données de l'accordéon ont été dynamiquement ajoutées par le code côté serveur

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.