Ajout dynamique d'un volet à 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 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

               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  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 : 

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: 

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 : 

acc1.Panes.Add(ap1);
Voici exemple complet de code côté serveur, qui ajoute deux volets à un contrôle Accordion : 

<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 : 

<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 : 

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


               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