电子商务网站建设研究论文 - 图文

Data标签页，双击DataList实体。这样就把DataList控件添加到了DepartmentsList.ascx中。

（3）使用属性窗口修改DataList中如表5-4所示的属性。

表5-4 DataList属性设置表

属性名称 （ID） Width CssClass

HeaderStyle-CssClass

值 list 200px

DepartmentListContent DepartmentListHead

（4）在设计视图中打开DepartmentsList.ascx，在DataList上点击鼠标右键，选择编辑模板—页眉和页脚模板。

（5）在Header Template中输入Choose a Department。

（6）在DataList控件上点击鼠标右键，然后选择编辑模板—项模板。 （7）从工具箱中的标准标签选HyperLink控件，添加到ItemTemplate中。 （8）将HyperLink的Text属性设置为空字符串。

（9）切换到源代码视图，在需要对HyperLink控件做几处修改，使其与DataList控件相关。

（10）打开用户控件的后台代码文件，然后修改Page_Load事件处理程序。 （11）在设计视图中打开BalloonShop.master。从解决方案资源管理器中将DepartmentList.ascx拖到文本信息“List of Departments”边上。然后从该单元将文本删除，只留下用户控件。

（12）最后，创建Catalog.aspx，它是门类列表中链接所引用的页面。在创建该页面的时候确认钩上将代码放在单独的文件中和选择母版页两个可选框。当询问使用哪个母版页文件时，选择BalloonShop.master。

（13）在源代码视图中打开Catalog.aspx，将它的标题修改为“BalloonShop – The Product Catalog”。

（14）按F5键执行项目（如图5-4）。然后选择其中一种门类。

23

图5-4 门类页面视图

5.4.3 显示分类列表

创建Web用户控件CategoriesList

（1）在UserControls文件夹中新建一个Web用户控件，名字设置为CategoriesList.ascx。

（2）按表5-5中所示的信息，设置DataList对象的属性。

表5-5 DataList属性设置表

属性名称 ID Width CssClass

HeaderStyle-CssClass

值 list 200px

CategoryListContent CategoryListHead

（3）切换到设计视图中，右击DataList，然后选择编辑模板—页眉和页脚模板。在模板中输入Choose a Category。

（4）右击DataList，然后选择编辑模板—项模板。从工具箱的标准页中，选择一个HyperLink控件添加到ItemTemplate中。把它的Text属性置为空。

（5）切换到源代码视图中。修改元素区的代码。

（6）在DataList后面添加一个text属性值为空的Label控件。当分类列表包

24

含有数据时，将该Label控件的text属性值设为

（7）打开用户控件（CategoriesList.ascx.cs）的后置代码文件，然后修改Page_Load事件处理程序。

（8）在设计视图中打开BalloonShop.master母版页。从解决方案资源管理器中，把CategoriesList.ascx控件拖放到“List of Categories”文本旁边。删除此文本，仅保留用户控件在那儿。

（9）执行该项目，选择一个门类，然后再选择一个分类。将看到下图所示的界面。

图5-5 分类页面设计视图

5.4.4 显示商品列表

那么内容在哪里呢？我将在该网站中通过使用一个名为ProductsList.ascx的Web用户控件来显示商品列表。理论上，该控件与CategoriesList.ascx和DepartmentsList.ascx非常相似，都是使用DataList控件来生成一个数据项目列表。

该控件也需要支持由业务层提供的分页功能。它需要显示控件，以允许访问者在商品页间进行上下翻页。商品的名称和图片都将链接到商品的详细信息页上，该详细信息页由一个名为Product.aspx的Web窗体处理。

下面放我们开始创建Web用户控件ProductsList

25

（1）首先，将网站中会使用到的图片导入到BalloonShop解决方案中的ProductImages文件中。

（2）在UserControls文件夹中添加一个新的Web用户控件，命名为ProductsList。

（3）在源代码视图中，添加代码，使得当有许多页数据时，在显示商品的区域中生成“Page x of y ? Previous ?Next”的文本。

（4）在设计视图中打开该控件，从工具箱中拖放一个DataList控件放在页面底部。

（5）将DataList的ID改为list，并将其RepeatColumns属性设置为2（即指定每行要显示的商品数），RepeatDirection属性设置为Horizontal。

图5-6 DataList设计样式视图

（6）直接在源代码视图中编辑DataList的代码；是其达到如图所示的样式和效果。

（7）修改ProductsList.ascx.cs中的ProductsList类代码；

（8）在设计视图中打开Catalog.aspx。把ProductsList.ascx控件从解决方案资源管理器中拖到[Place List of Products Here]文本旁，然后删除该文本。

（9）现在，以同样的方式处理Default.aspx

26