.NET TIPS

［ASP.NET］DataGridコントロールの削除ボタンで確認メッセージを表示するには？

デジタルアドバンテージ
2003/12/26

　「TIPS：［ASP.NET］DataGridコントロールに削除ボタンを追加するには？」では、ボタン列として削除ボタンを表示する方法について解説した。削除ボタンに行（およびその行に関連したデータソースのデータ）を完全に削除するような処理を実装する場合には、操作ミスによるクリックを防ぐために何らかの対策を講じておくのが一般的である。ここでは、削除ボタンがクリックされたときに本当に削除してよいのかを問い合わせるメッセージ・ボックスを表示する方法について解説する。

　削除ボタンがクリックされたときにメッセージ・ボックスを表示するサンプル・プログラムの実行画面は次のようなる。ここで［キャンセル］ボタンをクリックすれば、削除ボタンのクリックは取り消されることになる。

削除ボタンがクリックされたときに確認用のメッセージ・ボックスを表示するサンプル・プログラム（confirmdg.aspx）

　Buttonコントロールがクリックされた場合に、このような確認メッセージを表示する方法については、「TIPS：ASP.NETでボタンのクリック時に確認メッセージを表示するには？」ですでに解説している。そこで示した方法は、次のようにButtonコントロールのAttributesプロパティでメッセージ・ボックスを表示するためのJavaScriptを追加するものだった。

Button1.Attributes["onclick"] = "return confirm('本当に移動しますか？');";

　今回では、データ連結後に生成されたグリッド上のButtonコントロールに対して同様の処理を行えばよい。データ連結後に行にアクセスする方法については、「TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？」で解説しているように、ItemDataBoundイベントを利用するのが一般的である。

　今回の場合におけるItemDataBoundイベントのイベント・ハンドラは次のような内容になる。

void MyGrid_Bound(object sender, DataGridItemEventArgs e) {
  if (e.Item.ItemType == ListItemType.Item
      || e.Item.ItemType == ListItemType.AlternatingItem) {
    Button button = (Button)e.Item.Cells[3].Controls[0];
    button.Attributes["onclick"]
            = "return confirm('本当に削除しますか？');";
  }
}

　このコードは、左から4番目の列に削除ボタンを表示しているボタン列がある場合のものである（Cellsプロパティのインデックス番号は0から始まる）。

確認メッセージ付き削除ボタンを使用したサンプル・プログラム

　「TIPS：［ASP.NET］DataGridコントロールに削除ボタンを追加するには？」で示しているサンプル・プログラムに、上記のイベント・ハンドラを追加したコードは次のようになる。

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    public class Products {
      private static DataTable _dt;

      public static DataTable Table {
        get { return _dt; }
        set { _dt = value; }
      }

      public static DataTable CreateTable() {
        // データテーブルの作成
        _dt = new DataTable();
        _dt.Columns.Add(new DataColumn("ID", typeof(int)));
        _dt.Columns.Add(new DataColumn("Name", typeof(string)));
        _dt.Columns.Add(new DataColumn("Quantity", typeof(int)));

        // idカラムは自動設定
        _dt.Columns["ID"].AutoIncrement = true;
        _dt.Columns["ID"].AutoIncrementSeed = 1000;

        // 初期データの登録
        Insert("リンゴ", 5);
        Insert("みかん", 10);
        Insert("さくらんぼ", 3);
        Insert("バナナ", 20);

        return _dt;
      }

      public static void Insert(string name, int num) {
        DataRow dr = _dt.NewRow();
        dr["Name"] = name;
        dr["Quantity"] = num;
        _dt.Rows.Add(dr);
      }

      public static void Delete(int id) {
        DataRow dr = _dt.Select("id = " + id)[0];
        dr.Delete();
      }
    }

    void BindMyGrid() {
      MyGrid.DataSource = Products.Table;
      MyGrid.DataBind();
    }

    void Page_Load(object sender, EventArgs e) {
      if (!IsPostBack) {
        Session["userTable"] = Products.CreateTable();
        BindMyGrid();
      } else {
        Products.Table = (DataTable)Session["userTable"];
      }
    }

    void MyGrid_Delete(object sender, DataGridCommandEventArgs e) {
      int id = (int)MyGrid.DataKeys[e.Item.ItemIndex];
      Products.Delete(id);
      BindMyGrid();
    }

    void MyGrid_Bound(object sender, DataGridItemEventArgs e) {
      if (e.Item.ItemType == ListItemType.Item
       || e.Item.ItemType == ListItemType.AlternatingItem) {

        Button button = (Button)e.Item.Cells[3].Controls[0];
        button.Attributes["onclick"]
            = "return confirm('本当に削除しますか？');";
      }
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        OnDeleteCommand="MyGrid_Delete"
        OnItemDataBound="MyGrid_Bound"
        DataKeyField="ID"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#5522BB" ForeColor="white" />
      <ItemStyle   BackColor="#EEEEFF" />
      <AlternatingItemStyle BackColor="#DDDDFF" />

      <Columns>
        <asp:BoundColumn
            HeaderStyle-Width="80"
            ReadOnly="true"
            DataField="ID" HeaderText="ID" />
        <asp:BoundColumn
            HeaderStyle-Width="200"
            DataField="Name" HeaderText="商品名" />
        <asp:BoundColumn
            HeaderStyle-Width="100"
            DataField="Quantity" HeaderText="数量" />

        <asp:ButtonColumn
            Text="削除"
            CommandName="delete"
            ButtonType="PushButton"
            HeaderText="ボタン" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
確認メッセージ付き削除ボタンを使用したC#のサンプル・プログラム（confirmdg.aspx）

　なお、このプログラムをIEから呼び出してHTMLのソースを表示すれば分かるが、当然ながらすべての行にメッセージ・ボックスを表示するためのスクリプトが含まれることになる。表示するメッセージが長くて転送されるデータ量が気になる場合には、確認メッセージを表示するスクリプトをJavaScriptの関数としてまとめ、それを呼び出すコードをButtonコントロールのAttributesプロパティに追加するようにすればよいだろう。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：ButtonColumn要素
関連TIPS：［ASP.NET］DataGridコントロールに削除ボタンを追加するには？
関連TIPS：ASP.NETでボタンのクリック時に確認メッセージを表示するには？
関連TIPS：［ASP.NET］DataGridコントロールですべての行にアクセスするには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールに削除ボタンを追加するには？
［ASP.NET］DataGridコントロールの列にボタンを表示するには？
ASP.NETでボタンのクリック時に確認メッセージを表示するには？
［ASP.NET］DataGridコントロールに選択ボタンを追加するには？
DataGridViewコントロールで行の削除時に確認を行うには？
［ASP.NET］DataGridコントロールで編集を可能にするには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT