データ項目と詳細を表示する

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

このチュートリアルシリーズでは、ASP.NET 4.7 と Microsoft Visual Studio 2017 を使用して ASP.NET Web Forms アプリケーションを構築する基本について説明します。

このチュートリアルでは、ASP.NET Web Formsと Entity Framework Code First を使用してデータ項目とデータ項目の詳細を表示する方法について説明します。このチュートリアルは、Wingtip Toy Store チュートリアルシリーズの一部として、前の "UI とナビゲーション" チュートリアルに基づいています。このチュートリアルを完了すると、 ProductsList.aspx ページに製品が表示され、 ProductDetails.aspx ページに製品の詳細が表示されます。

学習内容は次のとおりです。

データベースから製品を表示するデータコントロールを追加する
選択したデータにデータコントロールを接続する
データベースから製品の詳細を表示するデータコントロールを追加する
クエリ文字列から値を取得し、その値を使用してデータベースから取得されるデータを制限します

このチュートリアルで導入された機能:

モデルバインド
値プロバイダー

データコントロールを追加する

サーバーコントロールにデータをバインドするには、いくつかの異なるオプションを使用できます。最も一般的なものは次のとおりです。

データソースコントロールの追加
手動でのコードの追加
モデルバインドの使用

データソースコントロールを使用してデータをバインドする

データソースコントロールを追加すると、データを表示するコントロールにデータソースコントロールをリンクできます。この方法では、プログラムではなく、サーバー側のコントロールをデータソースに宣言的に接続できます。

手動でデータをバインドするコード

手動でのコーディングには、次の作業が含まれます。

値の読み取り
null かどうかを確認する
適切な型に変換する
変換の成功を確認する
クエリでの値の使用

この方法では、データアクセスロジックを完全に制御できます。

モデルバインドを使用してデータをバインドする

モデルバインドを使用すると、結果をはるかに少ないコードでバインドでき、アプリケーション全体で機能を再利用できます。これにより、豊富なデータバインディングフレームワークを提供しながら、コードに重点を置いたデータアクセスロジックの操作が簡素化されます。

製品の表示

このチュートリアルでは、モデルバインドを使用してデータをバインドします。モデルバインドを使用してデータを選択するようにデータコントロールを構成するには、コントロールのプロパティをページの SelectMethod コード内のメソッド名に設定します。データコントロールは、ページライフサイクルの適切なタイミングでメソッドを呼び出し、返されたデータを自動的にバインドします。メソッドを明示的に呼び出す DataBind 必要はありません。

ソリューションエクスプローラーで ProductList.aspx を開きます。

既存のマークアップを次のマークアップに置き換えます。

<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <section>
        <div>
            <hgroup>
                <h2><%: Page.Title %></h2>
            </hgroup>

            <asp:ListView ID="productList" runat="server" 
                DataKeyNames="ProductID" GroupItemCount="4"
                ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                <EmptyDataTemplate>
                    <table >
                        <tr>
                            <td>No data was returned.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <EmptyItemTemplate>
                    <td/>
                </EmptyItemTemplate>
                <GroupTemplate>
                    <tr id="itemPlaceholderContainer" runat="server">
                        <td id="itemPlaceholder" runat="server"></td>
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td runat="server">
                        <table>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                            width="100" height="75" style="border: solid" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                        <span>
                                            <%#:Item.ProductName%>
                                        </span>
                                    </a>
                                    <br />
                                    <span>
                                        <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                    </span>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                        </p>
                    </td>
                </ItemTemplate>
                <LayoutTemplate>
                    <table style="width:100%;">
                        <tbody>
                            <tr>
                                <td>
                                    <table id="groupPlaceholderContainer" runat="server" style="width:100%">
                                        <tr id="groupPlaceholder"></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr></tr>
                        </tbody>
                    </table>
                </LayoutTemplate>
            </asp:ListView>
        </div>
    </section>
</asp:Content>

このコードでは、という名前productListの ListView コントロールを使用して製品を表示します。

<asp:ListView ID="productList" runat="server"

テンプレートとスタイルを使用して、 ListView コントロールのデータの表示方法を定義します。これは、任意の繰り返し構造のデータに役立ちます。この ListView の例では単にデータベースデータを表示しますが、コードを使用せずに、ユーザーがデータを編集、挿入、削除したり、データを並べ替えたり、ページを表示したりすることもできます。

ListView コントロールでプロパティを設定ItemTypeすると、データバインディング式Itemを使用でき、コントロールが厳密に型指定されます。前のチュートリアルで説明したように、を指定するなど、IntelliSense を使用して Item オブジェクトの ProductName詳細を選択できます。

データ項目と詳細の表示 - IntelliSense

また、モデルバインドを使用して値を SelectMethod 指定しています。この値 (GetProducts) は、次の手順で製品を表示するために分離コードに追加するメソッドに対応します。

製品を表示するコードを追加する

この手順では、 ListView コントロールにデータベースの製品データを設定するコードを追加します。このコードでは、すべての製品と個々のカテゴリ製品の表示がサポートされています。

ソリューションエクスプローラーで ProductList.aspx を右クリックし、[コードの表示] を選択します。

ProductList.aspx.cs ファイル内の既存のコードを次のように置き換えます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;

namespace WingtipToys
{
    public partial class ProductList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId)
        {
            var _db = new WingtipToys.Models.ProductContext();
                IQueryable<Product> query = _db.Products;
                if (categoryId.HasValue && categoryId > 0)
                {
                    query = query.Where(p => p.CategoryID == categoryId);
                }
                return query;
        }
    }
}

このコードは、GetProductsListView コントロールItemTypeのプロパティが ProductList.aspx ページで参照するメソッドを示しています。結果を特定のデータベースカテゴリに制限するために、ProductList.aspx ページに移動したときに ProductList.aspx ページに渡されるクエリ文字列値の値を設定categoryIdします。名前空間の System.Web.ModelBinding クラスはQueryStringAttribute、クエリ文字列変数 idの値を取得するために使用されます。これにより、実行時にクエリ文字列からパラメーターに値をバインドするようにモデルバインドに categoryId 指示されます。

有効なカテゴリがクエリ文字列としてページに渡されると、クエリの結果は、値に一致 categoryId するデータベース内の製品に制限されます。たとえば、 ProductsList.aspx ページ URL が次の場合:

http://localhost/ProductList.aspx?id=1

ページには、が categoryId と等しい 1製品のみが表示されます。

ProductList.aspx ページが呼び出されたときにクエリ文字列が含まれていない場合は、すべての製品が表示されます。

これらのメソッドの値のソースは 、値プロバイダー ( QueryString など) と呼ばれ、使用する値プロバイダーを示すパラメーター 属性は、値プロバイダー属性 (など id) と呼ばれます。 ASP.NET には、クエリ文字列、Cookie、フォーム値、コントロール、ビューステート、セッション状態、プロファイルプロパティなど、Web Formsアプリケーションでのユーザー入力のすべての一般的なソースの値プロバイダーと対応する属性が含まれます。カスタム値プロバイダーを記述することもできます。

アプリケーションの実行

アプリケーションを今すぐ実行して、すべての製品またはカテゴリの製品を表示します。

Visual Studio で F5 キーを押してアプリケーションを実行します。
ブラウザーが開き、 Default.aspx ページが表示されます。
製品カテゴリのナビゲーションメニューから [ 車 ] を選択します。
ProductList.aspx ページには、Cars カテゴリ製品のみが表示されます。このチュートリアルの後半では、製品の詳細を表示します。
上部のナビゲーションメニューから [ 製品 ] を選択します。
ここでも ProductList.aspx ページが表示されますが、今回は製品の一覧全体が表示されます。
ブラウザーを閉じ、Visual Studio に戻ります。

製品の詳細を表示するデータコントロールを追加する

次に、前のチュートリアルで追加した ProductDetails.aspx ページのマークアップを変更して、特定の製品情報を表示します。

ソリューションエクスプローラーで ProductDetails.aspx を開きます。

既存のマークアップを次のマークアップに置き換えます。

<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false">
        <ItemTemplate>
            <div>
                <h1><%#:Item.ProductName %></h1>
            </div>
            <br />
            <table>
                <tr>
                    <td>
                        <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/>
                    </td>
                    <td>&nbsp;</td>  
                    <td style="vertical-align: top; text-align:left;">
                        <b>Description:</b><br /><%#:Item.Description %>
                        <br />
                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                        <br />
                        <span><b>Product Number:</b>&nbsp;<%#:Item.ProductID %></span>
                        <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
</asp:Content>

このコードでは、 FormView コントロールを使用して、特定の製品の詳細を表示します。このマークアップでは、 ProductList.aspx ページにデータを表示するために使用されるメソッドのようなメソッドを使用します。 FormView コントロールは、データソースから一度に 1 つのレコードを表示するために使用されます。 FormView コントロールを使用する場合は、データバインド値を表示および編集するためのテンプレートを作成します。これらのテンプレートには、フォームの外観と機能を定義するコントロール、バインド式、書式設定が含まれています。

前のマークアップをデータベースに接続するには、追加のコードが必要です。

ソリューションエクスプローラーで、[ProductDetails.aspx] を右クリックし、[コードの表示] をクリックします。
ProductDetails.aspx.cs ファイルが表示されます。

既存のコードを次のコードに置き換えます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WingtipToys.Models;
using System.Web.ModelBinding;

namespace WingtipToys
{
    public partial class ProductDetails : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public IQueryable<Product> GetProduct([QueryString("productID")] int? productId)
        {
            var _db = new WingtipToys.Models.ProductContext();
                IQueryable<Product> query = _db.Products;
                if (productId.HasValue && productId > 0)
                {
                    query = query.Where(p => p.ProductID == productId);
                }
                else
                {
                    query = null;
                }
                return query;
        }
    }
}

このコードでは、"productID" クエリ文字列値がチェックされます。有効なクエリ文字列値が見つかった場合は、一致する製品が表示されます。クエリ文字列が見つからない場合、またはその値が有効でない場合、製品は表示されません。

アプリケーションの実行

これで、アプリケーションを実行して、製品 ID に基づいて個々の製品が表示されます。

Visual Studio で F5 キーを押してアプリケーションを実行します。
ブラウザーが開き、 Default.aspx ページが表示されます。
カテゴリナビゲーションメニューから [ ボート ] を選択します。
ProductList.aspx ページが表示されます。
製品一覧から [Paper Boat ] を選択します。 ProductDetails.aspx ページが表示されます。
ブラウザーを閉じます。

その他のリソース

モデルバインドと Web フォームを使用したデータの取得と表示

次の手順

このチュートリアルでは、製品と製品の詳細を表示するためのマークアップとコードを追加しました。厳密に型指定されたデータコントロール、モデルバインド、および値プロバイダーについて学習しました。次のチュートリアルでは、Wingtip Toys サンプルアプリケーションにショッピングカートを追加します。

前へ次へ

データ項目と詳細を表示する

学習内容は次のとおりです。

このチュートリアルで導入された機能:

データコントロールを追加する

データソースコントロールを使用してデータをバインドする

手動でデータをバインドするコード

モデルバインドを使用してデータをバインドする

製品の表示

製品を表示するコードを追加する

アプリケーションの実行

製品の詳細を表示するデータコントロールを追加する

アプリケーションの実行

その他のリソース

次の手順

フィードバック

フィードバック

その他のリソース

データ項目と詳細を表示する

学習内容は次のとおりです。

このチュートリアルで導入された機能:

データ コントロールを追加する

データ ソース コントロールを使用してデータをバインドする

手動でデータをバインドするコード

モデル バインドを使用してデータをバインドする

製品の表示

製品を表示するコードを追加する

アプリケーションの実行

製品の詳細を表示するデータ コントロールを追加する

アプリケーションの実行

その他のリソース

次の手順

フィードバック

フィードバック

その他のリソース

データコントロールを追加する

データソースコントロールを使用してデータをバインドする

モデルバインドを使用してデータをバインドする

製品の詳細を表示するデータコントロールを追加する