Repeater コントロールで HoverMenu を使用する (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX コントロール ツールキットの HoverMenu コントロールは、単純なポップアップ効果を提供します。マウス ポインターを要素の上に置くと、指定した位置にポップアップが表示されます。 リピータ内でこのコントロールを使用することもできます。

概要

AJAX Control Toolkit のコントロールは HoverMenu 、単純なポップアップ効果を提供します。マウス ポインターが要素の上に移動すると、指定した位置にポップアップが表示されます。 リピータ内でこのコントロールを使用することもできます。

手順

まず、データ ソースが必要です。 このサンプルでは、AdventureWorks データベースと Microsoft SQL Server 2005 Express Editionを使用します。 データベースは、Visual Studio のインストール (Express Edition を含む) のオプションの部分であり、 の下 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され、Web サーバーと同じコンピューター上に存在することを前提としています。これは既定のセットアップでもあります。 セットアップが異なる場合は、データベースの接続情報を調整する必要があります。

ASP.NET AJAX と Control Toolkit の機能をアクティブにするには、コントロールを ScriptManager ページ上の任意の場所 (ただし、 要素内) に配置する <form> 必要があります。

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

次に、ページにデータ ソースを追加します。 限られた量のデータを使用するために、AdventureWorks データベースの Vendor テーブルの最初の 5 つのエントリのみを選択します。 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>

これで、データ ソース内のすべての項目に、50 ミリ秒PopDelay ( 属性) の遅延後に右 (PopupPosition 属性) にポップアップが表示されるようになりました。

リピータの各項目の横にホバー メニューが表示されます (フルサイズの画像を表示するにはクリックします)

次へ