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

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

Скачать код или скачать PDFDownload Code or Download PDF

Элемент управления HoverMenu в наборе AJAX Control Toolkit предоставляет простой всплывающий экран: при наведении указателя мыши на элемент в указанной позиции появляется всплывающее окно.The HoverMenu control in the AJAX Control Toolkit provides a simple popup effect: When the mouse pointer hovers over an element, a popup appears at a specified position. Этот элемент управления также можно использовать в элементе Repeater.It is also possible to use this control within a repeater.

ОбзорOverview

Элемент управления HoverMenu в наборе средств AJAX Control Toolkit предоставляет простой всплывающий экран: при наведении указателя мыши на элемент в заданной позиции появляется всплывающее окно.The HoverMenu control in the AJAX Control Toolkit provides a simple popup effect: When the mouse pointer hovers over an element, a popup appears at a specified position. Этот элемент управления также можно использовать в элементе Repeater.It is also possible to use this control within a repeater.

ШагиSteps

Во-первых, требуется источник данных.First of all, a data source is required. В этом примере используется база данных AdventureWorks и Microsoft SQL Server 2005 Express Edition.This sample uses the AdventureWorks database and the Microsoft SQL Server 2005 Express Edition. База данных является необязательной частью установки Visual Studio (включая экспресс-выпуск) и доступна как отдельная загрузка в разделе https://go.microsoft.com/fwlink/?LinkId=64064.The database is an optional part of a Visual Studio installation (including express edition) and is also available as a separate download under 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).The AdventureWorks database is part of the SQL Server 2005 Samples and Sample Databases (download at https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&DisplayLang=en). Самый простой способ настроить базу данных — использовать Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D исплайланг = EN) и присоединить файл базы данных AdventureWorks.mdf.The easiest way to set the database up is to use the Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en) and attach the AdventureWorks.mdf database file.

В этом примере предполагается, что экземпляр SQL Server 2005, экспресс-выпуск называется SQLEXPRESS и находится на том же компьютере, что и веб-сервер. Это также настройка по умолчанию.For this sample, we assume that the instance of the SQL Server 2005 Express Edition is called SQLEXPRESS and resides on the same machine as the web server; this is also the default setup. Если настройка отличается, необходимо адаптировать сведения о соединении для базы данных.If your setup differs, you have to adapt the connection information for the database.

Чтобы активировать функциональные возможности ASP.NET AJAX и набора элементов управления, элемент управления ScriptManager должен быть размещен в любом месте страницы (но в элементе <form>):In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

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

Затем добавьте источник данных на страницу.Then, add a data source to the page. Чтобы использовать ограниченный объем данных, мы выбираем только первые пять записей в таблице «Поставщик» базы данных AdventureWorks.In order to use a limited amount of data, we only select the first five entries in the Vendor table of the AdventureWorks database. При использовании помощника Visual Studio для создания источника данных обратите внимание, что ошибка в текущей версии не предшествует имени таблицы (Vendor) с Purchasing.If you are using the Visual Studio assistant to create the data source, mind that a bug in the current version does not prefix the table name (Vendor) with Purchasing. В следующей разметке показан правильный синтаксис:The following markup shows the correct syntax:

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

Затем добавьте панель, которая выступает в качестве модального всплывающего окна:Next, add a panel which serves as the modal popup:

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

Теперь HoverMenuExtender поступает в игру.Now, the HoverMenuExtender comes into play. Чтобы каждый элемент в источнике данных получит собственное всплывающее окно, расширитель должен быть размещен в <ItemTemplate> разделе Repeater.So that every element in the data source gets its own popup, the extender must be put within the repeater's <ItemTemplate> section. Ниже приводится пример разметки:Here is the markup:

<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).Now every item in the data source displays a popup to the right (PopupPosition attribute) after a delay of 50 milliseconds (PopDelay attribute).

наведение указателя мыши рядом с каждым элементом в элементе RepeaterThe hover menu appears next to each item in the repeater

Всплывающее меню отображается рядом с каждым элементом в элементе Repeater (щелкните, чтобы просмотреть изображение с полным размером).The hover menu appears next to each item in the repeater (Click to view full-size image)