asp.net电子商务系统 之三

在首页中点击产品列表中的项,如下图所示:

然后页面跳转到ProductsList.aspx页面.在ProductsList页面中，同样使用了ListView控件进行产品信息布局，实现了这个页面时，使用了Site.master母版页来控制页面的外观。如果用户从目录列表中单击产品目录后进入的话，将在查询字符串中传入CategoryID值来进行过滤，为了实现这个效果，需要定义where参数。ProductsList.aspx依然使用了一个EntityDatasource控件来提供数据源，在配置这个数据源是，指定实体集Products。

除了设置实体集之外，还需要指定Where条件。选中EntityDatasource控件。在“属性”面板中选中where属性。在“参数源”下拉列表框中选中查询字符串类型QueryString，那么参数将会根据URL中指定的查询字符串来查询。QueryStringField指定查询字符串的名称。如下图:

对于页面ListView控件，在LayoutTemplate模板中，创建了一个HTML表格来显示产品信息，ItemPlate模板中指定的内容将显示到表格行<tr>标签内部。定义代码如下：

    <asp:ListView ID="ListView_Products" runat="server" DataKeyNames="ProductID" 
        DataSourceID="EDS_ProductsByCategory" GroupItemCount="2">

        <EmptyDataTemplate><table runat="server"><tr><td>没有找到数据.</td></tr></table></EmptyDataTemplate>
        <EmptyItemTemplate><td runat="server"></td></EmptyItemTemplate>
        <GroupTemplate><tr id="itemPlaceholderContainer" runat="server">
        <td id="itemPlaceholder" runat="server"></td></tr></GroupTemplate>
        <ItemTemplate>
            <td runat="server">
            <table border="0" width="300px">
                <tr>
                    <td style="width:25px;"> </td>
                    <td style="vertical-align: middle; text-align: right;">
                        <a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
                            <image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' 
                            width="100" height="75" border="0" >
                        </a> 
                    </td>
                    <td style="width:250px; vertical-align: middle;">
                        <a href="ProductDetails.aspx?productID=<%# Eval("ProductID") %>">
                        <span class="ProductListHead"><%# Eval("ModelName") %><br></span>
                        </a>
                        <span class="ProductListItem"><b>指定价格:</b><%# Eval("UnitCost","{0:c}") %></span><br>
                        <a href='AddToCart.aspx?ProductID=<%# Eval("ProductID") %>'>
                        <span class="ProductListItem"><b>添加到购物车</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>

listView控件提供了分组布局的功能，该功能会将ItemTrmplate中的项以水平平铺方向进行布局。在平铺表布局中，项在行中沿水平方向重复出现，项重复出现的次数有GroupItemCount属性指定。在上面的代码中，指定GroupTemplate属性值为2，表示将显示两栏的产品信息，在GroupTemplate模板中，指定了项将显示在表格行<tr>服务器标签内部。在LayoutTemplate模板中，指定了ListView控件的总体布局在一个HTML表格中

绑定后ProductsList.aspx页面显示如下图:

由于上面显示产品的ListView控件的页面时显示所有的商品，所以这里我专门向ListView控件添加了分页，下面是aspx页中layoutTemplate中添加后的代码:

<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>
            <asp:DataPager ID="DataPager1" runat="server" PageSize="8">
            <Fields>
            <asp:NextPreviousPagerField ShowFirstPageButton="true" ShowLastPageButton="true"
             FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PreviousPageText="上一页" />
            </Fields>
            </asp:DataPager>
        </LayoutTemplate>

实现ListView分页效果后的，如下图: