第 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> </td>
<td>
<a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
<image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>'
width="100" height="75" border="0">
</a>  
</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”的实体类。 我们可以编辑模型,以便可以将该名称用于购物车实现或根据需要扩展它,但我们会选择只是选择避免冲突的名称。
同样值得注意的是,我们将创建一个简单的购物车,并使用购物车显示嵌入购物车逻辑。 我们还可能选择在完全独立的业务层中实现购物车。