效果說明

　　開啟首頁“ index.aspx ”，即可看到公司的產品展示，如圖 82-1 所示。單擊某一產品，就可以看到更詳細的產品資訊，如圖 82-2 所示。

　　創作構思

　　通過【資料列表】服務行為，可以對公司產品進行展示，通過將產品的編號動態連結到頁面，就可以開啟產品的詳細資料頁面。

操作步驟

　　步驟一　設定展示廳基本頁面

　　（ 1 ）開啟“ index.aspx ”，在“ main ”表格的右邊列中插入一個 1 行 4 列的表格，如圖 82-3 所示。

　　（ 2 ）新增資料集“ CpData ”。在【資料集】對話方塊中設列為“選定”，並選擇“ CPID ”、“ CPNAME ”和“ CPDJ ” 3 個欄位，其他相關設定如圖 82-4 所示。

　　（ 3 ）新增表格並繫結動態文字。在新插入表格的第 3 行中插入一個 5 行 1 列的表格，給第一行輸入一張圖片（任意一張），並繫結資料集“ CpData ”欄位到相應位置，如圖 82-5 所示。

　　（ 4 ）在第 5 行中新增兩張圖片，如圖 82-6 所示。

 　　提示：將以上插入的圖片邊框全部設定為“ 0 ”，其圖片素材可以在隨書光碟中找到。下面將分別為這 3 張圖片繫結動態連結，通過產品影象及“詳細”圖片可以連結開啟產品資訊視窗，通過“購買”圖片可以連結開啟產品線上購物視窗，本書將在例項 83 中對線上購物進行詳細講解。

　　（ 5 ） 選擇產品影象，切換到程式碼檢視，深色部分為該產品影象的原始碼，如圖 82-7 所示。

（ 6 ） 將圖 82-7 中的程式碼 src=”images/18.jpg” 改為 src="<%# "images /"+CpData.FieldValue ("CPID", Container)+".jpg" %>" 。

　　提示：本例項中將產品圖片全部儲存為“ jpg ”格式的圖片，並將產品編號作為圖片名，所以開啟某一產品的圖片時，其連結地址即為“路徑” + “產品編號” + “ .jpg ”。

　　（ 7 ） 新增行為。 切換 到設計檢視，選擇產品影象，併為其新增標籤行為【開啟瀏覽器視窗】，如圖 82-8 所示。

　　提示：如果沒有特別說明，其他例項中【開啟瀏覽器視窗】行為中的視窗寬度、高度也設定為“ 500 ”、“ 350 ”。

　　（ 8 ）將【開啟瀏覽器視窗】行為的響應事件由“ OnLoad ”改為“ onClick ”，如圖 82-9 所示。

　　（ 9 ）切換到程式碼檢視，找到【開啟瀏覽器視窗】行為的原始碼，如圖 82-10 中圓角方框所示。

　　（ 10 ）將圖 82-10 中的程式碼 'CPZL.aspx' 改為 'CPZL.aspx?CPID=' 。切換到【繫結】面板，將資料集“ CpData ”下的欄位“ CPID ”繫結到修改程式碼的“ = ”之後，如圖 82-11 所示。

　　（ 11 ）修改程式碼。切換到設計檢視，選擇“詳細”圖片，按第（ 7 ）至（ 10 ）步的操作新增【開啟瀏覽器視窗】行為，並繫結欄位“ CPID ”到修改程式碼的“ = ”之後。

　　（ 12 ）在設計檢視中選擇“購買”圖片，參照第（ 7 ）至（ 10 ）步的操作新增【開啟瀏覽器視窗】行為，設定 URL 為“ CPBY.aspx ”，將響應事件由“ OnLoad ”改為“ OnClick ”。再修改程式碼“ CPBY.aspx ”為“ CPBY.aspx?CPID= ”，然後繫結資料集“ CpData ”下的欄位“ CPID ”到修改程式碼的“ = ”之後。

步驟二　實現商品展示

　　（ 1 ）剪下表格程式碼。選擇“步驟一”裡新建的表格，切換到程式碼檢視，對該表格程式碼進行剪下，剪下的內容將被儲存在系統的貼上板中（以後可以用剪下下來的表格內容進行貼上）。

　　（ 2 ）新增資料列表。切換到【伺服器行為】面板，單擊【 + 】按鈕，在下拉選單中選擇【資料列表】選單項。接著在彈出的資料列表中設定 ID 為“ CpDatalist ”，選擇“ CpData ”資料集，設定顯示記錄為“ 16 ”，選擇“模板”列表框中的“專案”，在內容文字區域中進行貼上，將上一步操作中剪下的表格貼上過來，設定組織項為“使用表”，並設定表列為 4 ，如圖 82-12 所示。

圖 82-12 　新增資料列表

　　（ 3 ）插入資料集導航條。給“ main ”表格新增一行，選擇【應用程式物件】｜【記錄集分頁】｜【資料集導航條】選單命令，在彈出的【插入資料集導航條】對話方塊中選擇資料集“ CpData ”，設定顯示方式為“文字”，單擊【確定】按鈕，如圖 82-13 所示。

　　（ 4 ）儲存“ index.aspx ”。

步驟三　實現產品資料頁面

　　（ 1 ）新建動態頁面並新增資料集。新建一個空白的 ASP.NET 動態頁，將其命名為“ CPZL.aspx ”後儲存，並新增資料集“ Cpzl ”，如圖 82-14 所示。

　　（ 2 ）新增表格並繫結資料。在頁面中插入一個表格，設定有關樣式，並繫結資料集“ Cpzl ”的有關欄位到表格中，如圖 82-15 所示。

　　（ 3 ）將游標移至左邊一列，切換到程式碼檢視，輸入如下所述的程式碼。

　　<img src="<%# "images/"+ Cpzl.FieldValue("CPID", Container)+"-1.jpg" %>" width="274" height="199">

　　提示：本例項中設定圖片名為“產品編號”加“ -1 ”的圖片是產品放大圖片。

　　（ 4 ）儲存“ CPZL.aspx ”，然後在 IE 中瀏覽“ index.aspx ”，如圖 82-1 所示。單擊產品“ 2178 ”後，結果如圖 82-2 所示。

　　提示：本例項中只有 16 個產品，所示資料集分頁沒能很好地顯示出來，讀者可以開啟“ dwdat.mdb ”資料庫，在“ DreamweaverCP ”表中任意輸入 10 多個記錄，就可以測試資料分頁的效果了。

　　本例項是通過資料列表來實現產品展示的，實際應用中，也有的是採用資料網路來實現的，至此，本例項操作完畢。