第 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 的页面。

请注意，我们不会选择名称 ShoppingCart.aspx。

我们的数据库包含名为“ShoppingCart”的表。 生成实体数据模型时，已为数据库中的每个表创建类。 因此，实体数据模型生成了名为“ShoppingCart”的实体类。 我们可以编辑模型，以便可以将该名称用于购物车实现或根据需要扩展它，但我们会选择只是选择避免冲突的名称。

同样值得注意的是，我们将创建一个简单的购物车，并使用购物车显示嵌入购物车逻辑。 我们还可能选择在完全独立的业务层中实现购物车。

上一页下一页