2.5　網站前臺首頁設計

2.5.1　網站前臺首頁概述

對于電子商務網站來說，首頁的設計是極其重要的，設計效果的好壞直接影響到顧客的購買情緒，也會影響網站的人氣。在隆欣電子商務網站的首頁商品展示區中，用戶可以第一時間看到隆欣電子商城最新推出的精品展銷、最新商品及熱門商品。在“商品分類列表”區域中可以對商品進行分類瀏覽查詢，并根據自己的喜好購買所需商品。用戶登錄后可以發表留言，并對自己的留言信息進行管理。

電子商務網站前臺首頁的運行效果如圖2.23所示。

圖2.23　網站前臺首頁的運行效果

2.5.2　網站前臺首頁技術分析

在設計網站首頁功能模塊時，主要采用了母版頁技術，用來封裝前臺每個頁面的頁頭、頁尾、分類導航條和用戶登錄。而在母版頁的這些設計中又主要應用了用戶自定義控件，下面著重介紹用戶自定義控件。

用戶自定義控件簡稱用戶控件，它是一種服務器控件，以.ascx為擴展名并被保存在單獨的文件中。用戶控件擁有自己對象模型的類，頁面開發人員可以對其編程，它比服務器端包含文件提供了更多的功能，為創建具有復雜用戶界面元素的控件帶來了極大方便。

用戶控件聲明性語法與用于創建ASP.NET網頁的語法非常相似。主要的差別在于：用戶控件使用@Control指令取代了@Page指令，并且用戶控件在內容周圍不包括html、body和form元素。

要創建一個用戶控件，一般有下面幾個步驟。

（1）創建一個新文件并為其指定一個擴展名為.ascx的文件名。

（2）在該頁面的頂部創建一個@Control指令，并指定要為控件（如果有）使用的編程語言。

（3）添加用戶希望顯示的控件。

（4）添加用戶控件要執行的任務（如處理控件事件或從數據源讀取數據）代碼。

（5）如果希望在用戶控件和宿主頁之間共享信息，則在控件中創建相應的屬性。根據需要創建任何類的屬性，可以創建為公共成員或使用get和set訪問器創建屬性。

在Visual Studio 2017中創建用戶控件的主要步驟如下：

（1）打開解決方案資源管理器，在項目名稱上單擊鼠標右鍵，在彈出的快捷菜單中選擇“添加新項”命令，將會彈出如圖2.24所示的“添加新項”對話框。在該對話框中，選擇“Web用戶控件”選項，并為其命名，單擊“添加”按鈕將Web用戶控件添加到項目中。

（2）打開已創建好的Web用戶控件（用戶控件的文件擴展名為.ascx），在.ascx文件中可以直接向頁面添加各種服務器控件以及靜態文本、圖片等。

（3）雙擊頁面上的任何位置，或者直接按下快捷鍵F7，可以將視圖切換到后臺代碼文件，程序開發人員可以直接在文件中編寫程序控制邏輯，包括定義各種成員變量、方法以及事件處理程序等。

圖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