Menggunakan HoverMenu dengan Repeater Control (VB)

oleh Christian Wenz

Unduh PDF

Kontrol HoverMenu di Toolkit Kontrol AJAX memberikan efek popup sederhana: Saat penunjuk mouse mengarah ke elemen, popup muncul pada posisi tertentu. Dimungkinkan juga untuk menggunakan kontrol ini dalam pengulang.

Gambaran Umum

HoverMenu Kontrol di Toolkit Kontrol AJAX memberikan efek popup sederhana: Saat penunjuk mouse mengarah ke elemen, popup muncul pada posisi yang ditentukan. Dimungkinkan juga untuk menggunakan kontrol ini dalam pengulang.

Langkah-langkah

Pertama-tama, sumber data diperlukan. Sampel ini menggunakan database AdventureWorks dan microsoft SQL Server 2005 Express Edition. Database adalah bagian opsional dari penginstalan Visual Studio (termasuk edisi ekspres) dan juga tersedia sebagai unduhan terpisah di bawah https://go.microsoft.com/fwlink/?LinkId=64064. Database AdventureWorks adalah bagian dari Sampel SQL Server 2005 dan Database Sampel (unduh di https://www.microsoft.com/download/details.aspx?id=10679). Cara termudah untuk mengatur database adalah dengan menggunakan Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) dan melampirkan AdventureWorks.mdf file database.

Untuk sampel ini, kami berasumsi bahwa instans SQL Server 2005 Express Edition dipanggil SQLEXPRESS dan berada di komputer yang sama dengan server web; ini juga merupakan pengaturan default. Jika penyetelan Anda berbeda, Anda harus menyesuaikan informasi koneksi untuk database.

Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager kontrol harus diletakkan di mana saja di halaman (tetapi dalam <form> elemen ):

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

Kemudian, tambahkan sumber data ke halaman. Untuk menggunakan data dalam jumlah terbatas, kami hanya memilih lima entri pertama dalam tabel Vendor database AdventureWorks. Jika Anda menggunakan Visual Studio asisten untuk membuat sumber data, ingatlah bahwa bug dalam versi saat ini tidak mengawali nama tabel (Vendor) dengan Purchasing. Markup berikut menunjukkan sintaks yang benar:

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

Selanjutnya, tambahkan panel yang berfungsi sebagai popup modal:

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

Sekarang, datang HoverMenuExtender ke bermain. Sehingga setiap elemen dalam sumber data mendapatkan popupnya sendiri, extender harus dimasukkan ke dalam bagian repeater <ItemTemplate> . Berikut markupnya:

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

Sekarang setiap item dalam sumber data menampilkan popup di sebelah kanan (PopupPosition atribut) setelah penundaan 50 milidetik (PopDelay atribut).

Menu hover muncul di samping setiap item di repeater (Klik untuk melihat gambar ukuran penuh)

Sebelumnya