■DetailsViewにレコードを編集する機能を追加する　(DetailsView03.aspx)

 

DetailsViewからレコードを編集するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

▼  DetailsViewにレコードを編集するボタンを表示する方法

▼  レコードが正常に更新されたか調べる方法

▼  レコードの更新処理でエラーが発生したときにエラーメッセージを表示して処理を続行する方法

▼  編集したレコードをGridViewに表示する方法

 

 

DetailsViewから[編集]ボタンをクリックする

 

レコードを編集から[更新]ボタンをクリックしてデータベースに書き込む

 

図DetailsViewにレコードの編集機能を付加

 

 

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

デザイナにDetailsView03.aspxが表示されたら、[DetailsView02.aspx]のタブをクリックして切り替えます。[Ctrl]+[A]を押してDetailsView02.apsxのすべてのコントロールを選択したら、右クリックから[コピー]を選択します。デザイナから[DetailsView03.aspx]のタブをクリックして切り替えたら、右クリックから[貼り付け]を選択します。デザイナにDropDownList1、GridView1、DetailsView1、lblResultのオブジェクトが作成されます。

 

「DetailsViewタスク」メニューから「編集を有効にする」をチェックして、DetailsViewに[編集]ボタンを表示します。

 

 

図　DetailsViewに[編集]ボタンを表示する

 

3. イベントハンドラ追加

 

 

デザイナの右クリックから[コードの表示]を選択します。コードビューが表示されたら、「(全般)」と「(宣言)」のドロップダウンリストから[DetailsView1]、[ItemUpdated]を選択します。DetailsView1_ItemUpdatedイベントハンドラが作成されたら、次のコードを追加します。

 

Protected Sub DetailsView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewUpdatedEventArgs) Handles DetailsView1.ItemUpdated

  If Not IsNothing(e.Exception) Then

    lblResult.Text = String.Format("レコード更新中に次のエラー発生！<br />{0}", _

      e.Exception.Message)

    e.ExceptionHandled = True

  End If

  GridView1.DataBind()

End Sub

 

 

4. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、DropDownListにCategoriesテーブル、GridViewにProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックするとDetailsViewに選択した商品の詳細が表示されます。DetailsViewから[編集]ボタンをクリックするとテキストボックスに商品、区分ID、単位、単価が表示されますのでデータを編集したら、[更新]ボタンをクリックします。不正なデータを入力したときはラベルにエラーメッセージが表示されます。

 

 

図　DetailsViewから[編集]ボタンをクリックして編集モードに切り替えたところ

 

 

◆解説

 

DetailsViewに[編集]ボタンを表示するには、SqlDataSourceを作成するときに、UPDATEステートメントを生成します。デザイナから「DetailsViewタスク」メニューを表示すると「編集を有効にする」チェックボックスが表示されますのでチェックマークを付けると、DetailsViewに[編集]ボタンが表示されます。

 

<asp:DetailsView ID="DetailsView1" runat="server"

  AutoGenerateRows="False" CellPadding="4" DataSourceID="SqlDataSource3"・・・>

  <Fields>

    ・・・

    <asp:CommandField ButtonType="Button"

      ShowInsertButton="True" ShowEditButton="True" />

  </Fields>

</asp:DetailsView>

 

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

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

  UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice WHERE [ProductID] = @original_ProductID">

  <UpdateParameters>

    <asp:Parameter Name="ProductName" Type="String" />

    <asp:Parameter Name="CategoryID" Type="Int32" />

    <asp:Parameter Name="QuantityPerUnit" Type="String" />

    <asp:Parameter Name="UnitPrice" Type="Decimal" />

    <asp:Parameter Name="original_ProductID" Type="Int32" />

  </UpdateParameters>

</asp:SqlDataSource>

 

レコードの更新が正常に処理されたかどうか調べるには、DetailsViewにItemUpdatedイベントハンドラを追加します。このイベントハンドラでは、DetailsViewInsertEventArgsオブジェクトのExceptionプロパティをチェックします。Exceptionに例外エラー情報が格納されているときは、Messageプロパティの内容をLabelのTextプロパティに設定して例外エラー情報を表示します。例外エラーが発生しても処理を続行するには、ExceptionHandledプロパティに「True」を設定します。ExceptionHandeldに「False」を設定したときは、ASP.NETのエラーメッセージが表示されて処理が中断します。

 

レコードの更新処理が正常に終了したときは、GridViewのDataBindメソッドを実行して更新したレコードをGridViewに表示します。

 

Protected Sub DetailsView1_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewUpdatedEventArgs) Handles DetailsView1.ItemUpdated

  If Not IsNothing(e.Exception) Then

    lblResult.Text = String.Format("レコード更新中に次のエラー発生！<br />{0}", _

      e.Exception.Message)

    e.ExceptionHandled = True

  End If

  GridView1.DataBind()

End Sub

 

 

Tip

DetailsViewに区分IDの代わりに区分名(DropDownList)を表示するには (DetailsView03Tip1.apsx)   DetailsViewの区分ID列を区分名に変えるには、FoundFieldをTemplateFieldに変換します。TempalteFieldの<ItemTemplate>..</ItemTemplate>と<EditItemTemlate>…</EditItemTemplate>にはDropDownListを追加します。ItemTemplateのDropDownListには、「Enabled=false」を追加してアイテムを選択できないようにします。   DropDownListと連動させるSqlDataSourceは共有しないで新規に作成します。   <asp:DetailsView ID="DetailsView1" runat="server"   AutoGenerateRows="False" DataSourceID="SqlDataSource3"・・・>   <Fields>     ・・・     <asp:TemplateField HeaderText="区分名" SortExpression="CategoryID">       <ItemTemplate>         <asp:DropDownList ID="DropDownList2" runat="server"           DataSourceID="SqlDataSource4"           DataTextField="CategoryName"           DataValueField="CategoryID"           Enabled=false           SelectedValue='<%# Eval("CategoryID") %>'>         </asp:DropDownList>       </ItemTemplate>       <EditItemTemplate>         <asp:DropDownList ID="DropDownList3" runat="server"           DataSourceID="SqlDataSource4"           DataTextField="CategoryName"           DataValueField="CategoryID"           SelectedValue='<%# Bind("CategoryID") %>'>         </asp:DropDownList>       </EditItemTemplate>     </asp:TemplateField>     ・・・   </Fields> </asp:DetailsView>   <asp:SqlDataSource ID="SqlDataSource4" runat="server"   ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"   SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"> </asp:SqlDataSource>   DetailsView03Tip1.aspxをブラウザに表示すると、DropDownListにCategoriesテーブル、GridViewにProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックすると、DetailsViewに商品の詳細が表示されます。このとき、「区分名」にはDropDownListが表示されます。[編集]ボタンをクリックすると「区分名」のDropDownListが選択可能な状態で表示されます。   図 DetailsViewの「区分名」にDropDownListが表示された