第 4 部:製品のリスティング

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

Tailspin Spyworks は、.NET プラットフォーム用の強力でスケーラブルなアプリケーションを作成することが非常にシンプルであることを示しています。 ASP.NET 4 の優れた新機能を使用して、ショッピング、チェックアウト、管理などのオンラインストアを構築する方法を示します。

このチュートリアルシリーズでは、Tailspin Spyworks サンプルアプリケーションをビルドするために実行されるすべての手順について詳しく説明します。パート 4 では、GridView コントロールを使用して製品を一覧表示する方法について説明します。

GridView コントロールを使用して製品を一覧表示する

ソリューションの [右クリック] をクリックし、[追加] と [新しい項目] を選択して、ProductsList.aspx ページの実装を開始しましょう。

[新しい項目] を選択する場所を示すスクリーンショット。

[マスターページを使用した Web フォーム] を選択し、ProductsList.aspx のページ名を入力します。

[追加] をクリックします。

[追加] をクリックする場所を示すスクリーンショット。

次に、Site.Master ページを配置した [スタイル] フォルダーを選択し、[フォルダーの内容] ウィンドウから選択します。

[スタイル] フォルダーの内容を示す Screenshow。

[OK] をクリックしてページを作成します。

このデータベースには、次に示すように製品データが設定されます。

製品データが設定されたデータベースを示すスクリーンショット。

ページが作成されたら、エンティティデータソースを再度使用してその製品データにアクセスしますが、この場合は Product Entities を選択する必要があり、選択したカテゴリのアイテムのみに返されるアイテムを制限する必要があります。

これを実現するには、EntityDataSource に WHERE 句を自動生成するように指示し、WhereParameter を指定します。

"製品カテゴリメニュー" でメニュー項目を作成したときに、各リンクの QueryString に CategoryID を追加することで、リンクを動的に作成したことを思い出します。エンティティデータソースに、その QueryString パラメーターから WHERE パラメーターを派生するように指示します。

<asp:EntityDataSource ID="EDS_ProductsByCategory" runat="server"  
                      EnableFlattening="False" AutoGenerateWhereClause="True"
                      ConnectionString="name=CommerceEntities"  
                      DefaultContainerName="CommerceEntities" 
                      EntitySetName="Products">
<WhereParameters>
        <asp:QueryStringParameter Name="CategoryID" 
                                        QueryStringField="Category Id" 
                                        Type="Int32" />
       </WhereParameters>
</asp:EntityDataSource>

次に、製品の一覧を表示するように ListView コントロールを構成します。最適なショッピングエクスペリエンスを作成するために、いくつかの簡潔な機能を ListVew に表示される個々の製品に圧縮します。

製品名は、製品の詳細ビューへのリンクになります。
製品の価格が表示されます。
製品の画像が表示され、アプリケーションのカタログイメージディレクトリから画像を動的に選択します。
特定の製品をショッピングカートにすぐに追加するためのリンクが含まれます。

ListView コントロールインスタンスのマークアップを次に示します。

<asp:ListView ID="ListView_Products" runat="server" 
              DataKeyNames="ProductID"  
              DataSourceID="EDS_ProductsByCategory" 
              GroupItemCount="2">
   <EmptyDataTemplate>
      <table runat="server">
        <tr>
          <td>No data was returned.</td>
        </tr>
     </table>
  </EmptyDataTemplate>
  <EmptyItemTemplate>
     <td runat="server" />
  </EmptyItemTemplate>
  <GroupTemplate>
    <tr ID="itemPlaceholderContainer" runat="server">
      <td ID="itemPlaceholder" runat="server"></td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td runat="server">
      <table border="0" width="300">
        <tr>
          <td>&nbsp</td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
               <image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' 
                      width="100" height="75" border="0">
            </a> &nbsp
          </td>
          <td>
            <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'><span 
               class="ProductListHead"><%# Eval("ModelName") %></span><br>
            </a>
            <span class="ProductListItem">
              <b>Special Price: </b><%# Eval("UnitCost", "{0:c}")%>
            </span><br />
            <a href='AddToCart.aspx?productID=<%# Eval("ProductID") %>'>
               <span class="ProductListItem"><b>Add To Cart<b></font></span>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </ItemTemplate>
  <LayoutTemplate>
    <table runat="server">
      <tr runat="server">
        <td runat="server">
          <table ID="groupPlaceholderContainer" runat="server">
            <tr ID="groupPlaceholder" runat="server"></tr>
          </table>
        </td>
      </tr>
      <tr runat="server"><td runat="server"></td></tr>
    </table>
  </LayoutTemplate>
</asp:ListView>

表示される製品ごとに複数のリンクを動的に構築しています。

また、独自の新しいページをテストする前に、次のように製品カタログイメージのディレクトリ構造を作成する必要があります。

ディレクトリ構造を示すスクリーンショット。

製品イメージにアクセスできたら、製品リストページをテストできます。

製品リストページを示すスクリーンショット。

サイトのホームページで、カテゴリリストリンクのいずれかをクリックします。

[カテゴリリスト] リンクを示すスクリーンショット。

次に、ProductDetails.aspx ページと AddToCart 機能を実装する必要があります。

前に行ったように、サイトマスターページを使用してページ名 ProductDetails.aspx を作成するには、File-New> を使用します。

EntityDataSource コントロールを使用してデータベース内の特定の製品レコードにアクセスし、ASP.NET FormView コントロールを使用して製品データを次のように表示します。

<asp:FormView ID="FormView_Product" runat="server" DataKeyNames="ProductID" 
                                                           DataSourceID="EDS_Product">
  <ItemTemplate>
    <div class="ContentHead"><%# Eval("ModelName") %></div><br />
      <table  border="0">
        <tr>
          <td>
            <img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" 
                                                       alt='<%# Eval("ModelName") %>' />
          </td>
          <td><%# Eval("Description") %>
            <br /><br /><br />                  
          </td>
        </tr>
      </table>
      <span class="UnitCost"><b>Your Price:</b> <%# Eval("UnitCost", "{0:c}")%> 
      <br /> 
      <span class="ModelNumber">
        <b>Model Number:</b> <%# Eval("ModelNumber") %>
      </span><br />
      <a href='AddToCart.aspx?ProductID=
        <%# Eval("ProductID") %>'> 
        <img id="Img1" src="~/Styles/Images/add_to_cart.gif" runat="server" 
             alt="" />
      </a>
      <br /><br />      
    </ItemTemplate>
  </asp:FormView>
  <asp:EntityDataSource ID="EDS_Product" runat="server" AutoGenerateWhereClause="True"  
                        EnableFlattening="False" 
                        ConnectionString="name=CommerceEntities" 
                        DefaultContainerName="CommerceEntities" 
                        EntitySetName="Products" 
                        EntityTypeFilter="" 
                        Select="" Where="">
    <WhereParameters>
      <asp:QueryStringParameter Name="ProductID" 
                                QueryStringField="productID"  Type="Int32" />
    </WhereParameters>
  </asp:EntityDataSource>

書式設定が少し面白く見える場合は心配しないでください。上記のマークアップは、後で実装する機能の 2 つについて、表示レイアウトにスペースを残します。

ショッピングカートは、アプリケーションでより複雑なロジックを表します。作業を開始するには、File-New> を使用して MyShoppingCart.aspx というページを作成します。

ShoppingCart.aspx という名前は選択されていないことに注意してください。

このデータベースには、"ShoppingCart" という名前のテーブルが含まれています。 Entity Data Model を生成すると、データベース内のテーブルごとにクラスが作成されました。そのため、Entity Data Model によって "ShoppingCart" という名前のエンティティクラスが生成されました。モデルを編集して、ショッピングカートの実装にその名前を使用したり、ニーズに合わせて拡張したりできますが、競合を回避する名前を選択する代わりに選択します。

また、単純なショッピングカートを作成し、ショッピングカートのロジックをショッピングカートのディスプレイに埋め込む予定です。また、ショッピングカートを完全に別のビジネスレイヤーに実装することもできます。

前へ次へ

Share via

第 4 部:製品のリスティング

GridView コントロールを使用して製品を一覧表示する

フィードバック

フィードバック

その他のリソース