DataList でのデータの編集と削除の概要 (C#)
DataList には組み込みの編集と削除の機能がありませんが、このチュートリアルでは、基になるデータの編集と削除をサポートする DataList を作成する方法について説明します。
はじめに
「 データの挿入、更新、および削除の概要 」チュートリアルでは、アプリケーション アーキテクチャ、ObjectDataSource、および GridView、DetailsView、および FormView コントロールを使用してデータを挿入、更新、削除する方法について説明しました。 ObjectDataSource とこれら 3 つのデータ Web コントロールを使用すると、単純なデータ変更インターフェイスの実装はスナップであり、スマート タグからチェック ボックスをオンにするだけです。 コードを記述する必要はありません。
残念ながら、DataList には、GridView コントロールに固有の組み込みの編集機能と削除機能がありません。 この不足している機能の一部は、宣言型データ ソースコントロールとコードフリーのデータ変更ページが使用できなかった場合に、DataList が以前のバージョンの ASP.NET のレリックであるという事実によるものです。 ASP.NET 2.0 の DataList では、GridView と同じすぐに使用できるデータ変更機能は提供されませんが、ASP.NET 1.x 手法を使用してそのような機能を含めることができます。 この方法には少しコードが必要ですが、このチュートリアルで説明するように、DataList には、このプロセスを支援するためにいくつかのイベントとプロパティが用意されています。
このチュートリアルでは、基になるデータの編集と削除をサポートする DataList を作成する方法について説明します。 今後のチュートリアルでは、入力フィールドの検証、データ アクセスまたはビジネス ロジック レイヤーから発生した例外の適切な処理など、より高度な編集と削除のシナリオについて説明します。
注意
DataList と同様に、Repeater コントロールには、挿入、更新、または削除のための既定の機能がありません。 このような機能を追加できますが、DataList には、このような機能の追加を簡略化する Repeater に見つからないプロパティとイベントが含まれています。 したがって、このチュートリアルと今後の編集と削除を検討するチュートリアルは、DataList に厳密に焦点を当てます。
手順 1: チュートリアル Web ページの編集と削除の作成
DataList からデータを更新および削除する方法を調べ始める前に、まず、このチュートリアルと次のいくつかのページに必要な ASP.NET ページを Web サイト プロジェクトに作成してみましょう。 まず、 という名前 EditDeleteDataList
の新しいフォルダーを追加します。 次に、次の ASP.NET ページをそのフォルダーに追加し、各ページをマスター ページに Site.master
関連付けます。
Default.aspx
Basics.aspx
BatchUpdate.aspx
ErrorHandling.aspx
UIValidation.aspx
CustomizedUI.aspx
OptimisticConcurrency.aspx
ConfirmationOnDelete.aspx
UserLevelAccess.aspx
図 1: チュートリアルの ASP.NET ページを追加する
他のフォルダーと同様に、 Default.aspx
フォルダーの EditDeleteDataList
セクションにチュートリアルが一覧表示されます。 ユーザー コントロールに SectionLevelTutorialListing.ascx
この機能があることを思い出してください。 したがって、このユーザー コントロールを にDefault.aspx
追加するには、ソリューション エクスプローラーからページのデザイン ビューにドラッグします。
図 2: ユーザー コントロールを SectionLevelTutorialListing.ascx
に追加する Default.aspx
(クリックするとフルサイズの画像が表示されます)
最後に、ページをエントリとしてファイルに Web.sitemap
追加します。 具体的には、DataList と Repeater <siteMapNode>
を使用してマスター/詳細レポートの後に次のマークアップを追加します。
<siteMapNode
title="Editing and Deleting with the DataList"
description="Samples of Reports that Provide Editing and Deleting Capabilities"
url="~/EditDeleteDataList/Default.aspx" >
<siteMapNode
title="Basics"
description="Examines the basics of editing and deleting with the
DataList control."
url="~/EditDeleteDataList/Basics.aspx" />
<siteMapNode
title="Batch Update"
description="Examines how to update multiple records at once in a
fully-editable DataList."
url="~/EditDeleteDataList/BatchUpdate.aspx" />
<siteMapNode
title="Error Handling"
description="Learn how to gracefully handle exceptions raised during the
data modification workflow."
url="~/EditDeleteDataList/ErrorHandling.aspx" />
<siteMapNode
title="Adding Data Entry Validation"
description="Help prevent data entry errors by providing validation."
url="~/EditDeleteDataList/UIValidation.aspx" />
<siteMapNode
title="Customize the User Interface"
description="Customize the editing user interfaces."
url="~/EditDeleteDataList/CustomizedUI.aspx" />
<siteMapNode
title="Optimistic Concurrency"
description="Learn how to help prevent simultaneous users from
overwritting one another s changes."
url="~/EditDeleteDataList/OptimisticConcurrency.aspx" />
<siteMapNode
title="Confirm On Delete"
description="Prompt a user for confirmation when deleting a record."
url="~/EditDeleteDataList/ConfirmationOnDelete.aspx" />
<siteMapNode
title="Limit Capabilities Based on User"
description="Learn how to limit the data modification functionality
based on the user s role or permissions."
url="~/EditDeleteDataList/UserLevelAccess.aspx" />
</siteMapNode>
を更新した Web.sitemap
後、ブラウザーを使用してチュートリアル Web サイトを表示します。 左側のメニューに、DataList の編集と削除のチュートリアルの項目が含まれるようになりました。
図 3: サイト マップに DataList の編集と削除に関するチュートリアルのエントリが含まれるようになりました
手順 2: データの更新と削除の手法を調べる
GridView を使用したデータの編集と削除は非常に簡単です。これは、GridView と ObjectDataSource が連携して機能するためです。 「 挿入、更新、および削除に関連するイベントを調べる 」チュートリアルで説明したように、行の [更新] ボタンがクリックされると、GridView は、双方向データバインドを使用したフィールドを ObjectDataSource のコレクションに UpdateParameters
自動的に割り当て、その ObjectDataSource の Update()
メソッドを呼び出します。
残念ながら、DataList には、この組み込み機能はありません。 ユーザーの値が ObjectDataSource のパラメーターに割り当てられ、その Update()
メソッドが呼び出されるようにする必要があります。 この取り組みを支援するために、DataList には次のプロパティとイベントが用意されています。
- プロパティを
DataKeyField
更新または削除するときは、DataList 内の各項目を一意に識別できる必要があります。 このプロパティを、表示されるデータの主キー フィールドに設定します。 これにより、DataList のコレクションに、各 DataListDataKeys
アイテムの指定したDataKeyField
値が設定されます。 - イベントは
EditCommand
、プロパティが Edit に設定されている Button、LinkButton、または ImageButtonCommandName
がクリックされたときに発生します。 - イベントは
CancelCommand
、プロパティが Cancel に設定されている Button、LinkButton、または ImageButtonCommandName
がクリックされたときに発生します。 - イベントは
UpdateCommand
、プロパティが Update に設定されている Button、LinkButton、または ImageButtonCommandName
がクリックされたときに発生します。 - イベントは
DeleteCommand
、プロパティが Delete に設定されている Button、LinkButton、または ImageButtonCommandName
がクリックされたときに発生します。
これらのプロパティとイベントを使用して、DataList からデータを更新および削除するには、次の 4 つの方法を使用できます。
- ASP.NET 1.x 手法を使用すると 、DataList は ASP.NET 2.0 および ObjectDataSources より前に存在し、プログラムによる方法でデータを完全に更新および削除できました。 この手法では、ObjectDataSource を完全に削除するため、表示するデータの取得とレコードの更新または削除の両方において、ビジネス ロジック レイヤーから直接 DataList にデータをバインドする必要があります。
- DataList に GridView 固有の編集および削除機能がない場合に、ページで単一の ObjectDataSource コントロールを使用して選択、更新、および削除を行う場合、独自に追加できない理由はありません。 この方法では、GridView の例と同様に ObjectDataSource を使用しますが、DataList イベント
UpdateCommand
のイベント ハンドラーを作成し、ObjectDataSource のパラメーターを設定してそのメソッドをUpdate()
呼び出す必要があります。 - 選択に ObjectDataSource コントロールを使用するが、オプション 2 を使用する場合は BLL に対して直接更新および削除 を行う場合は、イベントに少しコードを
UpdateCommand
記述し、パラメーター値などを割り当てる必要があります。 代わりに、ObjectDataSource を使用して選択できますが、BLL に対して直接呼び出しを更新および削除します (オプション 1 のように)。 私の意見では、BLLと直接対話してデータを更新すると、ObjectDataSourceをUpdateParameters
割り当ててそのUpdate()
メソッドを呼び出すよりも読みやすいコードが得られます。 - 複数の ObjectDataSources で宣言的手段を使用する 前の 3 つのアプローチはすべて、少しのコードを必要とします。 できるだけ多くの宣言構文を使用し続ける場合、最終的なオプションは、ページに複数の ObjectDataSources を含める方法です。 最初の ObjectDataSource は、BLL からデータを取得し、DataList にバインドします。 更新の場合、別の ObjectDataSource が追加されますが、DataList 内
EditItemTemplate
に直接追加されます。 サポートの削除を含めるには、 にItemTemplate
もう 1 つの ObjectDataSource が必要です。 この方法では、これらの埋め込み ObjectDataSource を使用ControlParameters
して、ObjectDataSource のパラメーターをユーザー入力コントロールに宣言的にバインドします (DataList のUpdateCommand
イベント ハンドラーでプログラムで指定する必要が生じるのではなく)。 この方法では、埋め込み ObjectDataSource またはUpdate()
Delete()
コマンドを呼び出す必要がありますが、他の 3 つの方法よりもはるかに少ないコードが必要です。 ここでの欠点は、複数の ObjectDataSource がページを乱雑にし、全体的な読みやすさを損なうことです。
これらの方法のいずれかを使用することを強制された場合は、オプション 1 を選択します。これは、最も柔軟性が高く、DataList がこのパターンに対応するように最初に設計されているためです。 DataList は、ASP.NET 2.0 データ ソース コントロールと連携するように拡張されましたが、公式の ASP.NET 2.0 データ Web コントロール (GridView、DetailsView、FormView) のすべての機能拡張ポイントまたは機能を備えているわけではありません。 しかし、オプション2から4はメリットがありません。
このチュートリアルと今後の編集と削除のチュートリアルでは、表示するデータを取得するための ObjectDataSource を使用し、BLL を呼び出してデータを更新および削除します (オプション 3)。
手順 3: DataList の追加とその ObjectDataSource の構成
このチュートリアルでは、製品情報を一覧表示する DataList を作成し、製品ごとに、ユーザーに名前と価格を編集し、製品を完全に削除する機能を提供します。 特に、ObjectDataSource を使用して表示するレコードを取得しますが、BLL と直接インターフェイスすることで更新アクションと削除アクションを実行します。 DataList に対する編集機能と削除機能の実装について心配する前に、まず、読み取り専用インターフェイスで製品を表示するページを取得しましょう。 前のチュートリアルでこれらの手順を確認したので、すぐに実行します。
まず、フォルダー内の Basics.aspx
ページを EditDeleteDataList
開き、デザイン ビューから DataList をページに追加します。 次に、DataList のスマート タグから、新しい ObjectDataSource を作成します。 製品データを使用しているので、 クラスを使用 ProductsBLL
するように構成します。 すべての製品を取得するには、[SELECT] タブでメソッドを選択GetProducts()
します。
図 4: クラスを使用するように ObjectDataSource を構成する ProductsBLL
(クリックするとフルサイズの画像が表示されます)
図 5: メソッドを使用して製品情報を GetProducts()
返す (クリックするとフルサイズの画像が表示されます)
DataList は、GridView と同様に、新しいデータを挿入するようには設計されていません。そのため、[挿入] タブのドロップダウン リストから [(なし)] オプションを選択します。更新と削除は BLL を介してプログラムによって実行されるため、[UPDATE] タブと [DELETE] タブにも [なし] を選択します。
図 6: ObjectDataSource の INSERT タブ、UPDATE タブ、DELETE タブの Drop-Down Lists が [(なし)] に設定されていることを確認します (フルサイズの画像を表示するには、ここをクリックします)
ObjectDataSource を構成したら、[完了] をクリックし、Designerに戻ります。 過去の例で説明したように、ObjectDataSource 構成を完了すると、Visual Studio によって DropDownList の が ItemTemplate
自動的に作成され、各データ フィールドが表示されます。 これを ItemTemplate
、製品の名前と価格のみを表示する値に置き換えます。 また、 プロパティを RepeatColumns
2 に設定します。
注意
「 データの挿入、更新、および削除の概要 」のチュートリアルで説明したように、ObjectDataSource を使用してデータを変更する場合、このアーキテクチャでは、ObjectDataSource の宣言型マークアップから プロパティを削除 OldValuesParameterFormatString
する (または既定値 {0}
にリセットする) 必要があります。 ただし、このチュートリアルでは、データの取得にのみ ObjectDataSource を使用しています。 したがって、ObjectDataSource の OldValuesParameterFormatString
プロパティ値を変更する必要はありません (ただし、変更しても問題ありません)。
既定の DataList をカスタマイズした DataList ItemTemplate
に置き換えると、ページ上の宣言型マークアップは次のようになります。
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" RepeatColumns="2">
<ItemTemplate>
<h5>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>'></asp:Label>
</h5>
Price: <asp:Label runat="server" ID="Label1"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
<br />
<br />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetProducts" TypeName="ProductsBLL"
OldValuesParameterFormatString="original_{0}">
</asp:ObjectDataSource>
ブラウザーを使用して進行状況を確認してください。 図 7 に示すように、DataList には、各製品の製品名と単価が 2 つの列に表示されます。
図 7: 製品の名前と価格が Two-Column DataList に表示される (フルサイズの画像を表示する をクリックします)
注意
DataList には、更新および削除プロセスに必要なプロパティが多数あり、これらの値はビューステートに格納されます。 したがって、データの編集または削除をサポートする DataList を作成する場合は、DataList のビューステートを有効にすることが不可欠です。
Astute リーダーは、編集可能な GridView、DetailsViews、および FormViews を作成するときにビューステートを無効にできたことを思い出す場合があります。 これは、ASP.NET 2.0 Web コントロールに コントロールの状態が含まれる可能性があるためです。これは、ビューステートなどのポストバック全体で保持される状態ですが、必須と見なされるためです。
GridView でビュー ステートを無効にすると、単純な状態情報が省略されるだけで、コントロールの状態 (編集と削除に必要な状態が含まれます) が維持されます。 DataList は、ASP.NET 1.x の時間枠で作成されているため、制御状態を利用しないため、ビューステートを有効にする必要があります。 コントロール状態の目的と ビューステート との違いについて詳しくは、「コントロールの状態と表示状態」をご覧ください。
手順 4: 編集ユーザー インターフェイスを追加する
GridView コントロールは、フィールドのコレクション (BoundFields、CheckBoxFields、TemplateFields など) で構成されます。 これらのフィールドは、モードに応じてレンダリングされたマークアップを調整できます。 たとえば、読み取り専用モードの場合、BoundField はデータ フィールドの値をテキストとして表示します。編集モードでは、プロパティにデータ フィールド値が割り当てられている TextBox Web コントロール Text
がレンダリングされます。
一方、DataList はテンプレートを使用してその項目をレンダリングします。 読み取り専用アイテムは を ItemTemplate
使用してレンダリングされますが、編集モードのアイテムは を EditItemTemplate
介してレンダリングされます。 この時点で、DataList には のみが含まれます ItemTemplate
。 項目レベルの編集機能をサポートするには、編集可能なアイテムに表示されるマークアップを含む を追加 EditItemTemplate
する必要があります。 このチュートリアルでは、製品名と単価を編集するために TextBox Web コントロールを使用します。
はEditItemTemplate
、宣言によって作成することも、Designerを使用して作成することもできます (DataList のスマート タグから [テンプレートの編集] オプションを選択します)。 [テンプレートの編集] オプションを使用するには、まずスマート タグの [テンプレートの編集] リンクをクリックし、ドロップダウン リストから項目を選択 EditItemTemplate
します。
図 8: DataList の操作を選択する (フルサイズのEditItemTemplate
画像を表示する場合はクリックします)
次に、「製品名: 」と「Price: 」と入力し、ツールボックスEditItemTemplate
から 2 つの TextBox コントロールをDesignerのインターフェイスにドラッグします。 TextBoxes ID
プロパティを と UnitPrice
にProductName
設定します。
図 9: 製品名と価格のテキスト ボックスを追加する (フルサイズの画像を表示する をクリックします)
対応する製品データ フィールド値を 2 つの TextBox のプロパティに Text
バインドする必要があります。 TextBoxes スマート タグから、[DataBindings の編集] リンクをクリックし、図 10 に示すように、適切なデータ フィールドを Text
プロパティに関連付けます。
注意
データ フィールドを UnitPrice
price TextBox フィールドText
にバインドする場合は、通貨値 ()、一般的な数値 ({0:C}
{0:N}
)、または書式設定を解除したままにできます。
図 10: および データ フィールドを TextBoxes のText
プロパティにバインドProductName
UnitPrice
する
図 10 の [DataBindings の編集] ダイアログ ボックスに、GridView または DetailsView の TemplateField または FormView のテンプレートを編集するときに表示される [双方向データ バインド] チェック ボックスが含 まれていない ことに注意してください。 双方向データバインド機能を使用すると、入力 Web コントロールに入力された値を、対応する ObjectDataSource に InsertParameters
自動的に割り当てたり、データを挿入または UpdateParameters
更新したりすることができました。 DataList では双方向のデータ バインドはサポートされていません。このチュートリアルの後半で説明します。ユーザーが変更を行い、データを更新する準備ができたら、これらの TextBoxes Text
プロパティにプログラムでアクセスし、その値を クラスのProductsBLL
適切なUpdateProduct
メソッドに渡す必要があります。
最後に、[更新] ボタンと [キャンセル] ボタンを に追加する EditItemTemplate
必要があります。 詳細 DataList を使用したマスター レコードの箇条書きの使用 に関するチュートリアルで説明したように、プロパティが設定されている Button、LinkButton、ImageButton CommandName
が Repeater または DataList 内からクリックされると、Repeater または DataList の ItemCommand
イベントが発生します。 DataList の場合、プロパティが特定の CommandName
値に設定されている場合は、追加のイベントも発生する可能性があります。 特別な CommandName
プロパティ値には、次のようなものがあります。
- Cancel はイベントを
CancelCommand
発生させます - 編集によってイベントが発生する
EditCommand
- Update によってイベントが発生する
UpdateCommand
これらのイベントは、イベントに加えてItemCommand
発生します。
2 つのボタン Web コントロールに EditItemTemplate
を追加します。1 つは CommandName
Update に設定され、もう 1 つは Cancel に設定されています。 これら 2 つの Button Web コントロールを追加すると、Designerは次のようになります。
図 11: [更新] ボタンと [キャンセル] ボタンを に EditItemTemplate
追加します (フルサイズの画像を表示する場合はクリックします)
完全な EditItemTemplate
DataList の宣言型マークアップは、次のようになります。
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ObjectDataSource1" RepeatColumns="2">
<ItemTemplate>
<h5>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>' />
</h5>
Price: <asp:Label runat="server" ID="Label1"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
<br />
<br />
</ItemTemplate>
<EditItemTemplate>
Product name:
<asp:TextBox ID="ProductName" runat="server"
Text='<%# Eval("ProductName") %>' /><br />
Price:
<asp:TextBox ID="UnitPrice" runat="server"
Text='<%# Eval("UnitPrice", "{0:C}") %>' /><br />
<br />
<asp:Button ID="UpdateProduct" runat="server"
CommandName="Update" Text="Update" />
<asp:Button ID="CancelUpdate" runat="server"
CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</asp:DataList>
手順 5: 編集モードにプラミングを追加する
この時点で、DataList には、その EditItemTemplate
を介して定義された編集インターフェイスがあります。ただし、現在、ユーザーが製品の情報を編集することを示すためにこのページにアクセスする方法はありません。 各製品に [編集] ボタンを追加する必要があります。このボタンをクリックすると、その DataList 項目が編集モードでレンダリングされます。 まず、Designerまたは宣言によって、 に [編集] ボタンItemTemplate
を追加します。 [編集] ボタンの CommandName
プロパティを [編集] に設定してください。
この [編集] ボタンを追加したら、ブラウザーを使用してページを表示します。 この追加により、各製品一覧に [編集] ボタンが含まれている必要があります。
図 12: [更新] ボタンと [キャンセル] ボタンを に EditItemTemplate
追加する (フルサイズの画像を表示する場合はクリックします)
ボタンをクリックするとポストバックが発生しますが、製品一覧は編集モード になりません 。 製品を編集可能にするには、次の作業を行う必要があります。
- DataList の
EditItemIndex
プロパティ を、 [編集] ボタンがクリックされたばかりの のDataListItem
インデックスに設定します。 - DataList にデータを再バインドします。 DataList が再レンダリングされると、
DataListItem
ItemIndex
DataListEditItemIndex
に対応する が を使用してEditItemTemplate
レンダリングされます。
[編集] ボタンをクリックすると DataList の EditCommand
イベントが発生するため、次のコードを使用して EditCommand
イベント ハンドラーを作成します。
protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
// Set the DataList's EditItemIndex property to the
// index of the DataListItem that was clicked
DataList1.EditItemIndex = e.Item.ItemIndex;
// Rebind the data to the DataList
DataList1.DataBind();
}
イベント ハンドラーは EditCommand
、2 番目の入力パラメーターとして型 DataListCommandEventArgs
のオブジェクトに渡されます。これには、[編集] ボタンがクリックされた への DataListItem
参照が含まれます (e.Item
)。 イベント ハンドラーは、最初に DataList をEditItemIndex
編集可能な DataListItem
の にItemIndex
設定してから、DataList の DataBind()
メソッドを呼び出して DataList にデータを再バインドします。
このイベント ハンドラーを追加した後、ブラウザーでページを見直します。 [編集] ボタンをクリックすると、クリックした製品が編集可能になります (図 13 を参照)。
図 13: [編集] ボタンをクリックすると、製品が編集可能になります (クリックするとフルサイズの画像が表示されます)
手順 6: ユーザーの変更を保存する
編集した製品の [更新] または [キャンセル] ボタンをクリックしても、この時点では何も実行されません。この機能を追加するには、DataList UpdateCommand
CancelCommand
と イベントのイベント ハンドラーを作成する必要があります。 まず、編集した製品の [キャンセル] ボタンをクリックし、DataList を編集前の状態に戻すタスクを実行するイベント ハンドラーを作成 CancelCommand
します。
DataList がそのすべての項目を読み取り専用モードでレンダリングするには、次の手順を実行する必要があります。
- DataList の
EditItemIndex
プロパティ を、存在しないDataListItem
インデックスのインデックスに設定します。-1
インデックスは から0
始まるためDataListItem
、安全な選択肢です。 - DataList にデータを再バインドします。 DataList に対応する es がないため
DataListItem
ItemIndex
、DataListEditItemIndex
全体が読み取り専用モードでレンダリングされます。
これらの手順は、次のイベント ハンドラー コードを使用して実行できます。
protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
// Set the DataList's EditItemIndex property to -1
DataList1.EditItemIndex = -1;
// Rebind the data to the DataList
DataList1.DataBind();
}
さらに、[キャンセル] ボタンをクリックすると、DataList が編集前の状態に戻ります。
最後に完了する必要があるイベント ハンドラーは、イベント ハンドラーです UpdateCommand
。 このイベント ハンドラーでは、次の操作を行う必要があります。
- プログラムを使用して、ユーザーが入力した製品名と価格、および編集された製品の
ProductID
にアクセスします。 - クラスで適切な
UpdateProduct
オーバーロードを呼び出して、更新プロセスをProductsBLL
開始します。 - DataList の
EditItemIndex
プロパティ を、存在しないDataListItem
インデックスのインデックスに設定します。-1
インデックスは から0
始まるためDataListItem
、安全な選択肢です。 - DataList にデータを再バインドします。 DataList に対応する es がないため
DataListItem
ItemIndex
、DataListEditItemIndex
全体が読み取り専用モードでレンダリングされます。
手順 1 と 2 は、ユーザーの変更を保存する責任があります。手順 3 と 4 では、変更が保存された後に DataList が編集前の状態に戻り、イベント ハンドラーで CancelCommand
実行された手順と同じです。
更新された製品名と価格を取得するには、 メソッドを使用 FindControl
して、 内 EditItemTemplate
の TextBox Web コントロールをプログラムで参照する必要があります。 また、編集した製品の ProductID
値を取得する必要があります。 最初に ObjectDataSource を DataList にバインドすると、Visual Studio によって DataList プロパティ DataKeyField
がデータ ソースの主キー値 (ProductID
) に割り当てられます。 この値は、DataList の DataKeys
コレクションから取得できます。 少し時間を取って、 プロパティが DataKeyField
実際に に設定されていることを確認してください ProductID
。
次のコードは、4 つの手順を実装します。
protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
// Read in the ProductID from the DataKeys collection
int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
// Read in the product name and price values
TextBox productName = (TextBox)e.Item.FindControl("ProductName");
TextBox unitPrice = (TextBox)e.Item.FindControl("UnitPrice");
string productNameValue = null;
if (productName.Text.Trim().Length > 0)
productNameValue = productName.Text.Trim();
decimal? unitPriceValue = null;
if (unitPrice.Text.Trim().Length > 0)
unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(),
System.Globalization.NumberStyles.Currency);
// Call the ProductsBLL's UpdateProduct method...
ProductsBLL productsAPI = new ProductsBLL();
productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID);
// Revert the DataList back to its pre-editing state
DataList1.EditItemIndex = -1;
DataList1.DataBind();
}
イベント ハンドラーは、まず、コレクションからDataKeys
編集された製品の をProductID
読み取ることによって開始します。 次に、 の EditItemTemplate
2 つの TextBox が参照され、productNameValue
ローカルText
変数と unitPriceValue
に格納されているプロパティが参照されます。 メソッドを Decimal.Parse()
使用して TextBox から値を UnitPrice
読み取り、入力した値に通貨記号が含まれている場合でも、値に Decimal
正しく変換できるようにします。
注意
および TextBoxes の値ProductName
UnitPrice
は、TextBoxes Text プロパティに値が指定されている場合にのみ productNameValue 変数と unitPriceValue 変数に割り当てられます。 それ以外の場合は、 の Nothing
値が変数に使用されます。この変数は、データベース NULL
値を使用してデータを更新する効果があります。 つまり、このコードでは、空の文字列をデータベース NULL
値に変換します。これは、GridView、DetailsView、および FormView コントロールの編集インターフェイスの既定の動作です。
値を読み取った後、 ProductsBLL
クラス s UpdateProduct
メソッドが呼び出され、製品の名前、価格、および が渡されます ProductID
。 イベント ハンドラーは、イベント ハンドラーとまったく同じロジックを使用して、DataList を編集前の状態に CancelCommand
戻すことによって完了します。
、CancelCommand
、および UpdateCommand
イベント ハンドラーがEditCommand
完了すると、訪問者は製品の名前と価格を編集できます。 図 14-16 は、この編集ワークフローの動作を示しています。
図 14: 最初にページにアクセスすると、すべての製品が Read-Only モードになります (フルサイズの画像を表示する 場合はクリックします)
図 15: 製品名または価格を更新するには、[編集] ボタンをクリックします (クリックするとフルサイズの画像が表示されます)
図 16: 値を変更した後、[更新] をクリックして Read-Only モードに戻ります (フルサイズの画像を表示するにはクリックします)
手順 7: 削除機能の追加
DataList に削除機能を追加する手順は、編集機能を追加する手順と似ています。 要するに、クリックしたときに削除ボタンを ItemTemplate
追加する必要があります。
- コレクションを介して、対応する製品を
ProductID
DataKeys
読み取ります。 - クラス s
DeleteProduct
メソッドを呼び出して削除をProductsBLL
実行します。 - データを DataList に再バインドします。
まず、 に [削除] ボタンを ItemTemplate
追加します。
クリックすると、Edit、Update、または Cancel を持つ CommandName
Button によって、追加のイベントと共に DataList イベント ItemCommand
が発生します (たとえば、Edit EditCommand
を使用するとイベントも発生します)。 同様に、プロパティが Delete に設定されている DataList CommandName
内の Button、LinkButton、または ImageButton では、イベントが DeleteCommand
発生します (と共 ItemCommand
に)。
の [編集] ボタンの横にある [削除] ボタンを ItemTemplate
追加し、そのプロパティを CommandName
Delete に設定します。 このボタン コントロールを追加すると、DataList の ItemTemplate
宣言構文は次のようになります。
<ItemTemplate>
<h5>
<asp:Label runat="server" ID="ProductNameLabel"
Text='<%# Eval("ProductName") %>' />
</h5>
Price: <asp:Label runat="server" ID="Label1"
Text='<%# Eval("UnitPrice", "{0:C}") %>' />
<br />
<asp:Button runat="server" id="EditProduct" CommandName="Edit"
Text="Edit" />
<asp:Button runat="server" id="DeleteProduct" CommandName="Delete"
Text="Delete" />
<br />
<br />
</ItemTemplate>
次に、次のコードを使用して、DataList イベントの DeleteCommand
イベント ハンドラーを作成します。
protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
// Read in the ProductID from the DataKeys collection
int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
// Delete the data
ProductsBLL productsAPI = new ProductsBLL();
productsAPI.DeleteProduct(productID);
// Rebind the data to the DataList
DataList1.DataBind();
}
[削除] ボタンをクリックするとポストバックが発生し、DataList イベント DeleteCommand
が発生します。 イベント ハンドラーでは、クリックした製品の ProductID
値にコレクションから DataKeys
アクセスします。 次に、クラス s DeleteProduct
メソッドを呼び出して製品をProductsBLL
削除します。
製品を削除した後は、DataList (DataList1.DataBind()
) にデータを再バインドすることが重要です。そうしないと、DataList は削除された製品を引き続き表示します。
まとめ
DataList にはポイントがなく、GridView で利用できるサポートの編集と削除をクリックする必要はありませんが、短いコードでこれらの機能を含むように拡張できます。 このチュートリアルでは、削除可能で名前と価格を編集できる製品の 2 列の一覧を作成する方法について説明しました。 編集と削除のサポートの追加は、 と EditItemTemplate
にItemTemplate
適切な Web コントロールを含めること、対応するイベント ハンドラーの作成、ユーザー入力と主キーの値の読み取り、ビジネス ロジック レイヤーとの対話の問題です。
DataList に基本的な編集機能と削除機能を追加していますが、より高度な機能はありません。 たとえば、入力フィールドの検証はありません。ユーザーが価格が高すぎる場合、コストが高すぎる Decimal
を に変換しようとすると、 によってDecimal.Parse
例外がスローされます。 同様に、ビジネス ロジックまたはデータ アクセス層でのデータの更新に問題がある場合、ユーザーには標準エラー画面が表示されます。 [削除] ボタンに何らかの確認がなければ、誤って製品を削除する可能性が高すぎます。
今後のチュートリアルでは、編集ユーザー エクスペリエンスを向上させる方法について説明します。
プログラミングに満足!
著者について
7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は、Zack Jones、Ken Pespisa、Randy Schmidt でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、 にmitchell@4GuysFromRolla.com行をドロップしてください。
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示