Menambahkan Panel Akordion Secara Dinamis (C#)

oleh Christian Wenz

Unduh PDF

Kontrol Akordeon di Toolkit Kontrol AJAX menyediakan beberapa panel dan memungkinkan pengguna untuk 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 Akordeon di Toolkit Kontrol AJAX menyediakan beberapa panel dan memungkinkan pengguna untuk 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 Accordion mengekspos semua properti penting ke kode sisi server. Antara lain, Panes properti memberikan akses ke koleksi panel yang membentuk Akordion. Setiap panel ada jenis AccordionPane. Oleh karena itu, sepele untuk membuat panel seperti itu:

AccordionPane ap1 = new AccordionPane();

HeaderContainer Properti dari AccordionPane menyediakan akses ke kontrol ASP.NET di dalam bagian header panel; ContentContainer properti melakukan AccordionPane 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 Akordeon:

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

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)

SebelumnyaBerikutnya