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>
