Chapter 18 購物網站 (2) - 訂單與產品管理

本章提要 18 - 1 購物網站的後端架構 18 - 2 類別管理網頁 (admin / Category.aspx) 18 - 3 產品管理網頁 (admin / Product.aspx) 18 - 4 訂單管理 (admin / Orders.aspx)

購物網站 (2) - 訂單與產品管理 前面第 17 章已經完成購物網站的前端系統, 本章將繼續使用第 17 章的架構與資料庫, 完成後端的訂單、產品與類別等管理系統。

18 - 1 購物網站的後端架構 我們的購物網站後端包含訂單、產品與類別管理系統, 分成了 3 個 程式檔, 放 置於網站的 admin 目錄 下：

購物網站的後端架構 管理系統自然必須限制權限, 不能讓使用者隨意進入, 所以我們使用第 13 章所介紹的安全管理機制, 限制只有管理者可以進入 admin 目錄：

購物網站的後端架構

購物網站的後端架構 我們已建立了一個名為 admin 使用者並將其加入 manager 角色：

購物網站的後端架構 您可以自行透過 ASP.NET 網站管理工具, 新增使用者帳號, 然後將其加入 manager 角色, 即可使用該帳號進入網站的管理系統。

18 - 2 類別管理網頁 (admin / Category.aspx) 類別管理網頁的功能與控制項 新增產品類別 編輯與刪除類別

類別管理網頁的功能與控制項 類別管理網頁主要用來新增、修改、刪除產品的類別：

類別管理網頁的功能與控制項

類別管理網頁的功能與控制項 下面則是類別管理網頁所包含的控制項：

類別管理網頁的功能與控制項

類別管理網頁的功能與控制項 其中 SqlDataSource_Category 的 InsertCommand 為 “INSERT INTO [產品類別] ([名稱]) VALUES (@ 名稱)”；SqlDataSource_ProductInCategory 的 SelectCommand 為 "SELECT [類別編號], [名稱] FROM [產品] WHERE ([類別編號] = @ 類別編號)"。

新增產品類別 當管理者在 TextBox_Category 輸入新類別的名稱, 然後按下新增鈕時, 便會觸發 Button_NewCategory_Click 程序。 此時只要以 TextBox_Category.Text 取得管理者輸入的名稱, 然後將其新增至產品類別資料表, 即可新增產品的類別。 下面是 Button_NewCategory_Click 程序的程式碼：

新增產品類別

新增產品類別

編輯與刪除類別 GridView_Category 是用來顯示目前所有產品類別, 並且啟用其編輯與刪除的功能。 為了避免管理者刪除某一類別後, 原本屬於該類別的產品變成『孤兒』, 所以當管理者刪除類別時, 程式會檢查是否還有產品屬於該類別。 若有, 則會在 GridView_ProductInCategory 列出該類別還有哪些產品, 然後中止刪除的動作。

編輯與刪除類別

編輯與刪除類別

編輯與刪除類別 第 33 行括號內將 GridView 控制項的刪除事件與參數指定為 e 物件。 第 39 行的 e.Keys 屬性可取得欲刪除之資料列的某一欄位值, 所以 e.Keys ("編號") 便代表該資料列的編號欄位, 也就是類別編號。 第 47 行將 e 物件的 Cancel 屬性設定為 True, 即可讓此刪除事件中斷, 不執行刪除資料的動作。

18 - 3 產品管理網頁 (admin / Product.aspx) 產品管理網頁的功能與控制項 使用 GridView 顯示產品列表 使用 DetailsView 顯示、新增、編輯與刪除產品 同步更新上方 GridView_Product 的資料

產品管理網頁的功能與控制項 產品管理網頁主要用來顯示產品列表, 並且可以新增、修改、刪除產品：

產品管理網頁的功能與控制項

產品管理網頁的功能與控制項 如果進 入編輯 模式, 可如下 修改產 品資料：

產品管理網頁的功能與控制項 當進入新增模式時, 會出現下列欄位讓管理者輸入產品資料：

產品管理網頁的功能與控制項 下面則是產品管理網頁所包含的控制項：

產品管理網頁的功能與控制項 產品管理網頁主要包含兩個控制項：GridView 與 DetailsView。

使用 GridView 顯示產品列表 產品管理網頁會使用 GridView_Product 顯示所有產品的列表, 其繫結至 SqlDataSource_GridView, 從產品資料表取得產品的資料。 不過產品資料表中, 只記錄各產品所屬類別的編號, 必須以該編號參考到產品類別資料表才能取得類別的名稱 (參見 17-3 頁)。

使用 GridView 顯示產品列表 所以請如下修改 SqlDataSource_GridView 的 SELECT 查詢指令, 使其除了查詢產品資料表, 還要連結 (JOIN) 產品類別資料表, 以取得類別的名稱：

使用 GridView 顯示產品列表

使用 DetailsView 顯示、新增、編輯與刪除產品 當管理者在 GridView 所產生的列表中選擇產品時, 下方的 DetailsView 會顯示該產品的詳細資訊。 DetailsView 所繫結的資料來源設定如下：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品 此功能已於 12-22 頁的『GridView 搭配 DetailsView』段落說明過, 所以請參閱該章節的方法設定 DetailsView_Product, 以及其所繫結的 SqlDataSource_DetailsView。 不過此處也會遇到與前面同樣的問題, 只能顯示與編輯類別的編號：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品 請如下將 DetailsView_Product 產生的類別編號欄位改為 TemplateField, 然後自訂其顯示與繫結方式：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品 接著請如下編輯 DetailsView_Product 的樣版：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品 稍後我們會直接以程式將類別名稱設定給 Label_Category.Text, 所以上面取消其資料繫結的功能。接著請切換到類別欄位的 EditItemTemplate, 如下設定：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品 然後請如下設定 DropDownList 控制項的 DataBindings：

使用 DetailsView 顯示、新增、編輯與刪除產品 請依照上面步驟, 也在類別欄位的 InsertItemTemplate 內加入並設定 DropDownList 控制項, 如此即可完成控制項的設定。 接著請建立 DetailsView_Product_DataBound 事件處理程式, 輸入以下程式碼, 以便將類別名稱設定給 Label_Category.Text：

使用 DetailsView 顯示、新增、編輯與刪除產品

使用 DetailsView 顯示、新增、編輯與刪除產品

同步更新上方 GridView_Product 的資料 經過前面的控制項設定與程式設計後, 已經可以方便地使用下方的 DetailsView_Product 新增、修改、刪除產品資料, 不過當實際操作時, 會發現下面問題：

同步更新上方 GridView_Product 的資料 當使用 DetailsView_Product 修改資料之後, ASP.NET 會自動讓 DetailsView_Product 重新進行資料繫結, 所以下方會顯示新的資料, 但是上方的 GridView_Product 並不知道資料已被修改, 所以不會重新取得資料, 因而仍顯示舊的資料。 DetailsView 控制項會在更新資料之後產生 ItemUpdated 事件, 所以我們可以該事件的觸發程序中, 通知 GridView_Product 重新進行資料繫結, 取得目前最新的資料：

同步更新上方 GridView_Product 的資料

同步更新上方 GridView_Product 的資料 除了編輯資料外, 新增與刪除資料也需進行相同處理, 所以還要建立 DetailsView_Product_ItemInserted (完成新增動作後的事件) 與 DetailsView_Product_ItemDeleted 程序 (完成刪除動作後的事件), 然後在這兩個程序內執行 GridView_Product.DataBind()。

18 - 4 訂單管理 (admin / Orders.aspx) 訂單管理網頁的功能與控制項 顯示訂單列表與客戶資料 顯示訂單明細

訂單管理網頁的功能與控制項 訂單管理網頁主要用來顯示訂單明細與客戶資料, 並且可以修改客戶資料, 以及設定是否已付款 / 出貨：

訂單管理網頁的功能與控制項

訂單管理網頁的功能與控制項

訂單管理網頁的功能與控制項 除了使用下方欄位編輯客戶資料外, 也可以直接在上方列表中, 快速編輯部分資料： 訂單管理網頁所包含的控制項如下：

訂單管理網頁的功能與控制項

訂單管理網頁的功能與控制項 訂單管理網頁所使用的程式與設計上要考量的重點, 幾乎都已經在第 17 章或本章前面說明過了, 所以本節只概略說明需要製作的功能, 以及各功能詳細製作步驟的參考處。

顯示訂單列表與客戶資料 訂單管理網頁使用 GridView_Orders 產生訂單列表, 並且搭配左下方的 DetailsView_Customer 顯示該訂單的客戶資料, 此做法已使用多次, 原理請參考 12-22 頁。 此外, 因為 DetailsView_Customer 將提供客戶資料的編輯功能, 所以資料修改之後應該讓上方的 GridView_Orders 重新進行資料繫結, 取得目前最新的資料：

顯示訂單列表與客戶資料

顯示訂單明細 右下角的 GridView_OrderDetail 會配合上方 GridView_Orders, 顯示被選取訂單的訂購明細, 同樣地, 此功能與 12-22 頁所介紹的『GridView 搭配DetailsView』相同, 故不再贅述。 顯示訂單明細時, 需參考到產品資料表以取得產品名稱。所以 GridView_OrderDetail 所繫結的 SqlDataSource_OrderDetail 應如下設定 SELECT 命令：

顯示訂單明細

顯示訂單明細 取得該訂單所有產品的名稱與數量之後, 程式會顯示小計、總價格以及總數量, 其顯示原理請參閱 17-3 節購物車網頁的說明即可。