Sdílet prostřednictvím


Použití nabídky HoverMenu s ovládacím prvkem Repeater (C#)

Christian Wenz

Stáhnout PDF

Ovládací prvek HoverMenu v sadě nástrojů AJAX Control Toolkit poskytuje jednoduchý automaticky otevíraný efekt: Když ukazatel myši najede na prvek, zobrazí se automaticky otevírané okno na zadané pozici. Tento ovládací prvek je také možné použít v rámci opakovače.

Přehled

Ovládací HoverMenu prvek v sadě AJAX Control Toolkit poskytuje jednoduchý automaticky otevíraný efekt: Když ukazatel myši najede na prvek, zobrazí se automaticky otevírané okno na zadané pozici. Tento ovládací prvek je také možné použít v rámci opakovače.

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

Dále přidejte panel, který slouží jako modální automaticky otevírané okno:

<asp:Panel ID="HoverPanel" runat="server">
 More info ...
</asp:Panel>

HoverMenuExtender Teď přichází do hry. Aby každý prvek ve zdroji dat získal vlastní automaticky otevírané okno, musí být extender umístěn do oddílu opakovače <ItemTemplate> . Tady je kód:

<asp:Repeater ID="rep1" DataSourceID="sds1" runat="server">
 <ItemTemplate>
 <br />
 <asp:Panel ID="myPanel" runat="server" Width="400px" BackColor="Lime" BorderWidth="1px">
 <div>
 Vendor
 <%#DataBinder.Eval(Container.DataItem, "Name")%>
 </div>
 </asp:Panel>
 <br />
 <ajaxToolkit:HoverMenuExtender ID="hme" runat="server" TargetControlID="myPanel"
 PopupControlID="HoverPanel" PopupPosition="Right" PopDelay="50" />
 </ItemTemplate>
</asp:Repeater>

Teď se po 50 milisekundách (atributu) zobrazí automaticky otevírané okno vpravoPopupPosition (PopDelay atribut).

Vedle každé položky v opakovači se zobrazí nabídka přechodu myší.

Nabídka přechodu se zobrazí vedle každé položky v opakovači (kliknutím zobrazíte obrázek v plné velikosti).