Dynamické přidávání podokna Accordion (C#)

Christian Wenz

Stáhnout PDF

Ovládací prvek Accordion v sadě nástrojů AJAX Control Toolkit poskytuje více podoken a umožňuje uživateli zobrazit jedno z nich najednou. Panely jsou obvykle deklarovány v rámci samotné stránky, ale kód na straně serveru lze použít k dosažení stejného výsledku.

Přehled

Ovládací prvek Accordion v sadě nástrojů AJAX Control Toolkit poskytuje více podoken a umožňuje uživateli zobrazit jedno z nich najednou. Panely jsou obvykle deklarovány v rámci samotné stránky, ale kód na straně serveru lze použít k dosažení stejného výsledku.

Postup

Ovládací prvek Accordion zpřístupňuje všechny důležité vlastnosti kódu na straně serveru. Vlastnost mimo Panes jiné uděluje přístup ke kolekci podoken, které tvoří accordion. Každé podokno je typu AccordionPane. Vytvoření takového podokna je proto triviální:

AccordionPane ap1 = new AccordionPane();

Vlastnost HeaderContainerAccordionPane poskytuje přístup k ovládacím prvkům ASP.NET v části záhlaví podokna; ContentContainer vlastnost AccordionPane dělá totéž pro oddíl obsahu podokna. To umožňuje ASP.NET kódu přidat obsah do podoken:

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

Nakonec je potřeba přidat podokna do Panes kolekce Accordionu:

acc1.Panes.Add(ap1);

Tady je kompletní kód na straně serveru, který přidá dvě podokna do ovládacího prvku 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>

Jediným chybějícím prvkem je samotný Accordion, který závisí na přítomnosti ovládacího prvku 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>

Pro dokončení příkladu dvě třídy CSS odkazované v ovládacím prvku Accordion poskytují informace o stylu pro prohlížeč:

<style type="text/css">
 .header {background-color: blue;}
 .content {border: solid;}
</style>

Data v akordeonu byla dynamicky přidána kódem na straně serveru (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší