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