Использование HoverMenu с элементом управления Repeater (C#)

по Кристиан Венз

Скачать код или скачать PDF

Элемент управления HoverMenu в наборе AJAX Control Toolkit предоставляет простой всплывающий экран: при наведении указателя мыши на элемент в указанной позиции появляется всплывающее окно. Этот элемент управления также можно использовать в элементе Repeater.

Обзор

Элемент управления HoverMenu в наборе средств AJAX Control Toolkit предоставляет простой всплывающий экран: при наведении указателя мыши на элемент в заданной позиции появляется всплывающее окно. Этот элемент управления также можно использовать в элементе Repeater.

Шаги

Во-первых, требуется источник данных. В этом примере используется база данных AdventureWorks и Microsoft SQL Server 2005 Express Edition. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск) и доступна как отдельная загрузка в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks входит в состав примеров SQL Server 2005 и образцов баз данных (скачать в https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D исплайланг = EN). Самый простой способ настроить базу данных — использовать Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D исплайланг = EN) и присоединить файл базы данных AdventureWorks.mdf.

В этом примере предполагается, что экземпляр SQL Server 2005, экспресс-выпуск называется SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию. Если настройка отличается, необходимо адаптировать сведения о соединении для базы данных.

Чтобы активировать функциональные возможности ASP.NET AJAX и набора элементов управления, элемент управления ScriptManager должен быть размещен в любом месте страницы (но в элементе <form>):

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

Затем добавьте источник данных на страницу. Чтобы использовать ограниченный объем данных, мы выбираем только первые пять записей в таблице «Поставщик» базы данных AdventureWorks. При использовании помощника Visual Studio для создания источника данных обратите внимание, что ошибка в текущей версии не предшествует имени таблицы (Vendor) с Purchasing. В следующей разметке показан правильный синтаксис:

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

Затем добавьте панель, которая выступает в качестве модального всплывающего окна:

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

Теперь HoverMenuExtender поступает в игру. Чтобы каждый элемент в источнике данных получит собственное всплывающее окно, расширитель должен быть размещен в <ItemTemplate> разделе Repeater. Ниже приводится пример разметки:

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

Теперь каждый элемент в источнике данных отображает всплывающее окно справа (PopupPosition атрибут) после задержки 50 миллисекунд (атрибутPopDelay).

наведение указателя мыши рядом с каждым элементом в элементе Repeater

Всплывающее меню отображается рядом с каждым элементом в элементе Repeater (щелкните, чтобы просмотреть изображение с полным размером).