Bir Accordion’a Veri Bağlama (C#)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

AJAX Denetim Araç Seti'ndeki Accordion denetimi birden çok bölme sağlar ve kullanıcının bir kerede bunlardan birini görüntülemesine olanak tanır. Paneller genellikle sayfanın içinde bildirilir, ancak bir veri kaynağına bağlama daha fazla esneklik sunar.

Genel Bakış

AJAX Denetim Araç Seti'ndeki Accordion denetimi birden çok bölme sağlar ve kullanıcının bir kerede bunlardan birini görüntülemesine olanak tanır. Paneller genellikle sayfanın içinde bildirilir, ancak bir veri kaynağına bağlama daha fazla esneklik sunar.

Adımlar

Her şeyden önce, bir veri kaynağı gereklidir. Bu örnekte AdventureWorks veritabanı ve Microsoft SQL Server 2005 Express Sürüm kullanılmaktadır. Veritabanı, Visual Studio yüklemesinin (express edition dahil) isteğe bağlı bir parçasıdır ve altında https://go.microsoft.com/fwlink/?LinkId=64064ayrı bir indirme olarak da kullanılabilir. AdventureWorks veritabanı, SQL Server 2005 Örnekleri ve Örnek Veritabanlarının bir parçasıdır (adresinden https://www.microsoft.com/download/details.aspx?id=10679indirin). Veritabanını ayarlamanın en kolay yolu, Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) kullanmak ve veritabanı dosyasını eklemektirAdventureWorks.mdf.

Bu örnek için, SQL Server 2005 Express Sürüm örneğinin çağrıldığını SQLEXPRESS ve web sunucusuyla aynı makinede bulunduğunu varsayarız; bu aynı zamanda varsayılan kurulumdur. Kurulumunuz farklıysa, veritabanı için bağlantı bilgilerini uyarlamanız gerekir.

ASP.NET AJAX ve Denetim Araç Seti'nin işlevselliğini etkinleştirmek için, ScriptManager denetim sayfanın herhangi bir yerine (ancak öğesi içinde <form> ) yerleştirilmelidir:

<asp:ScriptManager ID="asm" runat="server"/>

Ardından sayfaya bir veri kaynağı ekleyin. Sınırlı miktarda veri kullanmak için AdventureWorks veritabanının Vendor tablosunda yalnızca ilk beş girdiyi seçiyoruz. Veri kaynağını oluşturmak için Visual Studio yardımcı kullanıyorsanız, geçerli sürümdeki bir hatanın tablo adına () ön Purchasingekini eklemediğiniVendor unutmayın. Aşağıdaki işaretleme doğru söz dizimini gösterir:

<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]" />

Veri kaynağının adını (KIMLIĞI) unutmayın. Bu kimlik daha sonra Accordion denetiminin DataSourceID özelliğinde kullanılmalıdır:

<ajaxToolkit:Accordion ID="acc1" runat="server"
 HeaderCssClass="header" ContentCssClass="content"Width="300px" 
 DataSourceID="sds1" FadeTransitions="true">

Accordion denetiminde, üst bilgi () ve içerik<ContentTemplate> (<HeaderTemplate>) dahil olmak üzere denetimin çeşitli bölümleri için şablonlar sağlayabilirsiniz. Bu öğeler içinde, yöntemini kullanarak veri kaynağından verileri çıktı olarak verin DataBinder.Eval() :

<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
 </HeaderTemplate> 
 <ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate> 
</ajaxToolkit:Accordion>

Sayfa yüklendiğinde, veri kaynağı şu sunucu tarafı koduyla akordeonla ilişkilendirilmelidir:

<script runat="server"> 
 void Page_Load() 
 { 
 acc1.DataBind();
 }
</script>

Bu örneği sonuçlandırmak için Accordion denetiminde başvuruda bulunan iki CSS sınıfını tanımlamanız gerekir (özelliklerinde HeaderCssClass ve ContentCssClass). Sayfanın bölümüne aşağıdaki işaretlemeyi <head> ekleyin:

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

Akordeondaki veriler doğrudan veri kaynağından gelir

Akordeondaki veriler doğrudan veri kaynağından gelir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sonraki