■DetailsViewにレコードを新規登録する機能を追加する　(DetailsView02.aspx)

 

DetailsViewに新規レコードを登録するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

▼  DetailsViewにレコードの新規登録ボタンを表示する方法

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

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

▼  新規登録したレコードをGridViewに表示する方法

 

 

DetalesViewから[新規作成]ボタンをクリックする

 

 

新規レコードを入力したら[挿入]ボタンをクリックする

 

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

 

 

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

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

 

デザイナの最下位から[ソース]をクリックします。ソースビューが表示されたら、ツールボックスから[Label]をドラッグしてDetailsView1とSqlDataSource3の間に挿入します。Label1が挿入されたら「EnableViewState="False"」を追加します。

 

<asp:DetailsView>

・・・

</asp:DetailsView>

<asp:Label ID="lblResult" runat="server" EnableViewState="False"></asp:Label>

<asp:SqlDataSource>

・・・

</asp:SqlDataSource>

 

 

ソースビューの最下位から[デザイン]をクリックします。デザインビューが表示されたら、「DetailsViewタスク」メニューから[データソースの構成]を選択します。

 

図　デザイナにDropDownList、GridView、DetailsView、Labelを作成

 

データソースの構成ウィザードが起動されて「Selectステートメントの構成」が表示されたらProductsテーブルからProductID、ProductName、CategoryID、QuantityPerUnit、UnitPriceの列を選択して、[WHERE]ボタンをクリックします。「WHERE句の追加」が表示されたら、「列」、「演算子」、「ソース」から[ProductID]、[=]、[Control]を選択します。右側の「パラメータのプロパティ」の「コントロールID」から[GridView1]を選択したら[追加]ボタンをクリックします。「WHERE句」のSQL式と値を確認したら[OK]をクリックして閉じます。

 

図　SQLのWHERE句のパラメータ変数にGridView1.SelectedValueを代入する

 

「Selectステートメントの構成」に戻ったら、[詳細設定]のボタンをクリックします。

 

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

 

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

 

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

 

「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。「選択されたデータソースのスキーマを使用してDetailsView行フィールドとデータキーを再作成しますか？・・・」が表示されたら、[いいえ]をクリックして閉じます。

 

「DetailsViewタスク」メニューから「挿入を有効にする」をチェックしたら、[フィールドの編集]を選択します。「フィールド」が表示されたら、「選択されたフィールド」から[新規、挿入、キャンセル]を選択します。CommandFiledプロパティからButtonTypeプロパティに[Button]を設定したら、[OK]をクリックして閉じます。

 

図 DetailsViewに[新規作成]ボタンを追加

 

 

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

 

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

 

Protected Sub DetailsView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs) Handles DetailsView1.ItemInserted

  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，商品、区分ID、単位、単価を入力するテキストボックスが表示されますのでデータを入力したら、[挿入]ボタンをクリックします。データを入力しないで[挿入]ボタンをクリックするとラベルにエラーメッセージが表示されます。

 

 

図　DetailsViewから[新規作成]ボタンをクリックすると挿入モードになる

 

 

◆解説

 

DetailsViewにレコードの新規作成機能を追加するには、「DetailsViewタスク」メニューから[データソースの構成]を選択してデータソースの構成ウィザードを起動します。「Selectステートメントの構成」が表示されたら、[詳細設定]ボタンをクリックして「SQL生成の詳細オプション」から「INSERT、UPDATE、およびDELETEステートメントの生成」をチェックします。次に、デザイナから「DetailsViewタスク」メニューを表示して「挿入を有効にする」をチェックします。これでDetailsViewに[新規作成]ボタンが作成されます。

 

 

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

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

  <Fields>

    <asp:BoundField DataField="ProductID"

      HeaderText="ID" ReadOnly="True" SortExpression="ProductID" />

    <asp:BoundField DataField="ProductName"

      HeaderText="商品" SortExpression="ProductName" />

    <asp:BoundField DataField="CategoryID"

      HeaderText="区分ID" SortExpression="CategoryID" />

    <asp:BoundField DataField="QuantityPerUnit"

      HeaderText="単位" SortExpression="QuantityPerUnit" />

    <asp:BoundField DataField="UnitPrice"

      HeaderText="単価" SortExpression="UnitPrice" DataFormatString="{0:n0}" … />

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

  </Fields>

</asp:DetailsView>

 

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

 

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

 

Protected Sub DetailsView1_ItemInserted(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs) Handles DetailsView1.ItemInserted

  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

レコードの新規登録時入力データをチェックするには　(DetailsView02Tip1.aspx)   DetailsViewから[新規作成]ボタンをクリックしてレコードを追加するとき、入力データをチェックするには、ASP.NETの検証コントロールを使用します。DetailsViewが挿入モードのとき、検証コントロールを追加するには、 BoundFieldをTemplateFieldに変換（※1）します。   ※1「DetailsViewタスク」メニューから[フィールドの編集]を選択して「フィールド」ダイアログから変換します。   <EditItemTemplate>…</EditItemTempalte>にTextBoxが配置されていますので、このTextBoxに検証コントロールを適用します。たとえば、「商品ID」が入力されているチェックするには、RequiredFieldValidatorを追加（※2）します。また、「商品ID」として数字のみ許可するときは、CompareValidatorを追加します。   ※2ソースビューの状態でツールボックスの「検証」から検証コントロールをドラッグ＆ドロップします。   <asp:DetailsView ID="DetailsView1" runat="server"   AutoGenerateRows="False" DataSourceID="SqlDataSource3"・・・>   <Fields>     <asp:TemplateField HeaderText="ID" SortExpression="ProductID">       <ItemTemplate>         <asp:Label ID="Label1" runat="server"           Text='<%# Bind("ProductID") %>'></asp:Label>       </ItemTemplate>       <EditItemTemplate>         <asp:TextBox ID="txtProductID" runat="server"           Text='<%# Bind("ProductID") %>'>         </asp:TextBox>         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"           ControlToValidate="txtProductID" ErrorMessage="*">         </asp:RequiredFieldValidator>         <asp:CompareValidator ID="CompareValidator1" runat="server"           ControlToValidate="txtProductID" Operator="DataTypeCheck"           Type="Integer" ErrorMessage="数字を入力してください">         </asp:CompareValidator>       </EditItemTemplate>     </asp:TemplateField>     ・・・   </Fields> </asp:DetailsView>   図 テキストボックスに何も入力しないで[挿入]ボタンをクリックすると右側に「*」が表示される