Używanie kontrolki HoverMenu z kontrolką elementu powtarzanego (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Kontrolka kontrolki hovermenu w zestawie narzędzi AJAX Control oferuje prosty efekt podręczny: gdy wskaźnik myszy znajduje się nad elementem, zostanie wyświetlone okno podręczne na określonej pozycji. Można również użyć tej kontrolki w ramach wzmacniaka.

Omówienie

Formant HoverMenu w zestawie narzędzi AJAX Control udostępnia prosty efekt podręczny: gdy wskaźnik myszy znajduje się nad elementem, pojawi się okno podręczne na określonej pozycji. Można również użyć tej kontrolki w ramach wzmacniaka.

Kroki

Najpierw wymagane jest źródło danych. Ten przykład używa bazy danych AdventureWorks i Microsoft SQL Server 2005 Express Edition. Baza danych jest opcjonalną częścią instalacji programu Visual Studio (w tym Express Edition) i jest również dostępna jako oddzielne pobieranie w obszarze https://go.microsoft.com/fwlink/?LinkId=64064. Baza danych AdventureWorks jest częścią przykładów SQL Server 2005 i przykładowych baz danych (Pobierz w https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D isplaylang = EN). Najprostszym sposobem ustawienia bazy danych jest użycie Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D isplaylang = EN) i dołączenie pliku bazy danych AdventureWorks.mdf.

W tym przykładzie przyjęto założenie, że wystąpienie SQL Server 2005 Express Edition jest nazywane SQLEXPRESS i znajduje się na tym samym komputerze co serwer sieci Web; jest to również konfiguracja domyślna. Jeśli konfiguracja jest inna, należy dostosować informacje o połączeniu dla bazy danych.

Aby aktywować funkcje ASP.NET AJAX i zestawu narzędzi sterowania, formant ScriptManager musi być umieszczony w dowolnym miejscu na stronie (ale w obrębie elementu <form>):

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

Następnie Dodaj źródło danych do strony. Aby można było używać ograniczonej ilości danych, wybieramy tylko pięć pierwszych wpisów w tabeli dostawcy bazy danych AdventureWorks. Jeśli używasz asystenta programu Visual Studio do utworzenia źródła danych, weź pod uwagę, że usterka w bieżącej wersji nie zawiera prefiksu nazwy tabeli (Vendor) z Purchasing. Następujące znaczniki pokazują poprawną składnię:

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

Następnie Dodaj panel, który służy jako modalne menu podręczne:

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

Teraz HoverMenuExtender jest odtwarzany. Aby każdy element w źródle danych otrzymywał własne okno podręczne, rozszerzenie musi zostać umieszczone w sekcji <ItemTemplate>ka. Oto znacznik:

<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>

Teraz każdy element w źródle danych wyświetla okno podręczne z prawej strony (PopupPosition atrybutu) po opóźnieniu 50 milisekund (PopDelay Attribute).

menu aktywacja pojawia się obok każdego elementu w wzmacniake

Menu aktywacja pojawia się obok każdego elementu w wzmacniake (kliknij, aby wyświetlić obraz o pełnym rozmiarze)