.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コントロールの列にボタンを表示するには？
DataGridViewコントロールで行の削除時に確認を行うには？
ASP.NETでボタンのクリック時に確認メッセージを表示するには？
［ASP.NET］DataGridコントロールに選択ボタンを追加するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH