データ項目と詳細の表示
作成者: Erik Reitan
このチュートリアル シリーズでは、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> </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 を使用できるようになり、コントロールは厳密に型指定されます。 前のチュートリアルで説明したように、ProductName を指定するなど、IntelliSense を使用して Item オブジェクトの詳細を選択できます。
また、モデル バインドを使用して 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; } } }
このコードは、ProductList.aspx ページで ListView コントロールの ItemType プロパティが参照する GetProducts メソッドを示しています。 結果を特定のデータベース カテゴリに制限するために、このコードは、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 ページには、車カテゴリの製品のみが表示されます。 このチュートリアルの後半では、製品の詳細を表示します。
上部のナビゲーション メニューから [製品] を選択します。
再び 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> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#: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 ページが表示されます。製品一覧から [ペーパー ボート] を選択します。 ProductDetails.aspx ページが表示されます。
ブラウザーを閉じます。
その他のリソース
モデル バインドと Web Forms を使用したデータの取得と表示
次のステップ
このチュートリアルでは、製品と製品の詳細を表示するためのマークアップとコードを追加しました。 厳密に型指定されたデータ コントロール、モデル バインド、および値プロバイダーについて学習しました。 次のチュートリアルでは、Wingtip Toys サンプル アプリケーションにショッピング カートを追加します。