Menambahkan Panel Akordion (VB) secara dinamis

oleh Christian Wenz

Unduh PDF

Kontrol Akordion di Toolkit Kontrol AJAX menyediakan beberapa panel dan memungkinkan pengguna menampilkan salah satunya pada satu waktu. Panel biasanya dideklarasikan dalam halaman itu sendiri, tetapi kode sisi server dapat digunakan untuk mencapai hasil yang sama.

Gambaran Umum

Kontrol Akordion di Toolkit Kontrol AJAX menyediakan beberapa panel dan memungkinkan pengguna menampilkan salah satunya pada satu waktu. Panel biasanya dideklarasikan dalam halaman itu sendiri, tetapi kode sisi server dapat digunakan untuk mencapai hasil yang sama.

Langkah-langkah

Kontrol Akordeon mengekspos semua properti penting ke kode sisi server. Antara lain, Panes properti memberikan akses ke pengumpulan panel yang membentuk Akordion. Setiap panel ada jenis AccordionPane. Oleh karena itu, sepele untuk membuat panel seperti itu:

Dim ap1 As New AccordionPane()

HeaderContainer Properti dari AccordionPane menyediakan akses ke kontrol ASP.NET di dalam bagian header panel; ContentContainer properti dari AccordionPane melakukan hal yang sama untuk bagian konten panel. Ini memungkinkan kode ASP.NET untuk menambahkan konten ke panel:

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

Terakhir, panel harus ditambahkan ke Panes koleksi Akordion:

acc1.Panes.Add(ap1)

Berikut adalah kode sisi server lengkap yang menambahkan dua panel ke kontrol 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>

Satu-satunya elemen yang hilang adalah Accordion itu sendiri, yang tergantung pada keberadaan kontrol 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>

Untuk menyelesaikan contoh, dua kelas CSS yang direferensikan dalam kontrol Accordion menyediakan informasi gaya untuk browser:

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

Data dalam akordeon ditambahkan secara dinamis oleh kode sisi server (Klik untuk melihat gambar ukuran penuh)

Sebelumnya