Share via

Datenbindung an Accordion (C#)

  • Artikel

von Christian Wenz

PDF herunterladen

Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, einen dieser Bereiche gleichzeitig anzuzeigen. Panels werden normalerweise innerhalb der Seite selbst deklariert, aber die Bindung an eine Datenquelle bietet mehr Flexibilität.

Überblick

Das Accordion-Steuerelement im AJAX-Steuerelement-Toolkit bietet mehrere Bereiche und ermöglicht es dem Benutzer, einen dieser Bereiche gleichzeitig anzuzeigen. Panels werden normalerweise innerhalb der Seite selbst deklariert, aber die Bindung an eine Datenquelle bietet mehr Flexibilität.

Schritte

Zunächst ist eine Datenquelle erforderlich. Dieses Beispiel verwendet die AdventureWorks-Datenbank und die Microsoft SQL Server 2005 Express Edition. Die Datenbank ist optional teil einer Visual Studio-Installation (einschließlich Express Edition) und steht auch als separater Download unter https://go.microsoft.com/fwlink/?LinkId=64064zur Verfügung. Die AdventureWorks-Datenbank ist Teil der SQL Server 2005 Beispiele und Beispieldatenbanken (Download unter https://www.microsoft.com/download/details.aspx?id=10679). Am einfachsten können Sie die Datenbank einrichten, indem Sie die Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) verwenden und die AdventureWorks.mdf Datenbankdatei anfügen.

Für dieses Beispiel wird davon ausgegangen, dass der instance des SQL Server 2005 Express Edition aufgerufen SQLEXPRESS wird und sich auf demselben Computer wie der Webserver befindet. Dies ist auch das Standardsetup. Wenn ihr Setup unterschiedlich ist, müssen Sie die Verbindungsinformationen für die Datenbank anpassen.

Um die Funktionalität von ASP.NET AJAX und des Control Toolkits zu aktivieren, muss das ScriptManager Steuerelement an einer beliebigen Stelle auf der Seite platziert werden (aber innerhalb des <form> Elements):

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

Fügen Sie dann der Seite eine Datenquelle hinzu. Um eine begrenzte Menge an Daten zu verwenden, wählen wir nur die ersten fünf Einträge in der Tabelle Vendor der AdventureWorks-Datenbank aus. Wenn Sie die Visual Studio-Assistent zum Erstellen der Datenquelle verwenden, beachten Sie, dass ein Fehler in der aktuellen Version dem Tabellennamen (Vendor) Purchasingnicht vorangestellt wird. Das folgende Markup zeigt die richtige Syntax an:

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

Merken Sie sich den Namen (ID) der Datenquelle. Genau diese Identifizierung 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">

Im Accordion-Steuerelement können Sie Vorlagen für verschiedene Teile des Steuerelements bereitstellen, einschließlich des Headers (<HeaderTemplate>) und des Inhalts (<ContentTemplate>). Geben Sie innerhalb dieser Elemente 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 an das Akkordeon mit diesem serverseitigen Code gebunden sein:

<script runat="server"> 
 void Page_Load() 
 { 
 acc1.DataBind();
 }
</script>

Zum Abschluss dieses Beispiels müssen Sie die beiden CSS-Klassen definieren, auf die im Accordion-Steuerelement (in seinen Eigenschaften HeaderCssClass und ContentCssClass) verwiesen wird. Fügen Sie das folgende Markup in den <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.

Die Daten im Accordion stammen direkt aus der Datenquelle (Klicken Sie hier, um das bild in voller Größe anzuzeigen).

Nächste