Repeater Denetimiyle HoverMenu Kullanma (C#)Using HoverMenu with a Repeater Control (C#)

Hristia WENZ tarafındanby Christian Wenz

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

AJAX denetim araç setinde HoverMenu denetimi basit bir açılan efekt sağlar: fare işaretçisi bir öğenin üzerine geldiğinde, belirtilen konumda bir açılan pencere görüntülenir.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. Bu denetimi bir yineleyici içinde kullanmak da mümkündür.It is also possible to use this control within a repeater.

Genel bakışOverview

AJAX denetim araç setinde HoverMenu denetimi basit bir açılan efekti sağlar: fare işaretçisi bir öğenin üzerine geldiğinde, belirtilen konumda bir açılan pencere görüntülenir.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. Bu denetimi bir yineleyici içinde kullanmak da mümkündür.It is also possible to use this control within a repeater.

AdımlarSteps

Birincisi, bir veri kaynağı gereklidir.First of all, a data source is required. Bu örnek, AdventureWorks veritabanını ve Microsoft SQL Server 2005 Express sürümünü kullanır.This sample uses the AdventureWorks database and the Microsoft SQL Server 2005 Express Edition. Veritabanı, Visual Studio yüklemesinin (Express Edition dahil) isteğe bağlı bir parçasıdır ve https://go.microsoft.com/fwlink/?LinkId=64064altında ayrı bir indirme olarak da kullanılabilir.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 veritabanı SQL Server 2005 örnek ve örnek veritabanlarının bir parçasıdır ( https://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&D ısplaylang = 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). Veritabanını ayarlamanın en kolay yolu, Microsoft SQL Server Management Studio Express (https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&D isplayLang = en) kullanmaktır ve AdventureWorks.mdf veritabanı dosyasını eklemektir.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.

Bu örnek için, SQL Server 2005 Express Sürüm örneğinin SQLEXPRESS ve Web sunucusuyla aynı makinede yer aldığı varsayılmaktadır; Bu, aynı zamanda varsayılan kurulumdır.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. Kurulumlarınız farklıysa, veritabanının bağlantı bilgilerini uyarlamanız gerekir.If your setup differs, you have to adapt the connection information for the database.

ASP.NET AJAX ve Denetim araç seti işlevlerini etkinleştirmek için, ScriptManager denetimi sayfada herhangi bir yere yerleştirmeli (ancak <form> öğesi içinde):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" />

Ardından, sayfaya bir veri kaynağı ekleyin.Then, add a data source to the page. Sınırlı miktarda veri kullanmak için, AdventureWorks veritabanının satıcı tablosunda yalnızca ilk beş girişi seçersiniz.In order to use a limited amount of data, we only select the first five entries in the Vendor table of the AdventureWorks database. Veri kaynağını oluşturmak için Visual Studio Yardımcısı 'nı kullanıyorsanız, geçerli sürümdeki bir hatanın Purchasingtablo adını (Vendor) ön eki olmadığını unutmayın.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. Aşağıdaki biçimlendirme doğru söz dizimini göstermektedir: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]" />

Ardından, kalıcı açılan pencere olarak hizmet veren bir panel ekleyin:Next, add a panel which serves as the modal popup:

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

Artık HoverMenuExtender Play 'e geliyor.Now, the HoverMenuExtender comes into play. Böylece veri kaynağındaki her öğe kendi açılan penceresini alır. Bu, Extender 'ın <ItemTemplate> bölümü içine alınmalıdır.So that every element in the data source gets its own popup, the extender must be put within the repeater's <ItemTemplate> section. Biçimlendirme şu şekildedir: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>

Artık veri kaynağındaki her öğe, 50 milisaniyelik (PopDelay özniteliği) gecikmeden sonra sağ tarafta (PopupPosition özniteliği) bir açılan pencere görüntüler.Now every item in the data source displays a popup to the right (PopupPosition attribute) after a delay of 50 milliseconds (PopDelay attribute).

Repeater 'daki her öğenin yanında bulunan vurgulu menü görüntülenirThe hover menu appears next to each item in the repeater

Yineleyici menü, Repeater 'daki her öğenin yanında görünür (tam boyutlu görüntüyü görüntülemek Için tıklayın)The hover menu appears next to each item in the repeater (Click to view full-size image)