DIV CSS 佈局教程網

　客戶在浏覽公司網站時，常常會對一些產品進行較為簡單的查詢搜索，本實例將講解其實現過程。

　　效果說明

　　客戶可以在如圖 86-1 所示的頁面中選擇特別查詢字段，輸入查詢數據，對產品進行模糊查詢，結果如圖 86-2 所示。

　　創作構思

　　在“ index.aspx ”頁面中添加下拉列表、文本框及按鈕，完成產品搜索頁面的設置，制作出跟實例 85 中樹形目錄索引顯示頁面相同的頁面作為產品搜索頁面，然後設置程序以實現產品搜索。

　　操作步驟

　　步驟一　產品搜索頁面的設置

　　( 1 )在“ LeftTb ”表格中添加 4 行並設置樣式。打開“ index.aspx ”，在設計視圖裡的“ LeftTb ”表格中添加 4 行並設置樣式，如圖 86-3 中圓角方框所示。

　　( 2 )添加控件。單擊 ASP.NET 快捷菜單欄上的【 asp ：下拉列表】按鈕，為新添加的第 2 行添加下拉列表控件，如圖 86-4 所示。

　　( 3 )添加列表標簽及相應的值。在新添加的下拉列表“ FieldList ”屬性窗口中單擊【列表項】按鈕，在彈出的【列表項】對話框中添加 3 個標簽，一個標簽為“產品編號”，其值為“ CPID ”;一個標簽為“產品名”，其值為“ CPNAME ”;一個標簽為“產品分類”，其值為“ CPFL ”，結果如圖 86-5 所示。

　　( 4 )繼續在新添加的行中添加文本框，設 ID 為“ SearchTxt ”，並添加兩個按鈕，一個按鈕為“搜索”， ID 為“ GoBt ”;另一個按鈕為“高級搜索”， ID 為“ TopgoBt ”，結果如圖 86-6 所示。

　　步驟二　實現產品搜索

　　( 1 )切換到代碼視圖，在“