Datová vazba ovládacího prvku Accordion (C#)
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 (kliknutím zobrazíte obrázek v plné velikosti).
