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

| Christian Wenz | Philippe Vialatte (Traduction) |

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

- Titre : Ajout dynamique d'un volet à un contrôle Accordion

- Auteurs : Christian Wenz, Philippe Vialatte (Traduction)

- Parution : 3 mai 2009

- Mise à jour : 3 mai 2009

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

Sommaire

- Traduction

- Étapes

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 :

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