第 4 部分：列出產品

作者 ：Joe Stagner

Tailspin Spyworks 示範如何非常簡單，為 .NET 平臺建立功能強大的可調整應用程式。 它示範如何使用 ASP.NET 4 中的絕佳新功能來建置線上商店，包括購物、結帳和管理。

本教學課程系列詳細說明建置 Tailspin Spyworks 範例應用程式所採取的所有步驟。 第 4 部分涵蓋使用 GridView 控制項列出產品。

使用 GridView 控制項列出產品

讓我們開始實作 ProductsList.aspx 頁面，方法是在解決方案上按一下滑鼠右鍵，然後選取 [新增] 和 [新增專案]。

選擇 [使用主版頁面的 Web 表單]，然後輸入 ProductsList.aspx 的頁面名稱。

按一下 [新增]。

接下來，選擇放置 Site.Master 頁面的 [樣式] 資料夾，然後從 [資料夾的內容] 視窗中選取該資料夾。

按一下 [確定] 以建立頁面。

我們的資料庫會填入產品資料，如下所示。

建立頁面之後，我們會再次使用實體資料來源來存取該產品資料，但在此實例中，我們需要選取產品實體，而且我們需要限制只傳回給所選類別的專案。

為了達成此目的，我們會告訴 EntityDataSource 自動產生 WHERE 子句，並將指定 WhereParameter。

您會記得，當我們在「產品類別功能表」中建立功能表項目時，我們會透過為每個連結將 CategoryID 新增至 QueryString 來動態建置連結。 我們會告訴實體資料來源從該 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 功能。

使用 File-New > 建立頁面名稱 ProductDetails.aspx，如同我們先前所做的網站主版頁面一樣。

我們再次使用 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>

如果格式設定看起來有點麻煩，別擔心。 上述標記會將空間保留在顯示配置中，以供稍後實作的幾個功能使用。

購物車將代表應用程式中更複雜的邏輯。 若要開始使用，請使用 File-New > 建立名為 MyShoppingCart.aspx 的頁面。

請注意，我們不會選擇 Name ShoppingCart.aspx。

我們的資料庫包含名為 「ShoppingCart」 的資料表。 當我們產生實體資料模型時，系統會為資料庫中的每個資料表建立類別。 因此，實體資料模型會產生名為 「ShoppingCart」 的實體類別。 我們可以編輯模型，以便將該名稱用於購物車實作，或視需要加以擴充，但我們會改為選擇只選取可避免衝突的名稱。

我們也值得注意的是，我們將建立簡單的購物車，並使用購物車顯示內嵌購物車邏輯。 我們也可以選擇在完全個別的商務層中實作購物車。

上一個下一個