Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Christian Wenz
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 mengikat sumber data menawarkan lebih banyak fleksibilitas.
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 mengikat sumber data menawarkan lebih banyak fleksibilitas.
Langkah-langkah
Pertama-tama, sumber data diperlukan. Sampel ini menggunakan database AdventureWorks dan microsoft SQL Server 2005 Express Edition. Database adalah bagian opsional dari penginstalan Visual Studio (termasuk edisi ekspres) dan juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Database AdventureWorks adalah bagian dari Sampel SQL Server 2005 dan Database Sampel (unduh di https://www.microsoft.com/download/details.aspx?id=10679). Cara termudah untuk menyiapkan database adalah dengan menggunakan Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) dan melampirkan AdventureWorks.mdf file database.
Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database.
Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):
<asp:ScriptManager ID="asm" runat="server"/>
Kemudian, tambahkan sumber data ke halaman. Untuk menggunakan data dalam jumlah terbatas, kami hanya memilih lima entri pertama dalam tabel Vendor database AdventureWorks. Jika Anda menggunakan asisten Visual Studio untuk membuat sumber data, ingatlah bahwa bug dalam versi saat ini tidak mengawali nama tabel (Vendor) dengan Purchasing. Markup berikut menunjukkan sintaks yang benar:
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
Ingat nama (ID) sumber data. Identifikasi ini kemudian harus digunakan dalam DataSourceID properti kontrol Accordion:
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
Dalam kontrol Accordion, Anda dapat menyediakan templat untuk berbagai bagian kontrol, termasuk header (<HeaderTemplate>) dan konten (<ContentTemplate>). Dalam elemen-elemen ini, cukup keluarkan data dari sumber data, menggunakan DataBinder.Eval() metode :
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
Ketika halaman dimuat, sumber data harus terikat ke akordeion dengan kode sisi server ini:
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
Untuk menyimpulkan sampel ini, Anda perlu menentukan dua kelas CSS yang direferensikan dalam kontrol Akordeon (dalam propertinya HeaderCssClass dan ContentCssClass). Letakkan markup berikut di bagian <head> halaman:
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Data dalam akordion berasal langsung dari sumber data (Klik untuk melihat gambar ukuran penuh)
