DataList の編集インターフェイスをカスタマイズする (VB)

[アーティクル]
07/13/2023

このチュートリアルでは、DropDownLists と CheckBox を含む DataList のより豊富な編集インターフェイスを作成します。

はじめに

DataList の EditItemTemplate マークアップコントロールと Web コントロールは、編集可能なインターフェイスを定義します。これまでに調べた編集可能な DataList の例では、編集可能なインターフェイスは TextBox Web コントロールで構成されています。前のチュートリアルでは、検証コントロールを追加することで、編集時のユーザーエクスペリエンスを改善しました。

EditItemTemplateさらに、を展開して、DropDownLists、RadioButtonLists、Calendars などの TextBox 以外の Web コントロールを含めることができます。 TextBoxes と同様に、編集インターフェイスをカスタマイズして他の Web コントロールを含める場合は、次の手順を使用します。

Web コントロールをに追加します EditItemTemplate。
databinding 構文を使用して、対応するデータフィールド値を適切なプロパティに割り当てます。
イベントハンドラーで UpdateCommand 、プログラムによって Web コントロールの値にアクセスし、それを適切な BLL メソッドに渡します。

このチュートリアルでは、DropDownLists と CheckBox を含む DataList のより豊富な編集インターフェイスを作成します。特に、製品情報を一覧表示し、製品名、仕入先、カテゴリ、および廃止された状態を更新できるようにする DataList を作成します (図 1 を参照)。

図 1: 編集インターフェイスには、TextBox、2 つの DropDownList、および CheckBox が含まれています (フルサイズの画像を表示するには、ここをクリックします)

手順 1: 製品情報の表示

DataList の編集可能なインターフェイスを作成する前に、まず読み取り専用インターフェイスを構築する必要があります。まず、フォルダーからページをCustomizedUI.aspxEditDeleteDataList開き、Designerから DataList をページに追加し、そのIDプロパティをにProducts設定します。 DataList のスマートタグから、新しい ObjectDataSource を作成します。この新しい ObjectDataSource ProductsDataSource という名前を付け、クラスの GetProducts メソッドからデータをProductsBLL取得するように構成します。以前の編集可能な DataList チュートリアルと同様に、ビジネスロジックレイヤーに直接移動して、編集した製品の情報を更新します。したがって、[UPDATE]、[INSERT]、[DELETE] タブのドロップダウンリストを [(なし)] に設定します。

図 2: UPDATE、INSERT、および DELETE タブの Drop-Down Lists を (なし) に設定します (フルサイズの画像を表示するをクリックします)

ObjectDataSource を構成すると、Visual Studio によって DataList の既定値 ItemTemplate が作成され、返される各データフィールドの名前と値が一覧表示されます。 ItemTemplateテンプレートに要素内の製品名と、カテゴリ名、仕入先名<h4>、価格、および廃止された状態が一覧表示されるようにを変更します。さらに、[編集] ボタンを追加し、その CommandName プロパティが [編集] に設定されていることを確認します。私 ItemTemplate の宣言型マークアップは次のとおりです。

<ItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="DiscontinuedLabel" runat="server"
                    Text='<%# Eval("Discontinued") %>' />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="EditButton"
                    Text="Edit" CommandName="Edit" />
            </td>
        </tr>
    </table>
    <br />
</ItemTemplate>

上記のマークアップでは、製品名に h4 見出し、 <残りのフィールドに 4> 列 <table> を使用して製品情報がレイアウトされます。 ProductPropertyLabelおよび ProductPropertyValueStyles.cssで定義されている CSS クラスについては、前のチュートリアルで説明しました。図 3 は、ブラウザーで表示したときの進行状況を示しています。

図 3: 各製品の名前、仕入先、カテゴリ、廃止された状態、および価格が表示されている (フルサイズの画像を表示するをクリックします)。

手順 2: 編集インターフェイスに Web コントロールを追加する

カスタマイズされた DataList 編集インターフェイスを構築する最初の手順は、必要な Web コントロールをに追加することです EditItemTemplate。特に、カテゴリには DropDownList、仕入先にはもう 1 つ、廃止された状態の場合は CheckBox が必要です。この例では製品の価格は編集できないため、Label Web コントロールを使用して表示を続けることができます。

編集インターフェイスをカスタマイズするには、DataList のスマートタグから [テンプレートの編集] リンクをクリックし、ドロップダウンリストからオプションを選択 EditItemTemplate します。 DropDownList をに EditItemTemplate 追加し、そのを ID に設定します Categories。

図 4: カテゴリの DropDownList を追加する (クリックするとフルサイズの画像が表示されます)

次に、DropDownList のスマートタグから、[データソースの選択] オプションを選択し、という名前 CategoriesDataSourceの新しい ObjectDataSource を作成します。クラスの GetCategories() メソッドを使用するようにこの ObjectDataSource をCategoriesBLL構成します (図 5 を参照)。次に、DropDownList のデータソース構成ウィザードによって、各 ListItem プロパティと Value プロパティに使用するデータフィールドのText入力を求められます。図 6 に示すように、DropDownList にデータフィールドを表示 CategoryName させ、を値として使用 CategoryID します。

図 5: 名前付きの CategoriesDataSource 新しい ObjectDataSource を作成する (クリックするとフルサイズの画像が表示されます)

図 6: DropDownList の表示フィールドと値フィールドを構成する (クリックするとフルサイズの画像が表示されます)

この一連の手順を繰り返して、仕入先の DropDownList を作成します。この DropDownList のを ID に Suppliers 設定し、その ObjectDataSource という名前を付けます SuppliersDataSource。

2 つの DropDownList を追加した後、廃止された状態の CheckBox と、製品名の TextBox を追加します。 ID CheckBox と TextBox の s をそれぞれと ProductNameにDiscontinued設定します。 RequiredFieldValidator を追加して、ユーザーが製品名の値を確実に指定できるようにします。

最後に、[更新] ボタンと [キャンセル] ボタンを追加します。これら 2 つのボタンでは、それぞれの CommandName プロパティが Update と Cancel に設定されている必要があります。

あなたが好きな編集インターフェイスをレイアウトすること自由に感じます。次の宣言構文とスクリーンショットが示すように、読み取り専用インターフェイスから同じ 4 列 <table> レイアウトを使用することを選択しました。

<EditItemTemplate>
    <h4>
        <asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' />
    </h4>
    <table border="0">
        <tr>
            <td class="ProductPropertyLabel">Name:</td>
            <td colspan="3" class="ProductPropertyValue">
                <asp:TextBox runat="server" ID="ProductName" Width="90%" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                    ControlToValidate="ProductName"
                    ErrorMessage="You must enter a name for the product."
                    runat="server">*</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Category:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Categories" runat="server"
                    DataSourceID="CategoriesDataSource"
                    DataTextField="CategoryName" DataValueField="CategoryID" />
            </td>
            <td class="ProductPropertyLabel">Supplier:</td>
            <td class="ProductPropertyValue">
                <asp:DropDownList ID="Suppliers"
                    DataSourceID="SuppliersDataSource" DataTextField="CompanyName"
                    DataValueField="SupplierID" runat="server" />
            </td>
        </tr>
        <tr>
            <td class="ProductPropertyLabel">Discontinued:</td>
            <td class="ProductPropertyValue">
                <asp:CheckBox runat="server" id="Discontinued" />
            </td>
            <td class="ProductPropertyLabel">Price:</td>
            <td class="ProductPropertyValue">
                <asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <asp:Button runat="Server" ID="UpdateButton" CommandName="Update"
                    Text="Update" />
                 
                <asp:Button runat="Server" ID="CancelButton" CommandName="Cancel"
                    Text="Cancel" CausesValidation="False" />
            </td>
        </tr>
    </table>
    <br />
    <asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetCategories"
        TypeName="CategoriesBLL">
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetSuppliers"
        TypeName="SuppliersBLL">
    </asp:ObjectDataSource>
</EditItemTemplate>

図 7: 編集インターフェイスは、Read-Only インターフェイスと同様にレイアウトされています (フルサイズの画像を表示するをクリックします)

手順 3: EditCommand イベントハンドラーと CancelCommand イベントハンドラーを作成する

現在、にはデータバインド構文EditItemTemplateはありません (からItemTemplate逐語的にコピーされたを除くUnitPriceLabel)。データバインド構文を一時的に追加しますが、最初に DataList EditCommandCancelCommand とイベントのイベントハンドラーを作成します。イベントハンドラーの EditCommand 役割は、[編集] ボタンがクリックされた DataList アイテムの編集インターフェイスをレンダリングすることです。一方 CancelCommand 、そのジョブは DataList を編集前の状態に戻す作業です。

これら 2 つのイベントハンドラーを作成し、次のコードを使用させます。

Protected Sub Products_EditCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.EditCommand
    ' Set the DataList's EditItemIndex property to the
    ' index of the DataListItem that was clicked
    Products.EditItemIndex = e.Item.ItemIndex
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub
Protected Sub Products_CancelCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.CancelCommand
    ' Set the DataList's EditItemIndex property to -1
    Products.EditItemIndex = -1
    ' Rebind the data to the DataList
    Products.DataBind()
End Sub

これら 2 つのイベントハンドラーを配置すると、[編集] ボタンをクリックすると編集インターフェイスが表示され、[キャンセル] ボタンをクリックすると、編集されたアイテムが読み取り専用モードに戻ります。図 8 は、Chef Anton s Gumbo Mix の [編集] ボタンがクリックされた後の DataList を示しています。編集インターフェイスにデータバインド構文をまだ追加していないため、ProductNameTextBox は空白、DiscontinuedCheckBox はオフ、および DropDownLists から選択された最初のCategoriesSuppliers項目は空白です。

図 8: [編集] ボタンをクリックすると、編集インターフェイスが表示されます (クリックするとフルサイズの画像が表示されます)

手順 4: 編集インターフェイスに DataBinding 構文を追加する

編集インターフェイスに現在の製品の値を表示するには、データバインド構文を使用して、データフィールドの値を適切な Web コントロール値に割り当てる必要があります。 [テンプレートの編集] 画面に移動し、Web コントロールのスマートタグから [DataBindings の編集] リンクを選択することで、データバインド構文をDesignerに適用できます。または、データバインド構文を宣言型マークアップに直接追加することもできます。

データフィールドのProductName値を TextBox の Text プロパティにProductName割り当て、CategoryIDデータ SupplierID フィールドの値を SuppliersCategories および DropDownLists SelectedValue プロパティに割り当て、Discontinuedデータフィールドの値を CheckBox プロパティCheckedにDiscontinued割り当てます。これらの変更を行った後、Designerまたは宣言型マークアップを使用して直接、ブラウザーを使用してページを再表示し、Chef Anton s Gumbo Mix の [編集] ボタンをクリックします。図 9 に示すように、データバインド構文では、現在の値が TextBox、DropDownLists、CheckBox に追加されています。

図 9: [編集] ボタンをクリックすると、編集インターフェイスが表示されます (クリックするとフルサイズの画像が表示されます)

手順 5: UpdateCommand イベントハンドラーにユーザーの変更を保存する

ユーザーが製品を編集して [更新] ボタンをクリックすると、ポストバックが発生し、DataList の UpdateCommand イベントが発生します。イベントハンドラーでは、およびの Web コントロール EditItemTemplate から BLL とのインターフェイスから値を読み取り、データベース内の製品を更新する必要があります。前のチュートリアルで見たように、 ProductID 更新された製品のにはコレクションから DataKeys アクセスできます。次のコードに示すように、ユーザーが入力したフィールドにアクセスするには、を使用して FindControl("controlID")Web コントロールをプログラムで参照します。

Protected Sub Products_UpdateCommand(source As Object, e As DataListCommandEventArgs) _
    Handles Products.UpdateCommand
    If Not Page.IsValid Then
        Exit Sub
    End If
    ' Read in the ProductID from the DataKeys collection
    Dim productID As Integer = Convert.ToInt32(Products.DataKeys(e.Item.ItemIndex))
    ' Read in the product name and price values
    Dim productName As TextBox = CType(e.Item.FindControl("ProductName"), TextBox)
    Dim categories As DropDownList=CType(e.Item.FindControl("Categories"), DropDownList)
    Dim suppliers As DropDownList = CType(e.Item.FindControl("Suppliers"), DropDownList)
    Dim discontinued As CheckBox = CType(e.Item.FindControl("Discontinued"), CheckBox)
    Dim productNameValue As String = Nothing
    If productName.Text.Trim().Length > 0 Then
        productNameValue = productName.Text.Trim()
    End If
    Dim categoryIDValue As Integer = Convert.ToInt32(categories.SelectedValue)
    Dim supplierIDValue As Integer = Convert.ToInt32(suppliers.SelectedValue)
    Dim discontinuedValue As Boolean = discontinued.Checked
    ' Call the ProductsBLL's UpdateProduct method...
    Dim productsAPI As New ProductsBLL()
    productsAPI.UpdateProduct(productNameValue, categoryIDValue, supplierIDValue, _
        discontinuedValue, productID)
    ' Revert the DataList back to its pre-editing state
    Products.EditItemIndex = -1
    Products.DataBind()
End Sub

このコードは、ページ上のすべての検証コントロールが有効であることを確認するために、プロパティに相談 Page.IsValid することから始まります。がの場合Page.IsValid、編集された製品のProductID値がコレクションからDataKeys読み取られ、内のデータエントリ Web コントロールがプログラムによってEditItemTemplate参照Trueされます。次に、これらの Web コントロールの値が変数に読み取られた後、適切な UpdateProduct オーバーロードに渡されます。データを更新すると、DataList は編集前の状態に戻されます。

注意

コードとこの例に重点を置くために、 BLL と DAL-Level 例外の処理に関するチュートリアルで追加された例外処理ロジックを省略しました。演習として、このチュートリアルを完了した後にこの機能を追加します。

手順 6: NULL CategoryID と SupplierID 値の処理

Northwind データベースでは、テーブルとSupplierIDCategoryID列の値をProducts使用できますNULL。ただし、現在、編集インターフェイスは値に対応 NULL していません。または列のいずれかのSupplierIDCategoryID値を持つNULL製品を編集しようとすると、ArgumentOutOfRangeException次のようなエラーメッセージが表示されます。 'Categories' には SelectedValue がありますが、項目の一覧に存在しないため無効です。また、現在、製品のカテゴリまたはサプライヤーの値を非NULL値から値に変更するNULL方法はありません。

カテゴリとサプライヤーの DropDownLists の値をサポート NULL するには、追加 ListItemのを追加する必要があります。私はこのListItemの値として(なし)をText使用することを選択しましたが、必要に応じて他の何か(空の文字列など)に変更することができます。最後に、忘れずに DropDownLists AppendDataBoundItems をに True設定してください。忘れた場合は、DropDownList にバインドされているカテゴリとサプライヤーによって、静的に追加された ListItemが上書きされます。

これらの変更を行った後、DataList の EditItemTemplate DropDownLists マークアップは次のようになります。

<asp:DropDownList ID="Categories" DataSourceID="CategoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"  runat="server"
    SelectedValue='<%# Eval("CategoryID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>
...
<asp:DropDownList ID="Suppliers" DataSourceID="SuppliersDataSource"
    DataTextField="CompanyName" DataValueField="SupplierID" runat="server"
    SelectedValue='<%# Eval("SupplierID") %>' AppendDataBoundItems="True">
    <asp:ListItem Value=" Selected="True">(None)</asp:ListItem>
</asp:DropDownList>

注意

静的 ListItem s は、Designerまたは宣言構文を使用して直接 DropDownList に追加できます。データベース NULL 値を表す DropDownList 項目を追加する場合は、必ず宣言構文を使用してを ListItem 追加してください。 Designerで Collection エディターを使用ListItemすると、生成された宣言構文では、空白の文字列が割り当てられると設定が完全に省略Valueされ、次のような宣言型マークアップが作成されます<asp:ListItem>(None)</asp:ListItem>。これは無害に見えるかもしれませんが、が見つからない Value と、DropDownList がその場所でプロパティ値を Text 使用します。つまり、これを NULLListItem 選択すると、値 (None) が製品データフィールド (CategoryID または SupplierIDこのチュートリアルでは ) に割り当てられ、例外が発生します。を明示的に設定Value=""NULLすると、が選択されたときにNULLListItem、製品データフィールドに値が割り当てられます。

ブラウザーを使用して進行状況を確認してください。製品を編集する場合、DropDownList Suppliers と DropDownList の両方に、DropDownList の先頭に (None) オプションがあることにCategories注意してください。

図 10: Categories および Suppliers DropDownLists には、(なし) オプションが含まれています (フルサイズの画像を表示する場合はクリックします)

(None) オプションをデータベース NULL 値として保存するには、イベントハンドラーに UpdateCommand 戻る必要があります。 categoryIDValue変数と supplierIDValue 変数を null 許容の整数に変更し、DropDownList がSelectedValue空の文字列でない場合にのみ値Nothingを割り当てます。

Dim categoryIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(categories.SelectedValue) Then
    categoryIDValue = Convert.ToInt32(categories.SelectedValue)
End If
Dim supplierIDValue As Nullable(Of Integer) = Nothing
If Not String.IsNullOrEmpty(suppliers.SelectedValue) Then
    supplierIDValue = Convert.ToInt32(suppliers.SelectedValue)
End If

この変更により、ユーザーがいずれかのドロップダウンリストから (なし) オプションを選択した場合、データベース値にUpdateProduct対応するの値Nothingが BLL メソッドにNULL渡されます。

まとめ

このチュートリアルでは、3 つの異なる入力 Web コントロール TextBox、2 つの DropDownList、CheckBox と検証コントロールを含む、より複雑な DataList 編集インターフェイスを作成する方法について説明しました。編集インターフェイスを構築する場合、使用されている Web コントロールに関係なく、手順は同じです。最初に、Web コントロールを DataList EditItemTemplateに追加します。databinding 構文を使用して、対応するデータフィールド値を適切な Web コントロールのプロパティに割り当てます。イベントハンドラーでは UpdateCommand 、Web コントロールとその適切なプロパティにプログラムでアクセスします。値を BLL に渡します。

編集インターフェイスを作成する場合は、TextBoxes だけで構成されているか、異なる Web コントロールのコレクションで構成されているかに関係なく、データベース NULL 値を正しく処理してください。を NULL 説明するときは、編集インターフェイスで既存 NULL の値を正しく表示するだけでなく、値をとして NULLマークする手段を提供することが不可欠です。 DataLists の DropDownLists の場合、通常は、プロパティがValue明示的に空の文字列 (Value="") に設定されている静的ListItemを追加し、イベントハンドラーにコードのビットを追加してUpdateCommand、 NULL``ListItem が選択されたかどうかを判断することを意味します。

プログラミングに満足!

著者について

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

特別な感謝

このチュートリアルシリーズは、多くの役に立つ校閲者によってレビューされました。このチュートリアルのリードレビュー担当者は、Dennis Patterson、David Suru、Randy Schmidt でした。今後の MSDN の記事を確認することに関心がありますか? その場合は、にmitchell@4GuysFromRolla.com行をドロップしてください。

[戻る]

Share via

DataList の編集インターフェイスをカスタマイズする (VB)

はじめに

手順 1: 製品情報の表示

手順 2: 編集インターフェイスに Web コントロールを追加する

手順 3: EditCommand イベントハンドラーと CancelCommand イベントハンドラーを作成する

手順 4: 編集インターフェイスに DataBinding 構文を追加する

手順 5: UpdateCommand イベントハンドラーにユーザーの変更を保存する

手順 6: NULL CategoryID と SupplierID 値の処理

まとめ

著者について

特別な感謝

フィードバック

フィードバック

その他のリソース

Share via

DataList の編集インターフェイスをカスタマイズする (VB)

はじめに

手順 1: 製品情報の表示

手順 2: 編集インターフェイスに Web コントロールを追加する

手順 3: EditCommand イベント ハンドラーと CancelCommand イベント ハンドラーを作成する

手順 4: 編集インターフェイスに DataBinding 構文を追加する

手順 5: UpdateCommand イベント ハンドラーにユーザーの変更を保存する

手順 6: NULL CategoryID と SupplierID 値の処理

まとめ

著者について

特別な感謝

フィードバック

フィードバック

その他のリソース

手順 3: EditCommand イベントハンドラーと CancelCommand イベントハンドラーを作成する

手順 5: UpdateCommand イベントハンドラーにユーザーの変更を保存する