Dynamisches Hinzufügen eines Accordion-Bereichs (VB)

von Christian Wenz

PDF herunterladen

Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, jeweils eine davon anzuzeigen. Panels werden in der Regel innerhalb der Seite selbst deklariert, aber serverseitiger Code kann verwendet werden, um dasselbe Ergebnis zu erzielen.

Übersicht

Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, jeweils eine davon anzuzeigen. Panels werden in der Regel innerhalb der Seite selbst deklariert, aber serverseitiger Code kann verwendet werden, um dasselbe Ergebnis zu erzielen.

Schritte

Das Accordion-Steuerelement stellt alle wichtigen Eigenschaften für serverseitigen Code zur Verfügung. Unter anderem gewährt die Panes Eigenschaft Zugriff auf die Sammlung von Bereichen, die das Accordion bilden. Jeder Bereich ist vom Typ AccordionPane. Daher ist es trivial, einen solchen Bereich zu erstellen:

Dim ap1 As New AccordionPane()

Die HeaderContainer-Eigenschaft von AccordionPane bietet Zugriff auf die ASP.NET-Steuerelemente innerhalb des Kopfzeilenbereichs des Bereichs; die ContentContainer-Eigenschaft von AccordionPane erfüllt die gleiche Funktion für den Inhaltsabschnitt des Bereichs. Dies ermöglicht es dem ASP.NET-Code, Inhalte zu den Bereichen hinzuzufügen.

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

Schließlich müssen die Paneele zur Panes-Sammlung des Akkordeon hinzugefügt werden.

acc1.Panes.Add(ap1)

Hier ist ein vollständiger serverseitiger Code, der einem Accordion-Steuerelement zwei Bereiche hinzufügt:

<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>

Das einzige fehlende Element ist das Accordion selbst, das vom Vorhandensein des ASP.NET-Steuerelements ScriptManager abhängt:

<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>

Um das Beispiel abzuschließen, stellen die beiden CSS-Klassen, auf die im Accordion-Steuerelement verwiesen wird, Formatvorlageninformationen für den Browser bereit:

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

Die Daten im Accordion wurden dynamisch vom serverseitigen Code hinzugefügt (Klicken Sie, um das Bild in voller Größe anzuzeigen)