Tailspin Spyworks指南第四讲：产品列表

Part 4: Listing Products

第四讲：产品列表

By  Joe Stagner |July 21, 2010

Translated By   litdwg  |March 12,2014

Print

Tailspin Spyworks demonstrates how extraordinarily simple it is to create powerful, scalable applications for the .NET platform. It shows off how to use the great new features in ASP.NET 4 to build an online store, including shopping, checkout, and administration.

通过Tailspin Spyworks 演示在.NET平台创建功能强大，结构良好的应用程序有多么简单。演示如何使用ASP.NET 4的新特性创建一个包含购物、结算和管理功能的在线网店。

This tutorial series details all of the steps taken to build the Tailspin Spyworks sample application.  Part 4 covers listing products with the GridView control.

本系列指南对构建案例程序的每一步做了详细的解释。第四部分讲述通过GridView控件列出产品列表。  

使用GridView控件列出产品

 

Let's begin implementing our ProductsList.aspx page by "Right Clicking" on our solution and selecting "Add" and "New Item".

在解决方案上“右击”选择“添加”“新项”，开始创建ProductsList.aspx页面。

Choose "Web Form Using Master Page" and enter a page name of ProductsList.aspx".

Click "Add".

选择“基于Mster页的Web窗体”，命名为ProductsList.aspx，点击“添加”。

Next choose the "Styles" folder where we placed the Site.Master page and select it from the "Contents of folder" window.

如下图选择Master页面。

Click "Ok" to create the page.

点击“OK”创建页面。

Our database is populated with product data as seen below.

数据库中已经包含了很多产品的信息：

After our page is created we'll again use an Entity Data Source to access that product data, but in this instance we need to select the Product Entities and we need to restrict the items that are returned to only those for the selected Category.

此页面我们将再次使用实体数据源来访问数据，但这次是选择Product实体，并且将数据限定在指定的类别。

To accomplish this we'll tell the EntityDataSource to Auto Generate the WHERE clause and we'll specify the WhereParameter.

因此我们在实体数据源生成WHERE语句，之后创建Where参数。

You'll recall that when we created the Menu Items in our "Product Category Menu" we dynamically built the link by adding the CatagoryID to the QueryString for each link. We will tell the Entity Data Source to derive the WHERE parameter from that QueryString parameter.

回想一下，在创建类别菜单项时，在链接中传递了类别ID。这里使用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>

Next, we'll configure the ListView control to display a list of products. To create an optimal shopping experience we'll compact several concise features into each individual product displayed in our ListVew.

随后，配置ListView控件显示产品列表。为了创建良好的购物体验，将每个产品的简单特色显示在ListView中。

• The product name will be a link to the product's detail view.  产品名，作为链接指向产品的详情页
• The product's price will be displayed.  显示产品价格
• An image of the product will be displayed and we'll dynamically select the image from a catalog images directory in our application.  随机显示一张图作为产品图片
• We will include a link to immediately add the specific product to the shopping cart. 直接将产品添加到购物车的链接

Here is the markup for our ListView control instance.

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>

We are dynamically building several links for each displayed product.

为显示的每个产品动态创建相关的链接。

Also, before we test own new page we need to create the directory structure for the product catalog images as follows.

在测试新页面之前，创建保存产品图片的文件夹，如下图：

Once our product images are accessible we can test our product list page.

图片设置正确可访问到之后，可以测试产品列表页了。

From the site's home page, click on one of the Category List Links.

从主页点击任一产品类别的链接。

Now we need to implement the ProductDetials.apsx page and the AddToCart functionality.

现在需要实现ProductDetials.apsx 页面和AddToCart功能。

Use File->New to create a page name ProductDetails.aspx using the site Master Page as we did previously.

和之前一样的方式，创建ProductDetails.aspx。

We will again use an EntityDataSource control to access the specific product record in the database and we will use an ASP.NET FormView control to display the product data as follows.

我们再一次使用EntityDataSource访问数据库中指定的产品记录，使用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>

Don't worry if the formatting looks a bit funny to you. The markup above leaves room in the display layout for a couple of features we'll implement later on.

不用担心样式不够美观，这里给随后实现的功能预留了一些显示空间。

The Shopping Cart will represent the more complex logic in our application. To get started, use File->New to create a page called MyShoppingCart.aspx.

购物车将展示更复杂的逻辑。创建一个页面，命名为 MyShoppingCart.aspx.

Note that we are not choosing the name ShoppingCart.aspx.

注意，这里并没有命名为 ShoppingCart.aspx。

Our database contains a table named "ShoppingCart". When we generated an Entity Data Model a class was created for each table in the database. Therefore, the Entity Data Model generated an Entity Class named "ShoppingCart". We could edit the model so that we could use that name for our shopping cart implementation or extend it for our needs, but we will opt instead to simply slect a name that will avoid the conflict.

数据库里包含了一个名为“ ShoppingCart”的表。在创建实体数据模型时，为数据库中的每个表创建了一个相应的类，此类的名字和表名相同。这里为了避免命名冲突，页面不再使用“ ShoppingCart”来命名。

It's also worth noting that we will be creating a simple shopping cart and embedding the shopping cart logic with the shopping cart display. We might also choose to implement our shopping cart in a completely separate Business Layer.

还要注意的是我妈将创建一个简单的购物车，并将购物车逻辑写在购物车显示部分。我们还可以在完全独立的业务逻辑层实现购物车的功能。