ASP.NET GridViewのホームへ戻る

GridViewから行を削除するとき確認のメッセージを表示する (GridView05StepUp1.aspx)

 

GridViewから[削除]ボタンをクリックしたとき、確認のメッセージを表示するサンプルを作成します。このサンプルは、以下のノウハウを習得することができます。

 

  GridViewTemplateFieldを追加する方法

  Buttonコントロールにクライアント側で動作するイベントを登録する方法(OnClientClick)

  JavaScriptで問い合わせのメッセージを表示する方法

 

図 [削除]ボタンをクリックすると「削除してよろしいですか?」のメッセージが表示される

 

1. 新規Webページ作成

 

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView05StepUp1.aspx」を作成します。

 

 

2. コントロール作成

 

GridView05.aspxのデザイナからGridView1SqlDataSource1のオブジェクトをコピーしたら、GridView05StepUp1.aspxのデザイナに貼り付けします。デザイナにGridView1SqlDataSource1のオブジェクトが作成されます。「GridViewタスク」メニューから[列の編集]をクリックします。「フィールド」が表示されたら、「選択されたフィールド」から[削除]を選択したら、「このフィールドをTemplateFieldに変換します」をクリックします。[削除]ボタンがTemplateFieldに代わったら[OK]をクリックして閉じます。

 

図 [削除]ボタンをテンプレート列(TemplateField)に変換する

 

デザイナの最下位から[ソース]をクリックしてソースビューに切り替えます。GridViewTemplateField<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のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewCustomersテーブルが表示されます。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>

 

ASP.NET GridViewのホームへ戻る