Udostępnij za pośrednictwem

Powiązanie danych z kontrolką Accordion (VB)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Accordion w zestawie narzędzi AJAX Control Toolkit udostępnia wiele okienek i umożliwia użytkownikowi wyświetlanie jednego z nich naraz. Panele są zwykle deklarowane w obrębie samej strony, ale powiązanie ze źródłem danych zapewnia większą elastyczność.

Omówienie

Kontrolka Accordion w zestawie narzędzi AJAX Control Toolkit udostępnia wiele okienek i umożliwia użytkownikowi wyświetlanie jednego z nich naraz. Panele są zwykle deklarowane w obrębie samej strony, ale powiązanie ze źródłem danych zapewnia większą elastyczność.

Kroki

Przede wszystkim wymagane jest źródło danych. W tym przykładzie użyto bazy danych AdventureWorks i SQL Server 2005 Express Edition firmy Microsoft. Baza danych jest opcjonalną częścią instalacji programu Visual Studio (w tym wersji ekspresowej) i jest również dostępna jako oddzielny plik do pobrania w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. Baza danych AdventureWorks jest częścią przykładów i przykładowych baz danych SQL Server 2005 (pobierz na stronie https://www.microsoft.com/download/details.aspx?id=10679). Najprostszym sposobem skonfigurowania bazy danych jest użycie programu Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) i dołączenie AdventureWorks.mdf pliku bazy danych.

W tym przykładzie przyjęto założenie, że wystąpienie SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tej samej maszynie co serwer internetowy. Jest to również konfiguracja domyślna. Jeśli konfiguracja jest inna, musisz dostosować informacje o połączeniu dla bazy danych.

Aby można było aktywować funkcje ASP.NET AJAX i Control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie <form> ):

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

Następnie dodaj źródło danych do strony. Aby użyć ograniczonej ilości danych, wybieramy tylko pięć pierwszych wpisów w tabeli Vendor bazy danych AdventureWorks. Jeśli używasz programu Visual Studio asystent do utworzenia źródła danych, pamiętaj, że usterka w bieżącej wersji nie prefiksuje nazwy tabeli (Vendor) za pomocą Purchasingpolecenia . Na poniższej adiustacji wyświetlana jest poprawna składnia:

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

Zapamiętaj nazwę (ID) źródła danych. Tej samej identyfikacji należy następnie użyć we DataSourceID właściwości kontrolki Accordion:

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

W kontrolce Accordion można udostępniać szablony dla różnych części kontrolki, w tym nagłówka (<HeaderTemplate>) i zawartości (<ContentTemplate>). W tych elementach po prostu wyprowadź dane ze źródła danych przy użyciu DataBinder.Eval() metody :

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

Po załadowaniu strony źródło danych musi być powiązane z akordeonem z tym kodem po stronie serwera:

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

Aby zakończyć ten przykład, należy zdefiniować dwie klasy CSS, do których odwołuje się kontrolka Accordion (we właściwościach HeaderCssClass i ContentCssClass). Umieść następujące znaczniki w <head> sekcji strony:

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

Dane w akordeonie pochodzą bezpośrednio ze źródła danych

Dane w akordeonie pochodzą bezpośrednio ze źródła danych (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej