Привязка данных к Accordion (VB)

  • Статья

Кристиан Венц

Загрузить PDF-файл

Элемент управления Accordion в наборе элементов управления AJAX предоставляет несколько панелей и позволяет пользователю отображать одну из них одновременно. Панели обычно объявляются на самой странице, но привязка к источнику данных обеспечивает большую гибкость.

Общие сведения

Элемент управления Accordion в наборе элементов управления AJAX предоставляет несколько панелей и позволяет пользователю отображать одну из них одновременно. Панели обычно объявляются на самой странице, но привязка к источнику данных обеспечивает большую гибкость.

Этапы

Прежде всего, требуется источник данных. В этом примере используется база данных AdventureWorks и SQL Server 2005, экспресс-выпуск Майкрософт. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск) и также доступна для отдельной загрузки в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks является частью SQL Server 2005 Samples and Sample Databases (скачать по адресу https://www.microsoft.com/download/details.aspx?id=10679). Самый простой способ настроить базу данных — использовать SQL Server Management Studio Майкрософт (/sql/ssms/download-sql-server-management-studio-ssms) и присоединить AdventureWorks.mdf файл базы данных.

В этом примере предполагается, что экземпляр SQL Server 2005, экспресс-выпуск вызывается SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о подключении для базы данных.

Чтобы активировать функциональные возможности ASP.NET AJAX и control Toolkit, ScriptManager элемент управления должен быть размещен в любом месте страницы (но внутри <form> элемента ):

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

Затем добавьте источник данных на страницу. Чтобы использовать ограниченный объем данных, мы выбираем только первые пять записей в таблице Vendor базы данных AdventureWorks. Если для создания источника данных используется помощник Visual Studio, следует помнить, что ошибка в текущей версии не содержит префикс имени таблицы (Vendor) с Purchasingпомощью . В следующей разметке показан правильный синтаксис:

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

Запомните имя (идентификатор) источника данных. Эта идентификация должна быть затем использована в свойстве DataSourceID элемента управления Accordion:

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

В элементе управления Accordion можно предоставить шаблоны для различных частей элемента управления, включая заголовок (<HeaderTemplate>) и содержимое (<ContentTemplate>). В этих элементах просто выводите данные из источника данных с помощью DataBinder.Eval() метода :

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

При загрузке страницы источник данных должен быть привязан к аккордеону с помощью этого серверного кода:

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

Чтобы завершить этот пример, необходимо определить два класса CSS, на которые ссылается элемент управления Accordion (в его свойствах HeaderCssClass и ContentCssClass). Вставьте следующую разметку в <head> раздел страницы:

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

Данные в аккордеоне поступают непосредственно из источника данных

Данные в аккордеоне поступают непосредственно из источника данных (щелкните для просмотра полноразмерного изображения)

НазадВперед