Dynamiczne dodawanie okienka akordeonu (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Accordion w zestawie narzędzi AJAX Control Toolkit udostępnia wiele okienek i umożliwia użytkownikowi wyświetlanie jednego z nich naraz. Panele są zwykle deklarowane w obrębie samej strony, ale kod po stronie serwera może służyć do osiągnięcia tego samego wyniku.

Omówienie

Kontrolka Accordion w zestawie narzędzi AJAX Control Toolkit udostępnia wiele okienek i umożliwia użytkownikowi wyświetlanie jednego z nich naraz. Panele są zwykle deklarowane w obrębie samej strony, ale kod po stronie serwera może służyć do osiągnięcia tego samego wyniku.

Kroki

Kontrolka Accordion uwidacznia wszystkie ważne właściwości kodu po stronie serwera. Między innymi Panes właściwość udziela dostępu do kolekcji okienek tworzących akordeon. Każde okienko ma typ AccordionPane. Dlatego tworzenie takiego okienka jest proste:

AccordionPane ap1 = new AccordionPane();

Właściwość HeaderContainerAccordionPane zapewnia dostęp do kontrolek ASP.NET w sekcji nagłówka okienka. ContentContainer Właściwość AccordionPane ma to samo dla sekcji zawartości okienka. Dzięki temu ASP.NET kod dodawania zawartości do okienek:

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

Na koniec okienka należy dodać do Panes kolekcji akordeonu:

acc1.Panes.Add(ap1);

Oto kompletny kod po stronie serwera, który dodaje dwa okienka do kontrolki 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>

Jedynym brakującym elementem jest sam akordeon, który zależy od obecności kontrolki 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>

Aby zakończyć ten przykład, dwie klasy CSS, do których odwołuje się kontrolka Accordion, zawierają informacje o stylu dla przeglądarki:

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

Dane w akordeonie zostały dynamicznie dodane przez kod po stronie serwera (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej