.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クラス(System.Web.UI.WebControls名前空間)
関連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コントロールで編集を可能にするには?
DataGridViewコントロールで行の削除時に確認を行うには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH