Bir Accordion’a Veri Bağlama (VB)Databinding to an Accordion (VB)

Hristia WENZ tarafındanby Christian Wenz

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

AJAX denetim araç setinde bulunan Accordion denetimi birden çok bölme sağlar ve kullanıcının her seferinde birini görüntülemesini sağlar.The Accordion control in the AJAX Control Toolkit provides multiple panes and allows the user to display one of them at a time. Panolar genellikle sayfanın kendisi içinde gösterilir, ancak bir veri kaynağına bağlama daha fazla esneklik sağlar.Panels are usually declared within the page itself, but binding to a data source offers more flexibility.

Genel bakışOverview

AJAX denetim araç setinde bulunan Accordion denetimi birden çok bölme sağlar ve kullanıcının her seferinde birini görüntülemesini sağlar.The Accordion control in the AJAX Control Toolkit provides multiple panes and allows the user to display one of them at a time. Panolar genellikle sayfanın kendisi içinde gösterilir, ancak bir veri kaynağına bağlama daha fazla esneklik sağlar.Panels are usually declared within the page itself, but binding to a data source offers more flexibility.

AdımlarSteps

Birincisi, bir veri kaynağı gereklidir.First of all, a data source is required. Bu örnek, AdventureWorks veritabanını ve Microsoft SQL Server 2005 Express sürümünü kullanır.This sample uses the AdventureWorks database and the Microsoft SQL Server 2005 Express Edition. Veritabanı, Visual Studio yüklemesinin (Express Edition dahil) isteğe bağlı bir parçasıdır ve https://go.microsoft.com/fwlink/?LinkId=64064altında ayrı bir indirme olarak da kullanılabilir.The database is an optional part of a Visual Studio installation (including express edition) and is also available as a separate download under https://go.microsoft.com/fwlink/?LinkId=64064. AdventureWorks veritabanı SQL Server 2005 örnek ve örnek veritabanlarının bir parçasıdır ( https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D ısplaylang = en).The AdventureWorks database is part of the SQL Server 2005 Samples and Sample Databases (download at https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&DisplayLang=en). Veritabanını ayarlamanın en kolay yolu, Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D isplayLang = en) kullanmaktır ve AdventureWorks.mdf veritabanı dosyasını eklemektir.The easiest way to set the database up is to use the Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en) and attach the AdventureWorks.mdf database file.

Bu örnek için, SQL Server 2005 Express Sürüm örneğinin SQLEXPRESS ve Web sunucusuyla aynı makinede yer aldığı varsayılmaktadır; Bu, aynı zamanda varsayılan kurulumdır.For this sample, we assume that the instance of the SQL Server 2005 Express Edition is called SQLEXPRESS and resides on the same machine as the web server; this is also the default setup. Kurulumlarınız farklıysa, veritabanının bağlantı bilgilerini uyarlamanız gerekir.If your setup differs, you have to adapt the connection information for the database.

ASP.NET AJAX ve Denetim araç seti işlevlerini etkinleştirmek için, ScriptManager denetimi sayfada herhangi bir yere yerleştirmeli (ancak <form> öğesi içinde):In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

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

Ardından, sayfaya bir veri kaynağı ekleyin.Then, add a data source to the page. Sınırlı miktarda veri kullanmak için, AdventureWorks veritabanının satıcı tablosunda yalnızca ilk beş girişi seçersiniz.In order to use a limited amount of data, we only select the first five entries in the Vendor table of the AdventureWorks database. Veri kaynağını oluşturmak için Visual Studio Yardımcısı 'nı kullanıyorsanız, geçerli sürümdeki bir hatanın Purchasingtablo adını (Vendor) ön eki olmadığını unutmayın.If you are using the Visual Studio assistant to create the data source, mind that a bug in the current version does not prefix the table name (Vendor) with Purchasing. Aşağıdaki biçimlendirme doğru söz dizimini göstermektedir:The following markup shows the correct syntax:

<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ı (ID) unutmayın.Remember the name (ID) of the data source. Bu çok tanımlayıcı daha sonra Accordion denetiminin DataSourceID özelliğinde kullanılmalıdır:This very identification must then be used in the DataSourceID property of the Accordion control:

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

Accordion denetimi içinde, üst bilgi (<HeaderTemplate>) ve içerik (<ContentTemplate>) dahil olmak üzere, denetimin çeşitli bölümlerine yönelik şablonlar sağlayabilirsiniz.Within the Accordion control, you can provide templates for various parts of the control, including the header (<HeaderTemplate>) and the content (<ContentTemplate>). Bu öğeler içinde, DataBinder.Eval() yöntemi kullanarak verileri veri kaynağından çıkış yapmanız yeterlidir:Within these elements, just output the data from the data source, using the DataBinder.Eval() method:

<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ğının bu sunucu tarafı koduyla Accordion 'e bağlanması gerekir:When the page is loaded, the data source must be bound to the accordion with this server-side code:

<script runat="server"> 
 Sub Page_Load() 
 acc1.DataBind()
 End Sub 
</script>

Bu örneği sonuçlandırma için, Accordion denetiminde (özelliklerinde HeaderCssClass ve ContentCssClass) başvurulan iki CSS sınıfını tanımlamanız gerekir.To conclude this sample, you need to define the two CSS classes that are referenced in the Accordion control (in its properties HeaderCssClass and ContentCssClass). Aşağıdaki biçimlendirmeyi sayfanın <head> bölümüne koyun:Put the following markup in the <head> section of the page:

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

Accordion içindeki verilerin doğrudan veri kaynağından gelirThe data in the accordion comes directly from the data source

Accordion içindeki veriler doğrudan veri kaynağından gelir (tam boyutlu görüntüyü görüntülemek Için tıklatın)The data in the accordion comes directly from the data source (Click to view full-size image)