DataList のデータの編集と削除の概要 (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

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

チュートリアルの ASP.NET ページを追加する

図 1: チュートリアルの ASP.NET ページを追加する

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

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 の編集と削除のチュートリアルの項目が含まれるようになりました。

サイト マップに DataList の編集と削除に関するチュートリアルのエントリが含まれるようになりました

図 3: サイト マップに DataList の編集と削除に関するチュートリアルのエントリが含まれるようになりました

手順 2: データの更新と削除の手法を調べる

GridView を使用したデータの編集と削除は非常に簡単です。これは、GridView と ObjectDataSource が連携して機能するためです。 「 挿入、更新、および削除に関連するイベントを調べる 」チュートリアルで説明したように、行の [更新] ボタンがクリックされると、GridView は、双方向データバインドを使用したフィールドを ObjectDataSource のコレクションに UpdateParameters 自動的に割り当て、その ObjectDataSource の Update() メソッドを呼び出します。

残念ながら、DataList には、この組み込み機能はありません。 ユーザーの値が ObjectDataSource のパラメーターに割り当てられ、その Update() メソッドが呼び出されるようにする必要があります。 この取り組みを支援するために、DataList には次のプロパティとイベントが用意されています。

  • プロパティをDataKeyField更新または削除するときは、DataList 内の各項目を一意に識別できる必要があります。 このプロパティを、表示されるデータの主キー フィールドに設定します。 これにより、DataList のコレクションに、各 DataList DataKeys アイテムの指定したDataKeyField値が設定されます。
  • イベントはEditCommand、プロパティが Edit に設定されている Button、LinkButton、または ImageButton CommandName がクリックされたときに発生します。
  • イベントはCancelCommand、プロパティが Cancel に設定されている Button、LinkButton、または ImageButton CommandName がクリックされたときに発生します。
  • イベントはUpdateCommand、プロパティが Update に設定されている Button、LinkButton、または ImageButton CommandName がクリックされたときに発生します。
  • イベントはDeleteCommand、プロパティが Delete に設定されている Button、LinkButton、または ImageButton CommandName がクリックされたときに発生します。

これらのプロパティとイベントを使用して、DataList からデータを更新および削除するには、次の 4 つの方法を使用できます。

  1. ASP.NET 1.x 手法を使用すると 、DataList は ASP.NET 2.0 および ObjectDataSources より前に存在し、プログラムによる方法でデータを完全に更新および削除できました。 この手法では、ObjectDataSource を完全に削除するため、表示するデータの取得とレコードの更新または削除の両方において、ビジネス ロジック レイヤーから直接 DataList にデータをバインドする必要があります。
  2. DataList に GridView 固有の編集および削除機能がない場合に、ページで単一の ObjectDataSource コントロールを使用して選択、更新、および削除を行う場合、独自に追加できない理由はありません。 この方法では、GridView の例と同様に ObjectDataSource を使用しますが、DataList イベント UpdateCommand のイベント ハンドラーを作成し、ObjectDataSource のパラメーターを設定してそのメソッドを Update() 呼び出す必要があります。
  3. 選択に ObjectDataSource コントロールを使用するが、オプション 2 を使用する場合は BLL に対して直接更新および削除 を行う場合は、イベントに少しコードを UpdateCommand 記述し、パラメーター値などを割り当てる必要があります。 代わりに、ObjectDataSource を使用して選択できますが、BLL に対して直接呼び出しを更新および削除します (オプション 1 のように)。 私の意見では、BLLと直接対話してデータを更新すると、ObjectDataSourceを UpdateParameters 割り当ててその Update() メソッドを呼び出すよりも読みやすいコードが得られます。
  4. 複数の 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()します。

ProductsBLL クラスを使用するように ObjectDataSource を構成する

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

GetProducts() メソッドを使用して製品情報を返す

図 5: メソッドを使用して製品情報を GetProducts() 返す (クリックするとフルサイズの画像が表示されます)

DataList は、GridView と同様に、新しいデータを挿入するようには設計されていません。そのため、[挿入] タブのドロップダウン リストから [(なし)] オプションを選択します。更新と削除は BLL を介してプログラムによって実行されるため、[UPDATE] タブと [DELETE] タブにも [なし] を選択します。

ObjectDataSource の INSERT、UPDATE、DELETE タブの Drop-Down Lists が [(なし)] に設定されていることを確認します

図 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 つの列に表示されます。

製品の名前と価格は、Two-Column DataList に表示されます

図 7: 製品の名前と価格が Two-Column DataList に表示される (フルサイズの画像を表示する をクリックします)

注意

DataList には、更新および削除プロセスに必要なプロパティが多数あり、これらの値はビュー ステートに格納されます。 したがって、データの編集または削除をサポートする DataList を構築する場合は、DataList のビューステートを有効にすることが不可欠です。

astute リーダーは、編集可能な GridViews、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 します。

DataList の EditItemTemplate を使用することを選択する

図 8: DataList の EditItemTemplate 操作を選択する (クリックするとフルサイズの画像が表示されます)

次に、「製品名: 」と「Price: 」と入力し、ツールボックスからDesignerのインターフェイスに EditItemTemplate 2 つの TextBox コントロールをドラッグします。 TextBoxes ID プロパティを および UnitPriceにProductName設定します。

製品名と価格のテキスト ボックスを追加する

図 9: 製品名と価格のテキスト ボックスを追加する (フルサイズの画像を表示する をクリックします)

対応する製品データ フィールド値を 2 つの TextBox のプロパティに Text バインドする必要があります。 図 10 に示すように、TextBoxes スマート タグから [DataBindings の編集] リンクをクリックし、適切なデータ フィールドを Text プロパティに関連付けます。

注意

データ フィールドを UnitPrice price TextBox のTextフィールドにバインドする場合は、通貨値 ()、一般的な数値 ({0:C}{0:N})、または書式設定を解除したままにできます。

ProductName および UnitPrice データ フィールドを TextBoxes の Text プロパティにバインドする

図 10: および データ フィールドをテキスト ボックスのTextプロパティにバインドProductNameUnitPriceする

図 10 の [DataBindings の編集] ダイアログ ボックスに、GridView または DetailsView の TemplateField または FormView のテンプレートを編集するときに表示される [双方向データ バインド] チェック ボックスが含 まれていない ことに注意してください。 双方向データ バインド機能を使用すると、入力 Web コントロールに入力された値を、対応する ObjectDataSource に InsertParameters 自動的に割り当てたり、データの挿入または UpdateParameters 更新を行ったりすることができました。 このチュートリアルの後半で説明するように、DataList では双方向のデータ バインドはサポートされていません。ユーザーが変更を行い、データを更新する準備ができたら、これらの TextBoxes Text プロパティにプログラムでアクセスし、その値を クラスのProductsBLL適切なUpdateProductメソッドに渡す必要があります。

最後に、 に [更新] ボタンと [キャンセル] ボタンを追加する EditItemTemplate必要があります。 「 マスター/詳細: Details DataList でマスター レコードの箇条書きリストを使用する 」チュートリアルで説明したように、プロパティが設定されている Button、LinkButton、または ImageButton CommandName が Repeater または DataList 内からクリックされると、Repeater または DataList イベント ItemCommand が発生します。 DataList の場合、 プロパティが特定の CommandName 値に設定されている場合は、追加のイベントも発生する可能性があります。 特別な CommandName プロパティ値には、次のようなものがあります。

  • Cancel はイベントを CancelCommand 発生させます
  • 編集によってイベントが発生するEditCommand
  • Update によってイベントが発生するUpdateCommand

これらのイベントは、イベントに加えてItemCommand発生します。

2 つの Button Web コントロールに EditItemTemplate を追加します。1 つは CommandName Update に設定され、もう 1 つは Cancel に設定されています。 これら 2 つの Button Web コントロールを追加すると、Designerは次のようになります。

[更新] ボタンと [キャンセル] ボタンが追加された DataList EditItemTemplate を示すスクリーンショット。

図 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 プロパティを [編集] に設定してください。

この [編集] ボタンを追加したら、ブラウザーを使用してページを表示します。 この追加により、各製品一覧に [編集] ボタンが含まれている必要があります。

[編集] ボタンが追加された DataList EditItemTemplate を示すスクリーンショット。

図 12: [更新] ボタンと [キャンセル] ボタンを に EditItemTemplate 追加する (クリックするとフルサイズの画像が表示されます)

ボタンをクリックするとポストバックが発生しますが、製品一覧は編集モード になりません 。 製品を編集可能にするには、次の作業を行う必要があります。

  1. DataList の EditItemIndex プロパティ を、クリックしたばかりの [編集] DataListItem ボタンのインデックスに設定します。
  2. DataList にデータを再バインドします。 DataList が再レンダリングされると、 DataListItemItemIndex DataList に EditItemIndex 対応する が を EditItemTemplate使用してレンダリングされます。

[編集] ボタンをクリックすると DataList の EditCommand イベントが発生するため、次のコードを使用して EditCommand イベント ハンドラーを作成します。

Protected Sub DataList1_EditCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.EditCommand
    ' 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()
End Sub

イベント ハンドラーは EditCommand 、2 番目の入力パラメーターとして型 DataListCommandEventArgs のオブジェクトに渡されます。これには、編集ボタンがクリックされた への参照 DataListItem が含まれます (e.Item)。 イベント ハンドラーは、最初に DataList をEditItemIndex編集可能な DataListItem の にItemIndex設定してから、DataList の DataBind() メソッドを呼び出して DataList にデータを再バインドします。

このイベント ハンドラーを追加した後、ブラウザーでページを見直します。 [編集] ボタンをクリックすると、クリックした製品が編集可能になります (図 13 を参照)。

[編集] ボタンをクリックすると、製品が編集可能になります

図 13: [編集] ボタンをクリックすると、製品が編集可能になります (クリックするとフルサイズの画像が表示されます)

手順 6: ユーザーの変更を保存する

編集した製品の [更新] ボタンまたは [キャンセル] ボタンをクリックしても、この時点では何も行われません。この機能を追加するには、DataList UpdateCommandCancelCommand と イベントのイベント ハンドラーを作成する必要があります。 まず、イベント ハンドラーを CancelCommand 作成します。これは、編集された製品の [キャンセル] ボタンがクリックされ、DataList を編集前の状態に戻すタスクを実行したときに実行されます。

DataList ですべての項目を読み取り専用モードでレンダリングするには、次の手順を実行する必要があります。

  1. DataList s EditItemIndex プロパティ を、存在しない DataListItem インデックスのインデックスに設定します。 -1インデックスは から0始まるためDataListItem、安全な選択肢です。
  2. DataList にデータを再バインドします。 DataList にEditItemIndex対応する es がないためDataListItemItemIndex、DataList 全体が読み取り専用モードでレンダリングされます。

これらの手順は、次のイベント ハンドラー コードを使用して実行できます。

Protected Sub DataList1_CancelCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.CancelCommand
    ' Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1
    ' Rebind the data to the DataList
    DataList1.DataBind()
End Sub

さらに、[キャンセル] ボタンをクリックすると、DataList が編集前の状態に戻ります。

最後に完了する必要があるイベント ハンドラーは、 UpdateCommand イベント ハンドラーです。 このイベント ハンドラーでは、次の操作を行う必要があります。

  1. プログラムによって、ユーザーが入力した製品名と価格、および編集された製品に ProductIDアクセスします。
  2. クラスで適切な UpdateProduct オーバーロードを呼び出して、更新プロセスを ProductsBLL 開始します。
  3. DataList s EditItemIndex プロパティ を、存在しない DataListItem インデックスのインデックスに設定します。 -1インデックスは から0始まるためDataListItem、安全な選択肢です。
  4. DataList にデータを再バインドします。 DataList にEditItemIndex対応する es がないためDataListItemItemIndex、DataList 全体が読み取り専用モードでレンダリングされます。

手順 1 と 2 は、ユーザーの変更を保存する責任があります。手順 3 と 4 では、変更が保存された後に DataList が事前編集状態に戻り、イベント ハンドラーで CancelCommand 実行された手順と同じです。

更新された製品名と価格を取得するには、 メソッドを FindControl 使用して、 内 EditItemTemplateの TextBox Web コントロールをプログラムで参照する必要があります。 また、編集された製品の ProductID 値を取得する必要があります。 最初に ObjectDataSource を DataList にバインドしたとき、Visual Studio は DataList の DataKeyField プロパティをデータ ソースの主キー値 (ProductID) に割り当てしました。 この値は、DataList の DataKeys コレクションから取得できます。 プロパティが 実際に に設定されていることを DataKeyField 確認してください ProductID。

次のコードでは、4 つの手順を実装します。

Protected Sub DataList1_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.UpdateCommand
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(DataList1.DataKeys(e.Item.ItemIndex))
    ' Read in the product name and price values
    Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
    Dim unitPrice As TextBox = CType(e.Item.FindControl("UnitPrice"), TextBox)
    Dim productNameValue As String = Nothing
    If productName.Text.Trim().Length > 0 Then
        productNameValue = productName.Text.Trim()
    End If
    Dim unitPriceValue As Nullable(Of Decimal) = Nothing
    If unitPrice.Text.Trim().Length > 0 Then
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(), NumberStyles.Currency)
    End If
    ' Call the ProductsBLL's UpdateProduct method...
    Dim productsAPI As New ProductsBLL()
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID)
    ' Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub

イベント ハンドラーは、まず、コレクションからDataKeys編集された製品の ProductID を読み取ることによって開始されます。 次に、 の EditItemTemplate 2 つの TextBox が参照され、productNameValueローカルText変数と unitPriceValueに格納されているプロパティが参照されます。 メソッドを Decimal.Parse() 使用して TextBox から値を UnitPrice 読み取り、入力した値に通貨記号がある場合でも値に Decimal 正しく変換できるようにします。

注意

および TextBoxes の値ProductNameUnitPriceは、TextBoxes Text プロパティに値が指定されている場合にのみ productNameValue 変数と unitPriceValue 変数に割り当てられます。 それ以外の場合は、 の Nothing 値が変数に使用されます。この変数は、データベース NULL 値を使用してデータを更新する効果があります。 つまり、このコードでは、空の文字列をデータベース NULL 値に変換します。これは、GridView、DetailsView、および FormView コントロールの編集インターフェイスの既定の動作です。

値を読み取った後、 ProductsBLL クラス s UpdateProduct メソッドが呼び出され、製品の名前、価格、および が渡されます ProductID。 イベント ハンドラーは、イベント ハンドラーとまったく同じロジックを使用して、DataList を編集前の状態に CancelCommand 戻すことによって完了します。

、CancelCommand、および UpdateCommand イベント ハンドラーがEditCommand完了すると、訪問者は製品の名前と価格を編集できます。 図 14-16 は、この編集ワークフローの動作を示しています。

ページに初めてアクセスすると、すべての製品が Read-Only モードになります

図 14: 最初にページにアクセスすると、すべての製品が Read-Only モードになります (フルサイズの画像を表示する 場合はクリックします)

製品名または価格を更新するには、[編集] ボタンをクリックします。

図 15: 製品名または価格を更新するには、[編集] ボタンをクリックします (クリックするとフルサイズの画像が表示されます)

値を変更した後、[更新] をクリックして Read-Only モードに戻ります

図 16: 値を変更した後、[更新] をクリックして Read-Only モードに戻ります (フルサイズの画像を表示するにはクリックします)

手順 7: 削除機能の追加

DataList に削除機能を追加する手順は、編集機能を追加する手順と似ています。 要するに、クリックしたときに削除ボタンを ItemTemplate 追加する必要があります。

  1. コレクションを介して、対応する製品をProductIDDataKeys読み取ります。
  2. クラス s DeleteProduct メソッドを呼び出して削除をProductsBLL実行します。
  3. データを 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 Sub DataList1_DeleteCommand(source As Object, e As DataListCommandEventArgs) _
    Handles DataList1.DeleteCommand
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(DataList1.DataKeys(e.Item.ItemIndex))
    ' Delete the data
    Dim productsAPI As New ProductsBLL()
    productsAPI.DeleteProduct(productID)
    ' Rebind the data to the DataList
    DataList1.DataBind()
End Sub

[削除] ボタンをクリックするとポストバックが発生し、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行をドロップしてください。

前へ次へ