■GridViewに削除機能を追加する (GridView05.aspx)

 

GridViewにSQL Serverのテーブルを表示してレコードを削除するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

▼  GridViewに削除ボタンを表示する方法

▼  SqlDataSourceにレコードを削除するSQLステートメントを格納する方法

 

 

GridViewから得意先ID(55)の[削除]ボタンをクリック

 

GridViewから得意先ID(55)が削除された

 

図　GridViewからレコードを削除 　

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

デザイナにGridView05.aspxが表示されたら、ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されます。「GridViewタスク」メニューから[オートフォーマット]を選択したら、「オートフォーマット」ダイアログの「スキームの選択」から[砂と空]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択して、データソースの構成ウィザードを起動します。App_Dataフォルダに格納されているNwindSQL.mdfを接続してウィザードを続行します。「Selectステートメントの構成」が表示されたらCustomersテーブルからCustomerID、ComanyName、ContactName、Phone、Fax列を選択します。右側から[詳細設定]のボタンをクリックします。

 

「SQL生成の詳細オプション」が表示されたら、「INSERT、UPDATE、およびDELETEステートメントの生成」をチェックして[OK]をクリックします。

 

 

「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。デザイナの「GridViewタスク」メニューから「ページングを有効にする」と「削除を有効にする」をチェックします。「GridViewタスク」メニューから[列の編集]を選択します。「フィールド」ダイアログが表示されたら、「選択されたフィールド」から[削除]を選択して、CommandFieldプロパティからButtonTypeプロパティに[Button]を設定します。BoundFieldプロパティのHeaderTextを日本語に書き換えたら[OK]をクリックして閉じます。

 

 

図　[削除]ボタンのButtonTypeプロパティに「Button」を設定

 

デザイナのGridViewに[削除]ボタンが表示されます。

 

図　デザイナのGridViewに[削除]ボタンが表示された

 

3. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。GridViewから得意先ID(53)の[削除]ボタンをクリックしてCustomersテーブルからレコードが削除されます。GridViewにはCustomersテーブルが再表示されます。

 

 

図　GridViewから[削除]ボタンをクリックしてレコードを削除

 

 

◆解説

 

GridViewに削除機能を追加するには、データソース構成ウィザードの「Selectステートメントの構成」が表示されたとき、[詳細設定]ボタンをクリックしてINSERT、UPDATE、DELETE用のステートメントを追加します。ウィザードで追加したSQLステートメントは、SqlDataSourceのDeleteCommandプロパティに格納されます。

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

  ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"

  DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @original_CustomerID"

  SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Phone], [Fax] FROM [Customers]"

  ・・・>

</asp:SqlDataSource>

 

SqlDataSourceにINSERT、UPDATE、DELETEのステートメントが追加されると、「GridViewタスク」メニューに「削除を有効にする」が表示されますのでチェックボックスをクリックしてチェックマークを付けます。これでGridViewに[削除]ボタンが追加されます。

 

<asp:GridView ID="GridView1" runat="server"

  AllowPaging="True" AutoGenerateColumns="False" ・・・>

  ・・・

  <Columns>

    <asp:CommandField ButtonType="Button" ShowDeleteButton="True" />

    <asp:BoundField DataField="CustomerID"

      HeaderText="ID" InsertVisible="False" ReadOnly="True"

      SortExpression="CustomerID" />

　　・・・

  </Columns>

  ・・・

</asp:GridView>

 

[削除]ボタンをクリックすると、SqlDataSourceのDeleteCommandプロパティに格納されているDETELEステートメントが実行されてCustoemrsテーブルからレコードが削除されます。WHERE句のパラメータ変数@original_CustomerIDには、レコード削除前の得意先IDが代入されます。

 

DELETE FROM [Customers]

WHERE [CustomerID] = @original_CustomerID