Notatka
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Autor: Christian Wenz
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 na samej stronie, ale powiązanie ze źródłem danych zapewnia większą elastyczność.
Przegląd
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 na samej stronie, 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 programu Microsoft SQL Server 2005 Express Edition. 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 baz danych wzorcowych dla 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 programu SQL Server 2005 Express Edition jest wywoływane SQLEXPRESS i znajduje się na tym samym komputerze co serwer internetowy. Jest to również konfiguracja domyślna. Jeśli konfiguracja się różni, musisz dostosować informacje o połączeniu dla bazy danych.
Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi 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 (Dostawca) bazy danych AdventureWorks. Jeśli używasz asystenta Visual Studio do utworzenia źródła danych, pamiętaj, że błąd w bieżącej wersji nie opatrza nazwy tabeli (Vendor) przedrostkiem Purchasing. Poniższy znacznik pokazuje poprawną składnię:
<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. Ta sama identyfikacja powinna być następnie użyta we DataSourceID właściwości kontroli typu 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 wystarczy wyświetlić 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 przy użyciu tego kodu 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ący znacznik 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 (kliknij, aby wyświetlić obraz pełnowymiarowy)
