データの挿入、更新、削除の概要 (VB)

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、ObjectDataSource の Insert()、Update()、Delete() メソッドを BLL クラスのメソッドにマップする方法と、GridView、DetailsView、および FormView コントロールを構成してデータ変更機能を提供する方法について説明します。

はじめに

過去のいくつかのチュートリアルでは、GridView、DetailsView、および FormView コントロールを使用して、ASP.NET ページにデータを表示する方法について説明しました。 これらのコントロールは、単にそれらに提供されるデータを操作します。 通常、これらのコントロールは、ObjectDataSource などのデータ ソース コントロールを使用してデータにアクセスします。 ObjectDataSource が、ASP.NET ページと基になるデータの間のプロキシとしてどのように機能するかを確認しました。 GridView は、データを表示する必要がある場合、その ObjectDataSource の Select() メソッドを呼び出します。これにより、ビジネス ロジック レイヤー (BLL) からメソッドが呼び出され、適切なデータ アクセス層 (DAL) TableAdapter 内のメソッドが呼び出され、Northwind データベースにクエリが送信 SELECT されます。

最初のチュートリアルで DAL で TableAdapters を作成したときに、Visual Studio によって、基になるデータベース テーブルからデータを挿入、更新、削除するためのメソッドが自動的に追加されたことを思い出してください。 さらに、 ビジネス ロジック レイヤーの作成 では、BLL でこれらのデータ変更 DAL メソッドを呼び出すメソッドを設計しました。

その Select() メソッドに加えて、ObjectDataSource には Insert()、、 Update()、および Delete() メソッドもあります。 メソッドと同様に Select() 、これら 3 つのメソッドは、基になるオブジェクト内のメソッドにマップできます。 データを挿入、更新、または削除するように構成されている場合、GridView、DetailsView、および FormView コントロールは、基になるデータを変更するためのユーザー インターフェイスを提供します。 このユーザー インターフェイスは、ObjectDataSource の 、Update()、および Delete() メソッドを呼び出し、基になるオブジェクトの関連付けられたメソッドを呼びInsert()出します (図 1 を参照)。

図 1: ObjectDataSource の Insert()、、 Update()および Delete() メソッドは、BLL へのプロキシとして機能します (フルサイズの画像を表示するには、ここをクリックします)

このチュートリアルでは、ObjectDataSource の 、、Update()および Delete() メソッドを BLL 内のInsert()クラスのメソッドにマップする方法と、GridView、DetailsView、および FormView コントロールを構成してデータ変更機能を提供する方法について説明します。

手順 1: チュートリアル Web ページの挿入、更新、および削除を作成する

データの挿入、更新、削除の方法を調べ始める前に、まず、このチュートリアルと次のいくつかのページに必要な ASP.NET ページを Web サイト プロジェクトに作成しましょう。 まず、 という名前 EditInsertDeleteの新しいフォルダーを追加します。 次に、次の ASP.NET ページをそのフォルダーに追加し、各ページをマスター ページに Site.master 関連付けます。

• Default.aspx
• Basics.aspx
• DataModificationEvents.aspx
• ErrorHandling.aspx
• UIValidation.aspx
• CustomizedUI.aspx
• OptimisticConcurrency.aspx
• ConfirmationOnDelete.aspx
• UserLevelAccess.aspx

図 2: データ Modification-Related チュートリアルの ASP.NET ページを追加する

他のフォルダーと同様に、 Default.aspx フォルダーの EditInsertDelete セクションにチュートリアルが一覧表示されます。 ユーザー コントロールには SectionLevelTutorialListing.ascx この機能があることを思い出してください。 したがって、このユーザー コントロールを に追加するにはDefault.aspx、ソリューション エクスプローラーからページのデザイン ビューにドラッグします。

図 3: ユーザー コントロールを SectionLevelTutorialListing.ascx に追加する Default.aspx (クリックするとフルサイズの画像が表示されます)

最後に、ページをエントリとしてファイルに Web.sitemap 追加します。 具体的には、カスタマイズされた書式設定の後に次のマークアップを <siteMapNode>追加します。

<siteMapNode title="Editing, Inserting, and Deleting" url="~/EditInsertDelete/Default.aspx" description="Samples of Reports that Provide Editing, Inserting, and Deleting Capabilities"> <siteMapNode url="~/EditInsertDelete/Basics.aspx" title="Basics" description="Examines the basics of data modification with the GridView, DetailsView, and FormView controls." /> <siteMapNode url="~/EditInsertDelete/DataModificationEvents.aspx" title="Data Modification Events" description="Explores the events raised by the ObjectDataSource pertinent to data modification." /> <siteMapNode url="~/EditInsertDelete/ErrorHandling.aspx" title="Error Handling" description="Learn how to gracefully handle exceptions raised during the data modification workflow." /> <siteMapNode url="~/EditInsertDelete/UIValidation.aspx" title="Adding Data Entry Validation" description="Help prevent data entry errors by providing validation." /> <siteMapNode url="~/EditInsertDelete/CustomizedUI.aspx" title="Customize the User Interface" description="Customize the editing and inserting user interfaces." /> <siteMapNode url="~/EditInsertDelete/OptimisticConcurrency.aspx" title="Optimistic Concurrency" description="Learn how to help prevent simultaneous users from overwritting one another s changes." /> <siteMapNode url="~/EditInsertDelete/ConfirmationOnDelete.aspx" title="Confirm On Delete" description="Prompt a user for confirmation when deleting a record." /> <siteMapNode url="~/EditInsertDelete/UserLevelAccess.aspx" title="Limit Capabilities Based on User" description="Learn how to limit the data modification functionality based on the user role or permissions." /> </siteMapNode>

を更新した Web.sitemap後、ブラウザーを使用してチュートリアル Web サイトを表示します。 左側のメニューに、チュートリアルの編集、挿入、削除の項目が含まれるようになりました。

図 4: サイト マップに、編集、挿入、および削除に関するチュートリアルのエントリが含まれるようになりました

手順 2: ObjectDataSource コントロールの追加と構成

GridView、DetailsView、FormView はそれぞれデータ変更機能とレイアウトが異なるため、それぞれを個別に調べてみましょう。 ただし、各コントロールに独自の ObjectDataSource を使用するのではなく、3 つのコントロールの例すべてを共有できる単一の ObjectDataSource を作成しましょう。

ページをBasics.aspx開き、ツールボックスから Designer に ObjectDataSource をドラッグし、スマート タグから [データ ソースの構成] リンクをクリックします。 ProductsBLLは、編集、挿入、および削除の各メソッドを提供する唯一の BLL クラスであるため、このクラスを使用するように ObjectDataSource を構成します。

図 5: クラスを使用 ProductsBLL するように ObjectDataSource を構成する (フルサイズの画像を表示するにはクリックします)

次の画面では、ObjectDataSource の 、 Update()Insert()Delete() にマップされるクラスのProductsBLLSelect()メソッドを指定できます。そのためには、適切なタブを選択し、ドロップダウン リストからメソッドを選択します。 図 6 は、今では使い慣れているはずですが、ObjectDataSource の Select() メソッドをクラスの GetProducts() メソッドにProductsBLLマップします。 Update()、、および Delete() メソッドはInsert()、上部にある一覧から適切なタブを選択することで構成できます。

図 6: ObjectDataSource からすべての製品が返される (フルサイズの画像を表示するをクリックします)

図 7、8、および 9 は、ObjectDataSource の UPDATE、INSERT、および DELETE タブを示しています。 、、および の各メソッドがクラスUpdateProductAddProductの Update()Insert()、、および Delete()DeleteProduct メソッドをそれぞれ呼び出ProductsBLLすように、これらのタブを構成します。

図 7: ObjectDataSource のメソッドをクラスのUpdate()メソッドにProductBLLマップする (フルサイズのUpdateProduct画像を表示する場合はクリックします)

図 8: ObjectDataSource のメソッドをクラスの Insert() Add Product メソッドにProductBLLマップする (フルサイズの画像を表示する 場合はクリックします)

図 9: ObjectDataSource のメソッドをクラスの Delete() メソッドにProductBLLマップする (フルサイズのDeleteProduct画像を表示する 場合はクリックします)

UPDATE タブ、INSERT タブ、DELETE タブのドロップダウン リストで、これらのメソッドが既に選択されていることに気付いたかもしれません。 これは のメソッドProductsBLLを装飾する のDataObjectMethodAttribute使用のおかげです。 たとえば、DeleteProduct メソッドには次のシグネチャがあります。

<System.ComponentModel.DataObjectMethodAttribute _ (System.ComponentModel.DataObjectMethodType.Delete, True)> _ Public Function DeleteProduct(ByVal productID As Integer) As Boolean End Function

属性は DataObjectMethodAttribute 、各メソッドが選択、挿入、更新、または削除を行うかどうか、および既定値であるかどうかを示します。 BLL クラスの作成時にこれらの属性を省略した場合は、UPDATE、INSERT、DELETE の各タブからメソッドを手動で選択する必要があります。

適切な ProductsBLL メソッドが ObjectDataSource Insert()の 、 Update()、および Delete() メソッドにマップされていることを確認したら、[完了] をクリックしてウィザードを完了します。

ObjectDataSource のマークアップを調べる

ウィザードを使用して ObjectDataSource を構成した後、ソース ビューに移動して、生成された宣言型マークアップを調べます。 タグは <asp:ObjectDataSource> 、基になるオブジェクトと呼び出すメソッドを指定します。 さらに、DeleteParametersUpdateParametersクラスAddProductの 、、および InsertParameters メソッドの入力パラメーターProductsBLLにマップされる 、UpdateProduct、 DeleteProduct があります。

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="DeleteProduct" InsertMethod="AddProduct" OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts" TypeName="ProductsBLL" UpdateMethod="UpdateProduct"> <DeleteParameters> <asp:Parameter Name="productID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="productName" Type="String" /> <asp:Parameter Name="supplierID" Type="Int32" /> <asp:Parameter Name="categoryID" Type="Int32" /> <asp:Parameter Name="quantityPerUnit" Type="String" /> <asp:Parameter Name="unitPrice" Type="Decimal" /> <asp:Parameter Name="unitsInStock" Type="Int16" /> <asp:Parameter Name="unitsOnOrder" Type="Int16" /> <asp:Parameter Name="reorderLevel" Type="Int16" /> <asp:Parameter Name="discontinued" Type="Boolean" /> <asp:Parameter Name="productID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="productName" Type="String" /> <asp:Parameter Name="supplierID" Type="Int32" /> <asp:Parameter Name="categoryID" Type="Int32" /> <asp:Parameter Name="quantityPerUnit" Type="String" /> <asp:Parameter Name="unitPrice" Type="Decimal" /> <asp:Parameter Name="unitsInStock" Type="Int16" /> <asp:Parameter Name="unitsOnOrder" Type="Int16" /> <asp:Parameter Name="reorderLevel" Type="Int16" /> <asp:Parameter Name="discontinued" Type="Boolean" /> </InsertParameters> </asp:ObjectDataSource>

ObjectDataSource には、関連付けられたメソッドの各入力パラメーターのパラメーターが含まれます。これは、ObjectDataSource が入力パラメーター (などGetProductsByCategoryID(categoryID)) を必要とする select メソッドを呼び出すように構成されている場合と同様に、 のリストSelectParameterが存在する場合と同様です。 簡単に説明しますが、これらの DeleteParameters、UpdateParametersInsertParameters、 の値は、ObjectDataSource Update()Insert()の 、、または Delete() メソッドを呼び出す前に、GridView、DetailsView、および FormView によって自動的に設定されます。 これらの値は、必要に応じてプログラムで設定することもできます。これについては、今後のチュートリアルで説明します。

ウィザードを使用して ObjectDataSource に構成する副作用の 1 つは、Visual Studio によって OldValuesParameterFormatString プロパティ が に original_{0}設定されていることです。 このプロパティ値は、編集中のデータの元の値を含めるために使用され、次の 2 つのシナリオで役立ちます。

• レコードを編集するときに、ユーザーが主キーの値を変更できる場合。 この場合、元の主キー値を持つレコードが見つかり、それに応じて値が更新されるように、新しい主キー値と元の主キー値の両方を指定する必要があります。
• オプティミスティック コンカレンシーを使用する場合。 オプティミスティック コンカレンシーは、2 人の同時ユーザーが互いに変更を上書きしないようにする手法であり、今後のチュートリアルのトピックです。

プロパティは OldValuesParameterFormatString 、元の値の基になるオブジェクトの更新および削除メソッドの入力パラメーターの名前を示します。 オプティミスティック コンカレンシーを調べる場合は、このプロパティとその目的について詳しく説明します。 しかし、BLLのメソッドは元の値を期待していないため、このプロパティを削除することが重要であるため、私はそれを今思い出します。 プロパティをOldValuesParameterFormatString既定の ({0}) 以外の値に設定すると、Data Web コントロールが ObjectDataSource Update() または メソッドの呼び出しを試みたときにエラーが発生します。これは、ObjectDataSource が、 パラメーターまたはDelete()DeleteParameters指定されたパラメーターと元の値パラメーターの両方UpdateParametersを渡そうとするためです。

この時点でこれがあまり明確でない場合は、このプロパティとそのユーティリティを今後のチュートリアルで確認します。 ここでは、宣言構文からこのプロパティ宣言を完全に削除するか、値を既定値 ({0}) に設定してください。

注意

デザイン ビューのOldValuesParameterFormatStringプロパティ ウィンドウからプロパティ値をクリアするだけで、そのプロパティは宣言型の構文に残りますが、空の文字列に設定されます。 残念ながら、上記と同じ問題が引き続き発生します。 したがって、宣言構文からプロパティを完全に削除するか、プロパティ ウィンドウから値を既定値{0}に設定します。

手順 3: データ Web コントロールを追加し、データ変更用に構成する

ObjectDataSource がページに追加され、構成されたら、データ Web コントロールをページに追加して、データを表示し、エンド ユーザーが変更できるようにする準備ができました。 これらのデータ Web コントロールはデータ変更機能と構成が異なるため、GridView、DetailsView、および FormView を個別に確認します。

この記事の残りの部分で説明するように、GridView、DetailsView、および FormView コントロールを使用して、非常に基本的な編集、挿入、削除のサポートを追加することは、2 つのチェックボックスをチェックするのと同じくらい簡単です。 現実世界には多くの微妙なケースやエッジ ケースがあり、ポイントアンドクリックだけでなく、そのような機能の提供がより複雑になります。 ただし、このチュートリアルでは、単純なデータ変更機能の証明のみに焦点を当てています。 今後のチュートリアルでは、現実の環境で間違いなく発生する懸念事項について説明します。

GridView からのデータの削除

まず、ツールボックスからDesignerに GridView をドラッグします。 次に、GridView のスマート タグのドロップダウン リストから選択して、ObjectDataSource を GridView にバインドします。 この時点で、GridView の宣言型マークアップは次のようになります。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"> <Columns> <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" /> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" /> <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" /> <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" /> <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" /> <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" /> <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" /> <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" ReadOnly="True" SortExpression="CategoryName" /> <asp:BoundField DataField="SupplierName" HeaderText="SupplierName" ReadOnly="True" SortExpression="SupplierName" /> </Columns> </asp:GridView>

スマート タグを使用して GridView を ObjectDataSource にバインドするには、次の 2 つの利点があります。

• BoundFields と CheckBoxFields は、ObjectDataSource によって返される各フィールドに対して自動的に作成されます。 さらに、BoundField と CheckBoxField のプロパティは、基になるフィールドのメタデータに基づいて設定されます。 たとえば、ProductIDCategoryNameおよび SupplierName の各フィールドは でProductsDataTable読み取り専用としてマークされるため、編集時に更新することはできません。 これに対応するために、これらの BoundFields の ReadOnly プロパティは にTrue設定されます。
• DataKeyNames プロパティは、基になるオブジェクトの主キー フィールドに割り当てられます。 これは、GridView を使用してデータを編集または削除する場合に不可欠です。このプロパティは、各レコードを一意に識別するフィールド (またはフィールドのセット) を示します。 プロパティの DataKeyNames 詳細については、「 Details DetailView を使用した選択可能なマスター グリッド ビューの使用」のマスター/詳細 に関するチュートリアルを参照してください。

GridView は、プロパティ ウィンドウ構文または宣言構文を使用して ObjectDataSource にバインドできますが、これを行うには、適切な BoundField とDataKeyNamesマークアップを手動で追加する必要があります。

GridView コントロールには、行レベルの編集と削除が組み込まれています。 削除をサポートするように GridView を構成すると、[削除] ボタンの列が追加されます。 エンド ユーザーが特定の行の [削除] ボタンをクリックすると、ポストバックが実行され、GridView によって次の手順が実行されます。

1. ObjectDataSource の DeleteParameters 値が割り当てられます
2. ObjectDataSource の Delete() メソッドが呼び出され、指定したレコードが削除されます
3. GridView は、その Select() メソッドを呼び出すことによって、自身を ObjectDataSource に再バインドします

に DeleteParameters 割り当てられる値は、[削除] ボタンが DataKeyNames クリックされた行のフィールドの値です。 そのため、GridView DataKeyNames のプロパティを正しく設定することが重要です。 見つからない場合は、 DeleteParameters 手順 1 で の Nothing 値が割り当てられます。これにより、手順 2 でレコードが削除されることはありません。

注意

コレクションは DataKeys GridView のコントロール状態に格納されます。つまり DataKeys 、GridView のビューステートが無効になっている場合でも、値はポストバック全体で記憶されます。 ただし、編集または削除 (既定の動作) をサポートする GridView では、ビューステートが有効なままであることが非常に重要です。 GridView の EnableViewState プロパティを に false設定すると、1 人のユーザーに対して編集と削除の動作は正常に機能しますが、同時ユーザーがデータを削除している場合は、これらの同時実行ユーザーが意図していないレコードを誤って削除または編集する可能性があります。

この同じ警告は、DetailsViews と FormViews にも適用されます。

GridView に削除機能を追加するには、そのスマート タグに移動し、[削除を有効にする] チェック ボックスをチェックします。

図 10: [削除を有効にする] チェック ボックスをオンにする

スマート タグの [削除を有効にする] チェック ボックスをオンにすると、CommandField が GridView に追加されます。 CommandField は、GridView に列をレンダリングし、1 つ以上のタスク (レコードの選択、レコードの編集、レコードの削除) を実行するためのボタンを表示します。 以前は、詳細詳細ビューチュートリアルで 選択可能なマスター GridView を使用してマスター/詳細 でレコードを選択する CommandField の動作を確認しました。

CommandField には、CommandField に表示される一連のボタンを示す多数 ShowXButton のプロパティが含まれています。 [削除を有効にする] チェック ボックスをオンにすると、プロパティが True GridView の Columns コレクションに追加された CommandField ShowDeleteButton が表示されます。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"> <Columns> <asp:CommandField ShowDeleteButton="True" /> ... BoundFields removed for brevity ... </Columns> </asp:GridView>

この時点で、GridView への削除サポートの追加は完了です。 図 11 に示すように、ブラウザーからこのページにアクセスすると、[削除] ボタンの列が表示されます。

図 11: CommandField は、削除ボタンの列を追加します (フルサイズの画像を表示するをクリックします)

このチュートリアルを自分で作成している場合は、このページをテストするときに [削除] ボタンをクリックすると例外が発生します。 これらの例外が発生した理由とその修正方法については、引き続きお読みください。

注意

このチュートリアルに付属するダウンロードを使用してフォローしている場合、これらの問題は既に考慮されています。 ただし、発生する可能性のある問題と適切な回避策を特定するために、以下の詳細を読み進めてお勧めします。

製品を削除しようとすると、"ObjectDataSource 'ObjectDataSource1' に類似する例外が発生し、パラメーター productID、original_ProductID を持つ非ジェネリック メソッド 'DeleteProduct' が見つからなかった場合、ObjectDataSource からプロパティを削除 OldValuesParameterFormatString し忘れた可能性があります。 プロパティをOldValuesParameterFormatString指定すると、ObjectDataSource は 入力パラメーターと original_ProductID 入力パラメーターの両方productIDを メソッドにDeleteProduct渡そうとします。 DeleteProductただし、 は 1 つの入力パラメーターのみを受け入れるため、例外です。 プロパティを OldValuesParameterFormatString 削除 (または に {0}設定) すると、ObjectDataSource に元の入力パラメーターを渡そうとしないように指示されます。

図 12: プロパティがクリアされていることを確認 OldValuesParameterFormatString します (フルサイズの画像を表示する をクリックします)

プロパティをOldValuesParameterFormatString削除した場合でも、"DELETE ステートメントが REFERENCE 制約 'FK_Order_Details_Products' と競合しています" というメッセージを含む製品を削除しようとすると、例外が発生します。Northwind データベースには、 テーブルと Products テーブルの間Order Detailsに外部キー制約が含まれています。つまり、テーブルに 1 つ以上のレコードがある場合、製品をOrder Detailsシステムから削除することはできません。 Northwind データベース内のすべての製品には に少なくとも 1 つのレコード Order Detailsがあるため、製品に関連付けられている注文詳細レコードを最初に削除するまで、製品を削除することはできません。

図 13: 外部キー制約によって製品の削除が禁止されている (クリックするとフルサイズの画像が表示されます)

このチュートリアルでは、テーブルから Order Details すべてのレコードを削除しましょう。 実際のアプリケーションでは、次のいずれかを行う必要があります。

• 注文の詳細情報を管理する別の画面がある
• 指定した製品の DeleteProduct 注文の詳細を削除するロジックを含むように メソッドを拡張する
• TableAdapter で使用される SQL クエリを変更して、指定した製品の注文の詳細の削除を含めます

テーブルから Order Details すべてのレコードを削除して、外部キー制約を回避しましょう。 Visual Studio の [サーバー エクスプローラー] に移動し、ノードをNORTHWND.MDF右クリックして、[新しいクエリ] を選択します。 次に、クエリ ウィンドウで、次の SQL ステートメントを実行します。 DELETE FROM [Order Details]

図 14: テーブルからすべてのレコードを Order Details 削除する (フルサイズの画像を表示する場合はクリックします)

[削除] ボタンを Order Details クリックしてテーブルをクリアすると、エラーなしで製品が削除されます。 [削除] ボタンをクリックしても製品が削除されない場合は、GridView DataKeyNames のプロパティが主キー フィールド (ProductID) に設定されていることを確認チェック。

注意

[削除] ボタンをクリックすると、ポストバックが続き、レコードが削除されます。 誤って間違った行の [削除] ボタンをクリックするのは簡単なので、これは危険な場合があります。 今後のチュートリアルでは、レコードを削除するときにクライアント側の確認を追加する方法について説明します。

GridView を使用したデータの編集

GridView コントロールは、削除に加えて、組み込みの行レベルの編集もサポートします。 編集をサポートするように GridView を構成すると、[編集] ボタンの列が追加されます。 エンド ユーザーの観点から、行の [編集] ボタンをクリックすると、その行が編集可能になり、セルが既存の値を含むテキスト ボックスに変わり、[編集] ボタンが [更新] ボタンと [キャンセル] ボタンに置き換えられます。 必要な変更を行った後、エンド ユーザーは [更新] ボタンをクリックして変更をコミットするか、[キャンセル] ボタンをクリックして変更を破棄できます。 どちらの場合も、[更新] または [キャンセル] をクリックすると、GridView は編集前の状態に戻ります。

ページ開発者の観点から、エンド ユーザーが特定の行の [編集] ボタンをクリックすると、ポストバックが発生し、GridView によって次の手順が実行されます。

1. GridView の EditItemIndex プロパティは、[編集] ボタンがクリックされた行のインデックスに割り当てられます
2. GridView は、その Select() メソッドを呼び出すことによって、自身を ObjectDataSource に再バインドします
3. に一致 EditItemIndex する行インデックスは、"編集モード" でレンダリングされます。このモードでは、[編集] ボタンは [更新] ボタンと [キャンセル] ボタンに置き換えられ、プロパティが False (既定値) の BoundFields ReadOnly は、データ フィールドの値にプロパティが割り当てられている TextBox Web コントロール Text としてレンダリングされます。

この時点でマークアップがブラウザーに返され、エンド ユーザーは行のデータを変更できます。 ユーザーが [更新] ボタンをクリックすると、ポストバックが発生し、GridView によって次の手順が実行されます。

1. ObjectDataSource の UpdateParameters 値には、エンド ユーザーが GridView の編集インターフェイスに入力した値が割り当てられます
2. ObjectDataSource の Update() メソッドが呼び出され、指定されたレコードが更新されます
3. GridView は、その Select() メソッドを呼び出すことによって、自身を ObjectDataSource に再バインドします

手順 1 で に UpdateParameters 割り当てられた主キーの値は、 プロパティで DataKeyNames 指定された値から取得されます。一方、主キー以外の値は、編集された行の TextBox Web コントロールのテキストから取得されます。 削除と同様に、GridView の DataKeyNames プロパティを正しく設定することが重要です。 不足している場合、 UpdateParameters 主キーの値には手順 1 で の Nothing 値が割り当てられます。これにより、手順 2 でレコードが更新されることはありません。

編集機能は、GridView のスマート タグの [編集を有効にする] チェック ボックスをオンにするだけでアクティブ化できます。

図 15: [編集を有効にする] チェック ボックスをオンにする

[編集を有効にする] チェック ボックスをオンにすると、CommandField (必要な場合) が追加され、そのプロパティが ShowEditButton に True設定されます。 前に説明したように、CommandField には、CommandField に表示される一連のボタンを示す多数 ShowXButton のプロパティが含まれています。 [編集を有効にする] チェック ボックスをオンにすると、プロパティが ShowEditButton 既存の CommandField に追加されます。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"> <Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> ... BoundFields removed for brevity ... </Columns> </asp:GridView>

基本的な編集サポートを追加する方法はこれですべてです。 図 16 に示すように、編集インターフェイスは、プロパティが にFalse設定されている各 BoundField ReadOnly (既定値) が TextBox としてレンダリングされる粗雑です。 これには、 や SupplierIDなどのCategoryIDフィールドが含まれます。これは、他のテーブルのキーです。

図 16: [Chai の編集] ボタンをクリックすると、編集モードの行が表示されます (フルサイズの画像を表示する場合をクリックします)

外部キー値を直接編集するようにユーザーに求めるだけでなく、編集インターフェイスのインターフェイスには次の方法がありません。

• ユーザーが データベースに存在しない または SupplierID をCategoryID入力すると、 UPDATE は外部キー制約に違反し、例外が発生します。
• 編集インターフェイスには検証は含まれません。 必要な値 (など ProductName) を指定しない場合、または数値が必要な文字列値を入力した場合 (テキスト ボックスに UnitPrice 「Too much!"」と入力するなど)、例外がスローされます。 今後のチュートリアルでは、編集ユーザー インターフェイスに検証コントロールを追加する方法について説明します。
• 現在、読み取り専用ではない すべての 製品フィールドは、GridView に含まれている必要があります。 たとえば、データを更新するときに GridView からフィールドを削除すると、UnitPriceGridView によって値が設定UpdateParametersUnitPriceされず、データベース レコードの UnitPrice が値にNULL変更されます。 同様に、 などの ProductName必須フィールドが GridView から削除された場合、上記と同じ "Column 'ProductName' does not allow nulls" 例外で更新が失敗します。
• 編集インターフェイスの書式設定では、多くの情報が必要になります。 は UnitPrice 4 つの小数点で表示されます。 理想的には、 と SupplierID のCategoryID値には、システム内のカテゴリと仕入先を一覧表示する DropDownList が含まれます。

これらはすべて、現時点で使用する必要がある欠点ですが、今後のチュートリアルで対処する予定です。

DetailsView を使用したデータの挿入、編集、および削除

前のチュートリアルで説明したように、DetailsView コントロールは一度に 1 つのレコードを表示し、GridView と同様に、現在表示されているレコードの編集と削除を行うことができます。 DetailsView のアイテムの編集と削除に関するエンド ユーザーのエクスペリエンスと、ASP.NET 側からのワークフローの両方が、GridView と同じです。 DetailsView が GridView と異なる場合は、組み込みの挿入サポートも提供します。

GridView のデータ変更機能を示すには、まず、既存の GridView の上のページに DetailsView を Basics.aspx 追加し、DetailsView のスマート タグを使用して既存の ObjectDataSource にバインドします。 次に、DetailsView の Height プロパティと Width プロパティをクリアし、スマート タグから [ページングを有効にする] オプションをチェックします。 編集、挿入、および削除のサポートを有効にするには、スマート タグの [編集を有効にする]、[挿入を有効にする]、[削除を有効にする] チェック ボックスをチェックするだけです。

図 17: 編集、挿入、および削除をサポートするように DetailsView を構成する

GridView と同様に、次の宣言構文に示すように、編集、挿入、または削除のサポートを追加すると、DetailsView に CommandField が追加されます。

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"> <Fields> <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" /> <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" /> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" /> <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" /> <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" /> <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" /> <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" /> <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" /> <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" ReadOnly="True" SortExpression="CategoryName" /> <asp:BoundField DataField="SupplierName" HeaderText="SupplierName" ReadOnly="True" SortExpression="SupplierName" /> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True" /> </Fields> </asp:DetailsView>

DetailsView の場合、CommandField は既定で Columns コレクションの末尾に表示されます。 DetailsView のフィールドは行としてレンダリングされるため、CommandField は DetailsView の下部に [挿入]、[編集]、および [削除] ボタンを含む行として表示されます。

図 18: 編集、挿入、および削除をサポートするように DetailsView を構成する (フルサイズの画像を表示する をクリックします)

[削除] ボタンをクリックすると、GridView と同じイベント シーケンス (ポストバック) が開始されます。その後に DetailsView が値にDataKeyNames基づいて ObjectDataSource DeleteParameters にデータを設定し、ObjectDataSource の Delete() メソッドを呼び出して完了しました。これにより、実際にデータベースから製品が削除されます。 DetailsView での編集も、GridView と同じ方法で機能します。

挿入の場合、エンド ユーザーに [新規] ボタンが表示され、クリックすると DetailsView が "挿入モード" でレンダリングされます。"挿入モード" の場合、[新規] ボタンは [挿入] ボタンと [キャンセル] ボタンに置き換えられ、プロパティが (既定値) にTrue設定されている BoundFields InsertVisible のみが表示されます。 などの ProductID自動インクリメント フィールドとして識別されるデータ フィールドでは、スマート タグを使用して DetailsView をデータ ソースにバインドするときに、 InsertVisible プロパティ が に False 設定されます。

スマート タグを使用してデータ ソースを DetailsView にバインドする場合、Visual Studio では、自動インクリメント フィールドに対してのみ プロパティが InsertVisible に False 設定されます。 や SupplierNameなどのCategoryName読み取り専用フィールドは、プロパティが 明示的に に設定されていない限りInsertVisible、"挿入モード" ユーザー インターフェイスにFalse表示されます。 DetailsView の InsertVisible 宣言構文またはスマート タグの [フィールドの編集] リンクを使用して、これら 2 つのフィールドのプロパティ Falseを に設定します。 図 19 は、[フィールドの InsertVisible 編集] リンクをクリックしてプロパティを に False 設定する方法を示しています。

図 19: Northwind Traders が Acme Tea を提供するようになりました (クリックするとフルサイズの画像が表示されます)

プロパティを設定したら InsertVisible 、ブラウザーでページを Basics.aspx 表示し、[新規作成] ボタンをクリックします。 図 20 は、新しい飲料 Acme Tea を製品ラインに追加するときの DetailsView を示しています。

図 20: Northwind Traders が Acme Tea を提供するようになりました (フルサイズの画像を表示する をクリックします)

Acme Tea の詳細を入力し、[挿入] ボタンをクリックすると、ポストバックが続き、新しいレコードがデータベース テーブルに Products 追加されます。 この DetailsView には、データベース テーブルに存在する製品の順序が一覧表示されるため、新しい製品を表示するには、最後の製品にページ移動する必要があります。

図 21: Acme Tea の詳細 (クリックするとフルサイズの画像が表示されます)

注意

DetailsView の CurrentMode プロパティは、表示されるインターフェイスを示し、、または ReadOnlyのいずれかの値EditInsertを指定できます。 DefaultMode プロパティは、編集または挿入が完了した後に DetailsView が戻るモードを示し、編集モードまたは挿入モードで永続的に DetailsView を表示する場合に便利です。

DetailsView のポイントアンドクリック挿入および編集機能には、GridView と同じ制限があります。ユーザーはテキストボックスを介して既存 CategoryID の値と SupplierID 値を入力する必要があります。インターフェイスには検証ロジックがありません。値を許可 NULL しない、またはデータベース レベルで既定値が指定されていないすべての製品フィールドを挿入インターフェイスに含める必要があります。 などなど。

今後の記事で GridView の編集インターフェイスを拡張および拡張するために検討する手法は、DetailsView コントロールの編集および挿入インターフェイスにも適用できます。

より柔軟なデータ変更ユーザー インターフェイスに FormView を使用する

FormView には、データの挿入、編集、削除が組み込まれていますが、フィールドではなくテンプレートを使用するため、GridView コントロールと DetailsView コントロールで使用される BoundField または CommandField を追加してデータ変更インターフェイスを提供する場所はありません。 代わりに、新しい項目を追加するとき、または既存の項目を編集するときにユーザー入力を収集するための Web コントロールと、[新規]、[編集]、[削除]、[挿入]、[更新]、[キャンセル] の各ボタンを適切なテンプレートに手動で追加する必要があります。 幸い、Visual Studio では、スマート タグのドロップダウン リストを使用して FormView をデータ ソースにバインドするときに、必要なインターフェイスが自動的に作成されます。

これらの手法を説明するには、まずページに FormView を Basics.aspx 追加し、FormView のスマート タグから、既に作成されている ObjectDataSource にバインドします。 これにより、ユーザーの入力をEditItemTemplateInsertItemTemplateItemTemplate収集するための FormView と、New、Edit、Delete、Insert、Update、Cancel ボタンの Button Web コントロールが生成されます。 さらに、FormView の DataKeyNames プロパティは、ObjectDataSource によって返されるオブジェクトの主キー フィールド (ProductID) に設定されます。 最後に、FormView のスマート タグで [ページングを有効にする] オプションをチェックします。

FormView が ObjectDataSource にバインドされた後の FormView の ItemTemplate 宣言型マークアップを次に示します。 既定では、ブール値以外の各製品フィールドは Label Web コントロールのプロパティに Text バインドされ、各ブール値フィールド (Discontinued) は無効になっている CheckBox Web コントロールのプロパティに Checked バインドされます。 [新規]、[編集]、[削除] ボタンがクリックされたときに特定の FormView 動作をトリガーするには、それぞれのCommandName値を 、Edit、および Deleteに設定するNew必要があります。

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"> <EditItemTemplate> ... </EditItemTemplate> <InsertItemTemplate> ... </InsertItemTemplate> <ItemTemplate> ProductID: <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label><br /> ProductName: <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Bind("ProductName") %>'> </asp:Label><br /> SupplierID: <asp:Label ID="SupplierIDLabel" runat="server" Text='<%# Bind("SupplierID") %>'> </asp:Label><br /> CategoryID: <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Bind("CategoryID") %>'> </asp:Label><br /> QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Bind("QuantityPerUnit") %>'> </asp:Label><br /> UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Bind("UnitPrice") %>'></asp:Label><br /> UnitsInStock: <asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Bind("UnitsInStock") %>'> </asp:Label><br /> UnitsOnOrder: <asp:Label ID="UnitsOnOrderLabel" runat="server" Text='<%# Bind("UnitsOnOrder") %>'> </asp:Label><br /> ReorderLevel: <asp:Label ID="ReorderLevelLabel" runat="server" Text='<%# Bind("ReorderLevel") %>'> </asp:Label><br /> Discontinued: <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked='<%# Bind("Discontinued") %>' Enabled="false" /><br /> CategoryName: <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Bind("CategoryName") %>'> </asp:Label><br /> SupplierName: <asp:Label ID="SupplierNameLabel" runat="server" Text='<%# Bind("SupplierName") %>'> </asp:Label><br /> <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"> </asp:LinkButton> <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"> </asp:LinkButton> <asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New" Text="New"> </asp:LinkButton> </ItemTemplate> </asp:FormView>

図 22 は、ブラウザーで表示したときの FormView の ItemTemplate を示しています。 各製品フィールドは、下部に [新規]、[編集]、[削除] の各ボタンと共に表示されます。

図 22: 各製品フィールドLists[新規]、[編集]、[削除] ボタンと共に[FormView ItemTemplate のデフラウト] (フルサイズの画像を表示する] をクリックします)

GridView や DetailsView と同様に、Delete ボタンまたはプロパティが Delete に設定されている Button、LinkButton、または ImageButton CommandName をクリックすると、ポストバックが発生し、FormView DataKeyNames の値に基づいて ObjectDataSource DeleteParameters が設定され、ObjectDataSource のDelete()メソッドが呼び出されます。

[編集] ボタンをクリックするとポストバックが続き、データが に EditItemTemplateリバウンドされます。これは、編集インターフェイスのレンダリングを担当します。 このインターフェイスには、[更新] ボタンと [キャンセル] ボタンと共にデータを編集するための Web コントロールが含まれています。 Visual Studio によって生成される既定値 EditItemTemplate には、自動インクリメント フィールド (ProductID) の Label、ブール以外の値フィールドごとに TextBox、ブール値フィールドごとに CheckBox が含まれます。 この動作は、GridView コントロールと DetailsView コントロールで自動生成された BoundFields とよく似ています。

注意

FormView の 自動生成に関する小さな問題の EditItemTemplate 1 つは、 や SupplierNameなどCategoryName、読み取り専用のフィールドに対して TextBox Web コントロールをレンダリングすることです。 これをすぐに説明する方法について説明します。

内の EditItemTemplate TextBox コントロールは、双方向のデータ バインドを使用して、対応するデータ フィールドの値にバインドされたプロパティを持ちますText。 で示される <%# Bind("dataField") %>双方向データ バインドでは、データをテンプレートにバインドするときと、レコードを挿入または編集するための ObjectDataSource のパラメーターを設定するときに、データバインドの両方が実行されます。 つまり、ユーザーが から ItemTemplate[編集] ボタンをクリックすると、メソッドは Bind() 指定したデータ フィールド値を返します。 ユーザーが変更を加えて [更新] をクリックすると、 を使用して Bind() 指定したデータ フィールドに対応するポストバックされた値が ObjectDataSource の UpdateParametersに適用されます。 または、 で <%# Eval("dataField") %>示される一方向データ バインドでは、データをテンプレートにバインドするときにデータ フィールドの値のみを取得し、ポストバック時にユーザーが入力した値をデータ ソースのパラメーターに返 しません 。

次の宣言型マークアップは、FormView の EditItemTemplateを示しています。 Bind()このメソッドは、ここでのデータ バインド構文で使用され、Update コントロールと Cancel ボタン Web コントロールのプロパティがCommandNameそれに応じて設定されていることに注意してください。

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"> <EditItemTemplate> ProductID: <asp:Label ID="ProductIDLabel1" runat="server" Text="<%# Eval("ProductID") %>"></asp:Label><br /> ProductName: <asp:TextBox ID="ProductNameTextBox" runat="server" Text="<%# Bind("ProductName") %>"> </asp:TextBox><br /> SupplierID: <asp:TextBox ID="SupplierIDTextBox" runat="server" Text="<%# Bind("SupplierID") %>"> </asp:TextBox><br /> CategoryID: <asp:TextBox ID="CategoryIDTextBox" runat="server" Text="<%# Bind("CategoryID") %>"> </asp:TextBox><br /> QuantityPerUnit: <asp:TextBox ID="QuantityPerUnitTextBox" runat="server" Text="<%# Bind("QuantityPerUnit") %>"> </asp:TextBox><br /> UnitPrice: <asp:TextBox ID="UnitPriceTextBox" runat="server" Text="<%# Bind("UnitPrice") %>"> </asp:TextBox><br /> UnitsInStock: <asp:TextBox ID="UnitsInStockTextBox" runat="server" Text="<%# Bind("UnitsInStock") %>"> </asp:TextBox><br /> UnitsOnOrder: <asp:TextBox ID="UnitsOnOrderTextBox" runat="server" Text="<%# Bind("UnitsOnOrder") %>"> </asp:TextBox><br /> ReorderLevel: <asp:TextBox ID="ReorderLevelTextBox" runat="server" Text="<%# Bind("ReorderLevel") %>"> </asp:TextBox><br /> Discontinued: <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked="<%# Bind("Discontinued") %>" /><br /> CategoryName: <asp:TextBox ID="CategoryNameTextBox" runat="server" Text="<%# Bind("CategoryName") %>"> </asp:TextBox><br /> SupplierName: <asp:TextBox ID="SupplierNameTextBox" runat="server" Text="<%# Bind("SupplierName") %>"> </asp:TextBox><br /> <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update"> </asp:LinkButton> <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"> </asp:LinkButton> </EditItemTemplate> <InsertItemTemplate> ... </InsertItemTemplate> <ItemTemplate> ... </ItemTemplate> </asp:FormView>

EditItemTemplateこの時点で、例外を使用しようとすると、例外がスローされます。 問題は、 フィールドと SupplierName フィールドが で TextBox Web コントロールEditItemTemplateとしてレンダリングされるということですCategoryName。 これらのテキスト ボックスをラベルに変更するか、完全に削除する必要があります。 それらを 完全に から EditItemTemplate削除してみましょう。

図 23 は、Chai の [編集] ボタンがクリックされた後のブラウザーの FormView を示しています。 に表示ItemTemplateされている SupplierName フィールドと CategoryName フィールドは存在しなくなったことに注意してください。これは、 からEditItemTemplate削除したばかりです。 [更新] ボタンをクリックすると、FormView は GridView コントロールと DetailsView コントロールと同じ一連の手順を実行します。

図 23: 既定では、 EditItemTemplate は編集可能な各製品フィールドをテキスト ボックスまたはチェック ボックスとして表示します (フルサイズの画像を表示する場合は、ここをクリックします)

[挿入] ボタンをクリックすると、FormView の ItemTemplate ポストバックが続きます。 ただし、新しいレコードが追加されているため、データは FormView にバインドされません。 インターフェイスには InsertItemTemplate 、[挿入] ボタンと [キャンセル] ボタンと共に新しいレコードを追加するための Web コントロールが含まれています。 Visual Studio によって生成される既定値 InsertItemTemplate には、ブール以外の値フィールドごとに TextBox と、自動生成された EditItemTemplateのインターフェイスと同様に、ブール値フィールドごとに CheckBox が含まれます。 TextBox コントロールのプロパティは、 Text 双方向データ バインドを使用して、対応するデータ フィールドの値にバインドされます。

次の宣言型マークアップは、FormView の InsertItemTemplateを示しています。 Bind()このメソッドは、ここでのデータ バインド構文で使用され、Insert コントロールと Cancel Button Web コントロールのプロパティがCommandNameそれに応じて設定されていることに注意してください。

<asp:FormView ID="FormView1" runat="server" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"> <EditItemTemplate> ... </EditItemTemplate> <InsertItemTemplate> ProductName: <asp:TextBox ID="ProductNameTextBox" runat="server" Text="<%# Bind("ProductName") %>"> </asp:TextBox><br /> SupplierID: <asp:TextBox ID="SupplierIDTextBox" runat="server" Text="<%# Bind("SupplierID") %>"> </asp:TextBox><br /> CategoryID: <asp:TextBox ID="CategoryIDTextBox" runat="server" Text="<%# Bind("CategoryID") %>"> </asp:TextBox><br /> QuantityPerUnit: <asp:TextBox ID="QuantityPerUnitTextBox" runat="server" Text="<%# Bind("QuantityPerUnit") %>"> </asp:TextBox><br /> UnitPrice: <asp:TextBox ID="UnitPriceTextBox" runat="server" Text="<%# Bind("UnitPrice") %>"> </asp:TextBox><br /> UnitsInStock: <asp:TextBox ID="UnitsInStockTextBox" runat="server" Text="<%# Bind("UnitsInStock") %>"> </asp:TextBox><br /> UnitsOnOrder: <asp:TextBox ID="UnitsOnOrderTextBox" runat="server" Text="<%# Bind("UnitsOnOrder") %>"> </asp:TextBox><br /> ReorderLevel: <asp:TextBox ID="ReorderLevelTextBox" runat="server" Text="<%# Bind("ReorderLevel") %>"> </asp:TextBox><br /> Discontinued: <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked="<%# Bind("Discontinued") %>" /><br /> CategoryName: <asp:TextBox ID="CategoryNameTextBox" runat="server" Text="<%# Bind("CategoryName") %>"> </asp:TextBox><br /> SupplierName: <asp:TextBox ID="SupplierNameTextBox" runat="server" Text="<%# Bind("SupplierName") %>"> </asp:TextBox><br /> <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert"> </asp:LinkButton> <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"> </asp:LinkButton> </InsertItemTemplate> <ItemTemplate> ... </ItemTemplate> </asp:FormView>

FormView の 自動生成には微妙な機能があります InsertItemTemplate。 具体的には、 や などCategoryNameSupplierName、読み取り専用のフィールドに対しても TextBox Web コントロールが作成されます。 と同様に、 EditItemTemplateからこれらの TextBox を削除する InsertItemTemplate必要があります。

図 24 は、新しい製品 Acme Coffee を追加するときのブラウザーの FormView を示しています。 に表示ItemTemplateされている SupplierName フィールドと CategoryName フィールドは、削除したばかりで、存在しなくなったことに注意してください。 [挿入] ボタンをクリックすると、FormView は DetailsView コントロールと同じ一連の手順を実行し、テーブルに新しいレコードを Products 追加します。 図 25 は、挿入後の FormView の Acme Coffee 製品の詳細を示しています。

図 24: InsertItemTemplate FormView の挿入インターフェイスのディクテーション (フルサイズの画像を表示する をクリックします)

図 25: 新しい製品の詳細 Acme Coffee が FormView に表示される (フルサイズの画像を表示する をクリックします)

FormView では、読み取り専用、編集、およびインターフェイスを 3 つの別々のテンプレートに挿入することで、DetailsView や GridView よりもこれらのインターフェイスを細かく制御できます。

注意

DetailsView と同様に、FormView の CurrentMode プロパティは表示されるインターフェイスを示し、その DefaultMode プロパティは編集または挿入が完了した後に FormView が戻るモードを示します。

まとめ

このチュートリアルでは、GridView、DetailsView、FormView を使用したデータの挿入、編集、削除の基本について説明しました。 これらの 3 つのコントロールはすべて、データ Web コントロールと ObjectDataSource のおかげで、ASP.NET ページに 1 行のコードを記述せずに利用できる、一定レベルの組み込みデータ変更機能を提供します。 ただし、単純なポイントとクリックの手法では、かなり弱く素朴なデータ変更ユーザー インターフェイスがレンダリングされます。 検証を提供したり、プログラム値を挿入したり、例外を適切に処理したり、ユーザー インターフェイスをカスタマイズしたりするには、次のいくつかのチュートリアルで説明する手法に依存する必要があります。

幸せなプログラミング!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・自分自身 ASP.NET 24時間で2.0です。 にアクセスmitchell@4GuysFromRolla.comすることも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。

前へ次へ