Поделиться через

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

  • Статья

Кристиан Венц (Christian Wenz)

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

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

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

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

Этапы

Прежде всего, требуется источник данных. В этом примере используется база данных AdventureWorks и SQL Server 2005, экспресс-выпуск Майкрософт. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск) и также доступна для отдельной загрузки в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks является частью SQL Server примеров и примеров баз данных 2005 года (скачать по адресу 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 и набора средств управления, 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"> 
 void Page_Load() 
 { 
 acc1.DataBind();
 }
</script>

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

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

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

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

Вперед