Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Christian Wenz
Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, jeweils eine davon anzuzeigen. Panels werden in der Regel innerhalb der Seite selbst deklariert, aber die Bindung an eine Datenquelle bietet mehr Flexibilität.
Übersicht
Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, jeweils eine davon anzuzeigen. Panels werden in der Regel innerhalb der Seite selbst deklariert, aber die Bindung an eine Datenquelle bietet mehr Flexibilität.
Schritte
Zunächst ist eine Datenquelle erforderlich. In diesem Beispiel werden die AdventureWorks-Datenbank und die Microsoft SQL Server 2005 Express Edition verwendet. Die Datenbank ist ein optionaler Bestandteil einer Visual Studio-Installation (einschließlich express edition) und kann auch separat heruntergeladen werden unter https://go.microsoft.com/fwlink/?LinkId=64064. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005-Beispiele und Beispieldatenbanken (herunterladen unter https://www.microsoft.com/download/details.aspx?id=10679). Die einfachste Möglichkeit zum Einrichten der Datenbank besteht darin, das Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) zu verwenden und die AdventureWorks.mdf Datenbankdatei anzufügen.
Für dieses Beispiel wird davon ausgegangen, dass die Instanz der SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn sich Das Setup unterscheidet, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.
Um die Funktionalität von ASP.NET AJAX und dem Steuerelement-Toolkit zu aktivieren, muss das ScriptManager Steuerelement an einer beliebigen Stelle auf der Seite (aber innerhalb des <form> Elements) platziert werden:
<asp:ScriptManager ID="asm" runat="server"/>
Fügen Sie dann der Seite eine Datenquelle hinzu. Um eine begrenzte Datenmenge zu verwenden, wählen wir nur die ersten fünf Einträge in der Tabelle "Vendor" der AdventureWorks-Datenbank aus. Wenn Sie den Visual Studio-Assistenten zum Erstellen der Datenquelle verwenden, beachten Sie, dass in der aktuellen Version aufgrund eines Fehlers der Tabellennamen Vendor nicht mit Purchasing vorangestellt wird. Das folgende Markup zeigt die richtige 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]" />
Denken Sie an den Namen (ID) der Datenquelle. Diese Identifikation muss dann in der DataSourceID-Eigenschaft des Accordion-Steuerelements verwendet werden.
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
Innerhalb des Accordion-Steuerelements können Sie Vorlagen für verschiedene Teile des Steuerelements bereitstellen, einschließlich der Kopfzeile (<HeaderTemplate>) und des Inhalts (<ContentTemplate>). Geben Sie in diesen Elementen einfach die Daten aus der Datenquelle mit der DataBinder.Eval() Methode aus:
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
Wenn die Seite geladen wird, muss die Datenquelle mit diesem serverseitigen Code an das Accordion gebunden werden:
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
Um dieses Beispiel abzuschließen, müssen Sie die beiden CSS-Klassen definieren, auf die im Accordion-Steuerelement (in den Eigenschaften HeaderCssClass und ContentCssClass) verwiesen wird. Fügen Sie das folgende Markup im <head> Abschnitt der Seite ein:
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Die Daten im Accordion stammen direkt aus der Datenquelle (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
