Repeater で ConfirmButton を使用する (VB)
作成者: Christian Wenz
AJAX Control Toolkit の ConfirmButton エクステンダーを使用して、ユーザーがボタン (LinkButton コントロールを含む) をクリックしたときの [はい]/[いいえ] ポップアップを作成します。 [はい] をクリックした場合にのみ、ボタンのアクションが実行され、それ以外の場合は取り消されます。 これは、リピータでも可能です。
概要
AJAX Control Toolkit の ConfirmButton エクステンダーを使用して、ユーザーがボタン (LinkButton コントロールを含む) をクリックしたときの [はい]/[いいえ] ポップアップを作成します。 [はい] をクリックした場合にのみ、ボタンのアクションが実行され、それ以外の場合は取り消されます。 これは、リピータでも可能です。
手順
まず第一に、データ ソースが必要です。 このサンプルでは、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 の Vendors テーブルの最初の 5 つのエントリのみが取得されます。 Visual Studio ウィザードを使用してデータ ソースを作成する場合、現在、テーブル名 (Vendors
) にはプレフィックス 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]" />
これで、このデータ ソースをリピータ内で使用できます。 通常どおり、DataBinder.Eval()
メソッドでは、そのデータ ソースからデータを取得します。 次に、ConfirmButtonExtender
コントロールをリピータの <ItemTemplate>
セクション内に配置して、それがデータ ソース内のすべてのエントリに表示されるようにします。
<div>
<ul>
<asp:Repeater ID="rep1" DataSourceID="sds1" runat="server">
<ItemTemplate>
<li>
<%#DataBinder.Eval(Container.DataItem, "Name")%>
<asp:LinkButton ID="btn1" Text="Remove Item" runat="server" />
<ajaxToolkit:ConfirmButtonExtender ID="cfe1" runat="server" TargetControlID="btn1" ConfirmText="Are you sure?!" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
データ ソースの各エントリの横に確認ボタンが表示されます (クリックするとフルサイズの画像が表示されます)