2.5 网站前台首页设计
2.5.1 网站前台首页概述
对于电子商务网站来说，首页的设计是极其重要的，设计效果的好坏直接影响到顾客的购买情绪，也会影响网站的人气。在隆欣电子商务网站的首页商品展示区中，用户可以第一时间看到隆欣电子商城最新推出的精品展销、最新商品及热门商品。在“商品分类列表”区域中可以对商品进行分类浏览查询，并根据自己的喜好购买所需商品。用户登录后可以发表留言，并对自己的留言信息进行管理。
电子商务网站前台首页的运行效果如图2.23所示。
图2.23 网站前台首页的运行效果
2.5.2 网站前台首页技术分析
在设计网站首页功能模块时，主要采用了母版页技术，用来封装前台每个页面的页头、页尾、分类导航条和用户登录。而在母版页的这些设计中又主要应用了用户自定义控件，下面着重介绍用户自定义控件。
用户自定义控件简称用户控件，它是一种服务器控件，以.ascx为扩展名并被保存在单独的文件中。用户控件拥有自己对象模型的类，页面开发人员可以对其编程，它比服务器端包含文件提供了更多的功能，为创建具有复杂用户界面元素的控件带来了极大方便。
说明
编写Web用户控件的语言可以与包含它的页面语言有所不同，这意味着使用公共语言运行库支持的任何语言编写的Web用户控件都可以在同一个页面中使用。
用户控件声明性语法与用于创建ASP.NET网页的语法非常相似。主要的差别在于：用户控件使用@Control指令取代了@Page指令，并且用户控件在内容周围不包括html、body和form元素。
要创建一个用户控件，一般有下面几个步骤。
（1）创建一个新文件并为其指定一个扩展名为.ascx的文件名。
（2）在该页面的顶部创建一个@Control指令，并指定要为控件（如果有）使用的编程语言。
（3）添加用户希望显示的控件。
（4）添加用户控件要执行的任务（如处理控件事件或从数据源读取数据）代码。
（5）如果希望在用户控件和宿主页之间共享信息，则在控件中创建相应的属性。根据需要创建任何类的属性，可以创建为公共成员或使用get和set访问器创建属性。
注意
不能将用户控件放入网站的App_Code文件夹中，如果某个用户控件在App_Code文件夹中，则运行包含该控件的页面时将发生分析错误。另外，用户控件属于System.Web.UI.UserContol类型，它直接继承于System.Web.UI.Control。
在Visual Studio 2017中创建用户控件的主要步骤如下：
（1）打开解决方案资源管理器，在项目名称上单击鼠标右键，在弹出的快捷菜单中选择“添加新项”命令，将会弹出如图2.24所示的“添加新项”对话框。在该对话框中，选择“Web用户控件”选项，并为其命名，单击“添加”按钮将Web用户控件添加到项目中。
（2）打开已创建好的Web用户控件（用户控件的文件扩展名为.ascx），在.ascx文件中可以直接向页面添加各种服务器控件以及静态文本、图片等。
（3）双击页面上的任何位置，或者直接按下快捷键F7，可以将视图切换到后台代码文件，程序开发人员可以直接在文件中编写程序控制逻辑，包括定义各种成员变量、方法以及事件处理程序等。
注意
创建好用户控件后，必须添加到其他Web页中才能显示出来，不能直接作为一个网页来显示，因此也就不能设置用户控件为“起始页”。
图2.24 添加Web用户控件
2.5.3 网站前台首页实现过程
1. 设计步骤
（1）在应用程序中新建一个Web窗体，命名为Default.aspx，将其作为MasterPage.master母版页的内容页，并设置为起始页。
（2）在页面中通过使用bootstrap+div为整个页面布局。从“工具箱”选项卡中拖放两个DataList控件，通过属性窗口设置控件的属性。Default.aspx页面中主要控件的属性设置及其用途如表2.3所示。
表2.3 Default.aspx页面中主要控件的属性设置及其用途
2. 实现代码
在编辑器页（Default.aspx.cs）中编写代码前，首先需要定义CommonClass类对象和GoodsClass类对象，以便在编写代码时，调用该类中的方法。代码如下：
例程08 代码位置：资源包\TM\02\B2C\B2C\Default.aspx.cs
CommonClass ccObj = new CommonClass(); GoodsClass gcObj = new GoodsClass();
在Page_Load事件中，首先调用HotBind和DiscountBind自定义方法，分别用于显示“热门商品”和“最新商品”。代码如下：
例程09 代码位置：资源包\TM\02\B2C\B2C\Default.Aspx.cs
HotBind和DiscountBind自定义方法分别用于GoodsClass类的DLDeplayGI方法，绑定商品信息。代码如下：
例程10 代码位置：资源包\TM\02\B2C\B2C\Default.Aspx.cs
在“最新商品”显示框中，用户可以通过单击任一商品名，查看该商品的详细信息；然后，单击该商品下的“购物车”按钮，可以将该商品放在购物车中。为了实现上述功能，需要在DataList控件的ItemCommand事件中，调用自定义方法AddressBack，实现查看商品的详细信息；调用自定义方法AddShopCart，实现将购买的商品放在购物车中。代码如下：
例程11 代码位置：资源包\TM\02\B2C\B2C\Default.Aspx.cs
AddressBack自定义方法，实现的主要功能是跳转到商品详细信息页（showInfo.aspx），查看商品的详细信息。实现的具体步骤如下：
（1）将当前页的地址放在Session["address"]对象中，以便在商品详细信息页单击“返回”按钮时，返回到该页。
（2）使用Response对象的Redirect方法实现跳转功能，并传递该商品的ID代码。代码如下：
例程12 代码位置：资源包\TM\02\B2C\B2C\Default.Aspx.cs
AddShopCart自定义方法实现的主要功能是将用户新购买的商品添加到购物车中。在实现过程中，首先，判断用户是否已经有了购物车，如果用户没有，则重新分配一个给用户；如果用户已经有了购物车，则判断该购物车中是否已经有该商品。如果有，则表示用户想多买一个，此时把这个商品的“值”，即数量加1。如果没有，则新加一个（名，值）对。代码如下：
例程13 代码位置：资源包\TM\02\B2C\B2C\Default.Aspx.cs
说明
在“热门商品”的显示框中，完成“查看商品的详细信息”和“将购买的商品添加到购物车”功能的实现过程，与在“最新商品”中完成“查看商品的详细信息”和“将购买的商品添加到购物车”功能的实现过程相似，此处不再赘述。