■GridViewに編集機能を追加する (GridView04.aspx)

 

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

 

▼  GridViewに編集ボタンを表示する方法

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

 

図　GridViewから[編集]ボタンをクリックしてレコードを編集しているところ

 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

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

 

図　Customersテーブルから列を選択したら[詳細設定]ボタンをクリックする

 

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

 

図　「INSERT、UPDATE、およびDELETEステートメントの生成」をチェックする

 

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

 

図　CommandFiledプロパティのButtonTypeにButtonを設定

 

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

 

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

 

 

3. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにCustomersテーブルが表示されます。GridViewから[編集]ボタンをクリックすると、得意先、担当、電話、ファックスの列がテキストボックスに表示されて編集可能になります。得意先IDの列は、主キーのため自動的に編集不可になります。[更新]ボタンをクリックしてレコードを更新します。[キャンセル]ボタンをクリックすると編集したデータを無効にします。

 

図　GridViewから[編集]ボタンをクリックすると行が編集モードに切り替わる

 

 

◆解説

 

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

 

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

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

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

  UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @original_CustomerID">

　・・・

</asp:SqlDataSource>

 

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

 

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

  AllowPaging="True" AutoGenerateColumns="False"

  DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" ・・・>

  <Columns>

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

    <asp:BoundField DataField="CustomerID" HeaderText="ID"

      InsertVisible="False" ReadOnly="True"

      SortExpression="CustomerID" />

    <asp:BoundField DataField="CompanyName" HeaderText="得意先"

      SortExpression="CompanyName" />

    ・・・

  </Columns>

</asp:GridView>

 

[編集]ボタンをクリックすると、列の値がテキストボックスに表示された編集可能になります。[更新]ボタンをクリックすると、テキストボックスの値がUPDATEステートメントのパラメータ変数に代入されてデータベースが更新されます。パラメータ変数@CompanyName、@ContactName、@Phone、@Faxはフィールド名と対応します。

WHERE句に@original_CustomerIDのパラメータ変数が使用されていますが、この変数にはレコード更新前のCustomerIDが代入されます。

 

UPDATE [Customers]

SET [CompanyName] = @CompanyName,

    [ContactName] = @ContactName,

    [Phone] = @Phone,

    [Fax] = @Fax

WHERE [CustomerID] = @original_CustomerID">