ASP.NET DetailsViewのホームへ戻る

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

 

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

 

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

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

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

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

 

 

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

 

 

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

 

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

 

 

 

1. 新規Webページ作成

 

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

 

2. コントロール作成

 

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

 

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

 

<asp:DetailsView>

・・・

</asp:DetailsView>

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

<asp:SqlDataSource>

・・・

</asp:SqlDataSource>

 

 

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

 

図 デザイナにDropDownListGridViewDetailsViewLabelを作成

 

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

 

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

 

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

 

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

 

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

 

図 「INSERTUPDATE、および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のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、DropDownListCategoriesテーブル、GridViewProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックするとDetailsViewに選択した商品の詳細が表示されます。DetailsViewから[新規作成]ボタンをクリックすると商品ID,商品、区分ID、単位、単価を入力するテキストボックスが表示されますのでデータを入力したら、[挿入]ボタンをクリックします。データを入力しないで[挿入]ボタンをクリックするとラベルにエラーメッセージが表示されます。

 

 

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

 

 

◆解説

 

DetailsViewにレコードの新規作成機能を追加するには、「DetailsViewタスク」メニューから[データソースの構成]を選択してデータソースの構成ウィザードを起動します。「Selectステートメントの構成」が表示されたら、[詳細設定]ボタンをクリックして「SQL生成の詳細オプション」から「INSERTUPDATE、および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>

 

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

 

レコードの追加処理が正常に終了したときは、GridViewDataBindメソッドを実行して新規レコードを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が挿入モードのとき、検証コントロールを追加するには、

BoundFieldTemplateFieldに変換(※1)します。

 

1DetailsViewタスク」メニューから[フィールドの編集]を選択して「フィールド」ダイアログから変換します。

 

<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>

 

テキストボックスに何も入力しないで[挿入]ボタンをクリックすると右側に「*」が表示される

 

 

ASP.NET DetailsViewのホームへ戻る