.NET TIPS

［ASP.NET］DataGridコントロールに削除ボタンを追加するには？

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

　ASP.NETのDataGridコントロールには、グリッドから行を削除する場合に使用する「削除ボタン」を実装するための仕組みが用意されている。次の画面は、今回作成する削除ボタンを利用したサンプル・プログラムの実行画面である。削除ボタンをクリックすることにより、そのボタンの行がグリッドから削除される。

削除ボタンを使用したサンプル・プログラム（deletedg.aspx）の実行画面

　削除ボタンは、「［ASP.NET］DataGridコントロールの列にボタンを表示するには？」で解説しているボタン列のボタンの1つのバリエーションである。ボタン列のボタンを削除ボタンとして機能させるためには、ボタン列を定義している<asp:ButtonColumn>要素のCommandName属性で「delete」を指定すればよい。

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

　このようにして定義した削除ボタンでは、それがクリックされた場合に<asp:DataGrid>タグのOnDeleteCommand属性で指定したメソッドがDeleteCommandイベントのイベント・ハンドラとして呼び出される。削除ボタンとはいうものの、CommandName属性で「delete」を指定した場合の特別な機能はこれだけである。

　ちなみに、「［ASP.NET］DataGridコントロールに選択ボタンを追加するには？」では、CommandName属性に「select」を指定して作成する「選択ボタン」について解説している。

削除ボタンを使用したサンプル・プログラム

　削除ボタンを使用したサンプル・プログラムのソース・コードは次のようになっている。このプログラムは、「［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();
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        OnDeleteCommand="MyGrid_Delete"
        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#のサンプル・プログラム（deletedg.aspx）

　削除ボタンがクリックされた場合に呼び出されるMyGrid_Deleteメソッドでは、まずDataGridオブジェクトのDataKeysプロパティによりキー値であるIDを取得し、次にProductsクラスのDeleteメソッドを呼び出して、そのIDを持ったデータテーブル内の行を探し出して削除している。

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

　クリックされた削除ボタンの行（DataGridItemオブジェクト）は、このメソッドではe.Itemにより取得できる。

　なお、「［ASP.NET］DataGridコントロールの削除ボタンで確認メッセージを表示するには？」では、削除ボタンがクリックされた場合に確認のためのメッセージ・ボックスを表示する方法について紹介している。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール
使用ライブラリ：ButtonColumn要素
関連TIPS：［ASP.NET］DataGridコントロールの列にボタンを表示するには？
関連TIPS：［ASP.NET］DataGridコントロールに選択ボタンを追加するには？
関連TIPS：［ASP.NET］DataGridコントロールで編集を可能にするには？
関連TIPS：［ASP.NET］DataGridコントロールの削除ボタンで確認メッセージを表示するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールの列にボタンを表示するには？
［ASP.NET］DataGridコントロールの削除ボタンで確認メッセージを表示するには？
［ASP.NET］DataGridコントロールで編集を可能にするには？
［ASP.NET］DataGridコントロールに選択ボタンを追加するには？
［ASP.NET］GridViewコントロールの削除ボタンで確認メッセージを表示するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム 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