■GridViewから行を削除するとき確認のメッセージを表示する (GridView05StepUp1.aspx)
GridViewから[削除]ボタンをクリックしたとき、確認のメッセージを表示するサンプルを作成します。このサンプルは、以下のノウハウを習得することができます。
▼ GridViewにTemplateFieldを追加する方法
▼ Buttonコントロールにクライアント側で動作するイベントを登録する方法(OnClientClick)
▼ JavaScriptで問い合わせのメッセージを表示する方法
図 [削除]ボタンをクリックすると「削除してよろしいですか？」のメッセージが表示される
1. 新規Webページ作成
ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView05StepUp1.aspx」を作成します。
2. コントロール作成
GridView05.aspxのデザイナからGridView1とSqlDataSource1のオブジェクトをコピーしたら、GridView05StepUp1.aspxのデザイナに貼り付けします。デザイナにGridView1とSqlDataSource1のオブジェクトが作成されます。「GridViewタスク」メニューから[列の編集]をクリックします。「フィールド」が表示されたら、「選択されたフィールド」から[削除]を選択したら、「このフィールドをTemplateFieldに変換します」をクリックします。[削除]ボタンがTemplateFieldに代わったら[OK]をクリックして閉じます。
図 [削除]ボタンをテンプレート列(TemplateField)に変換する
デザイナの最下位から[ソース]をクリックしてソースビューに切り替えます。GridViewのTemplateFieldの<ItemTemplate>…</ItemTempalte>の間に表示されているButtonコントロールにクライアント側で動作するクリック時のイベント(OnClientClick)を追加します。
<ItemTemplate>
<asp:Button ID="Button1" runat="server"
CausesValidation="False"
CommandName="Delete"
OnClientClick="return
confirm('削除してよろしいですか？');"
Text="削除" />
</ItemTemplate>
図 ButtonコントロールにOnClientClickイベントを追加する
3. ブラウザに表示
VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。GridViewから[削除]ボタンをクリックすると「削除してよろしいですか？」の確認メッセージが表示されます。[OK]をクリックすると、Customersテーブルからレコードが削除されます。[キャンセル]をクリックすると削除処理がキャンセルされます。
図 [削除]ボタンをクリックすると確認のメッセージが表示される
◆解説
GridViewから[削除]ボタンをクリックしたとき、確認メッセージを表示するにはCommandField列をTempalteField列に変換します。ボタン列をテンプレート列に変換すると<ItemTemplate>…</ItemTemplate>にButtonコントロールが生成されます。
Note
|
Buttonコントロールを削除ボタンとして認識させるには Buttonコントロールを削除ボタンとして認識させるには、CommandNameプロパティに「Delete」を設定する必要があります。Textプロパティには任意の文字列（例：削除、削除します）が設定できます。 |
[削除]ボタンをクリックしたときに確認メッセージを表示するには、Buttonにクライアント側で動作するクリック時のイベント(OnClientClick)を追加します。OnClientClickの引数には、JavaScriptを指定します。JavaScriptから確認メッセージを表示するには、confirm関数を使用します。Confirm関数からの戻り値(True/False)は、returnステートメントで返します。OnClientClickから「return true」で戻ると削除処理が実行され、「return false」で戻ると削除処理がキャンセルされます。
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:Button ID="Button1" runat="server"
CommandName="Delete"
OnClientClick="return confirm('削除してよろしいですか？');"
Text="削除" />
</ItemTemplate>
</asp:TemplateField>