반복기 컨트롤에 HoverMenu 사용(C#)Using HoverMenu with a Repeater Control (C#)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

AJAX 컨트롤 도구 키트의에 hovermenu 컨트롤은 간단한 팝업 효과를 제공 합니다. 마우스 포인터를 요소 위로 가져가면 지정 된 위치에 팝업이 나타납니다.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

AJAX 컨트롤 도구 키트의 HoverMenu 컨트롤은 간단한 팝업 효과를 제공 합니다. 마우스 포인터를 요소 위로 가져가면 지정 된 위치에 팝업이 나타납니다.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 설치 (express edition 포함)의 선택적 부분이 며 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 isplayLang = 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 isplayLang = 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 Express Edition 인스턴스가 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 및 Control Toolkit의 기능을 활성화 하려면 페이지의 아무 곳에 나 <form> 요소 내에 ScriptManager 컨트롤을 배치 해야 합니다.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 데이터베이스의 Vendor 테이블에서 처음 5 개 항목만 선택 합니다.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 assistant를 사용 하 여 데이터 소스를 만드는 경우 현재 버전의 버그는 테이블 이름 (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]" />

다음으로, 모달 popup으로 사용 되는 패널을 추가 합니다.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. 데이터 소스에 있는 모든 요소가 자체 팝업을 가져오기 위해 extender의 <ItemTemplate> 섹션 안에 extender를 넣어야 합니다.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>

이제 데이터 원본의 모든 항목에는 50 밀리초 (PopDelay 특성) 지연 후 오른쪽 (PopupPosition 특성)에 대 한 팝업이 표시 됩니다.Now every item in the data source displays a popup to the right (PopupPosition attribute) after a delay of 50 milliseconds (PopDelay attribute).

가리키기 메뉴 repeater의 각 항목 옆에 표시 됩니다.The 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)