Sdílet prostřednictvím

Datová vazba ovládacího prvku Accordion (C#)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek Accordion v sadě nástrojů AJAX Control Toolkit poskytuje více podoken a umožňuje uživateli zobrazit jedno z nich najednou. Panely jsou obvykle deklarovány v rámci samotné stránky, ale vazba na zdroj dat nabízí větší flexibilitu.

Přehled

Ovládací prvek Accordion v sadě nástrojů AJAX Control Toolkit poskytuje více podoken a umožňuje uživateli zobrazit jedno z nich najednou. Panely jsou obvykle deklarovány v rámci samotné stránky, ale vazba na zdroj dat nabízí větší flexibilitu.

Postup

Nejprve se vyžaduje zdroj dat. Tato ukázka používá databázi AdventureWorks a SQL Server 2005 Express Edition Microsoftu. Databáze je volitelnou součástí instalace sady Visual Studio (včetně edice Express) a je také k dispozici jako samostatný soubor ke stažení v části https://go.microsoft.com/fwlink/?LinkId=64064. Databáze AdventureWorks je součástí SQL Server 2005 Samples and Sample Databases (ke stažení na adrese https://www.microsoft.com/download/details.aspx?id=10679). Nejjednodušším způsobem, jak databázi nastavit, je použít microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) a připojit AdventureWorks.mdf soubor databáze.

U této ukázky předpokládáme, že instance SQL Server 2005 Express Edition je volána SQLEXPRESS a nachází se na stejném počítači jako webový server. Jedná se také o výchozí nastavení. Pokud se vaše nastavení liší, musíte upravit informace o připojení k databázi.

Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, ScriptManager musí být ovládací prvek umístěn kdekoli na stránce (ale v rámci elementu <form> ):

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

Potom na stránku přidejte zdroj dat. Abychom mohli použít omezené množství dat, vybereme pouze prvních pět položek v tabulce Vendor databáze AdventureWorks. Pokud k vytvoření zdroje dat používáte asistent sady Visual Studio, mějte na paměti, že chyba v aktuální verzi neudává před název tabulky (Vendor) předponu Purchasing. Následující kód ukazuje správnou syntaxi:

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

Zapamatujte si název (ID) zdroje dat. Tato identifikace pak musí být použita ve DataSourceID vlastnosti ovládacího prvku Accordion:

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

V rámci ovládacího prvku Accordion můžete poskytnout šablony pro různé části ovládacího prvku, včetně záhlaví (<HeaderTemplate>) a obsahu (<ContentTemplate>). V rámci těchto prvků stačí pomocí metody vyčíst data ze zdroje DataBinder.Eval() dat:

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

Po načtení stránky musí být zdroj dat vázán na akordeon s tímto kódem na straně serveru:

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

Na závěr této ukázky je potřeba definovat dvě třídy CSS, na které se odkazuje v ovládacím prvku Accordion (v jeho vlastnostech HeaderCssClass a ContentCssClass). Do oddílu <head> stránky vložte následující kód:

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

Data v akordeonu pocházejí přímo ze zdroje dat.

Data v akordeonu pocházejí přímo ze zdroje dat (kliknutím zobrazíte obrázek v plné velikosti).

Další