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

Кристиан Венц

Скачать в формате PDF

Элемент управления HoverMenu из набора элементов управления AJAX обеспечивает простой эффект появления всплывающего окна: когда указатель мыши наводит на элемент, всплывающее окно отображается в заданном месте. Этот элемент управления также можно использовать в повторителе.

Обзор

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

Шаги

Во-первых, требуется источник данных. В этом примере используется база данных AdventureWorks и Microsoft SQL Server 2005 Express Edition. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск), а также доступна как отдельная загрузка в разделе https://go.microsoft.com/fwlink/?LinkId=64064. База данных AdventureWorks входит в состав примеров и образцов баз данных SQL Server 2005 (скачать по адресу https://www.microsoft.com/download/details.aspx?id=10679). Самый простой способ настроить базу данных — использовать Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) и подключить AdventureWorks.mdf файл базы данных.

В этом примере предполагается, что экземпляр SQL Server 2005 Express Edition вызывается 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>. Ниже приведена разметка:

<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 атрибут).

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