ASP.NET DetailsViewのホームへ戻る

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

 

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

 

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

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

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

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

 

 

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

 

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

 

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

 

 

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

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

 

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のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、DropDownListCategoriesテーブル、GridViewProductsテーブルが表示されます。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>

 

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

 

レコードの更新処理が正常に終了したときは、GridViewDataBindメソッドを実行して更新したレコードを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列を区分名に変えるには、FoundFieldTemplateFieldに変換します。TempalteField<ItemTemplate>..</ItemTemplate><EditItemTemlate>…</EditItemTemplate>にはDropDownListを追加します。ItemTemplateDropDownListには、「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をブラウザに表示すると、DropDownListCategoriesテーブル、GridViewProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックすると、DetailsViewに商品の詳細が表示されます。このとき、「区分名」にはDropDownListが表示されます。[編集]ボタンをクリックすると「区分名」のDropDownListが選択可能な状態で表示されます。

 

DetailsViewの「区分名」にDropDownListが表示された

 

 

ASP.NET DetailsViewのホームへ戻る