Dynamiczne dodawanie okienka akordeonu (VB)

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:

Dim ap1 As 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">
Sub Page_Load()
 If Not Page.IsPostBack Then
 Dim ap1 As New AccordionPane()
 ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
 ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
 Dim ap2 As 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)
 End If
End Sub
</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)

Poprzednie