數據綁定控件GridView展示商品列表（1）
控件名稱：GridView。
說明：通過表格方式實現數據的展示，並集成編輯、分頁、排序等功能，比如顯示商品列表。
控件名稱：DropDownList。
說明：下拉菜單控件，比如實現商品分類的修改，分類可以使用下拉菜單的形式給予用戶選擇。
下面使用微軟自帶的Northwind數據庫展示一下基本用法。步驟如下：
建立網站
1．新建項目，新建一個解決方案GridViewExercise。
2．解決方案GridViewExercise下添加一個新網站WebUI。
3．添加Web配置文件，Web.Config文件。該文件是站點配置文件，可以設置是否允許調試等信息，修改其中一行代碼<compilation debug="false" />，將false改爲true ，允許調試。
4.App_Data中，添加現有項，微軟自帶的Northwind數據庫。
5．添加成功後，選擇Northwind數據庫中的Products表，直接拖進當前項目Default.aspx頁面中，會自動在Web.Config文件中生成代碼。如圖7。然後將Default.aspx頁面中生成的代碼刪除。需要<connectionStrings></connectionStrings>中的name="NorthwindConnectionString"。
設計階段
1．建好網站後，在Default.aspx頁面中，點擊設計，進入到設計頁面。
2．從左邊工具欄中，將GridView控件拖到Default.aspx頁面中。並編輯其屬性ID爲GridView_Products。
3．從左邊工具欄中，將SqlDataSource數據源控件拖到Default.aspx頁面中。併爲其屬性ID起名爲SqlDataSource_Products。
4．配置數據源，選擇數據連接，Web.Config文件中的連接字符串的名字 “NorthwindConnectionString”，選擇下一步，在配置Select語句對話框中，選中“*”那一項，下一步，“測試查詢”，點“完成”。整個過程如圖11，12，13。
5．GridView右上角的小三角，在智能標記中選擇已配置好的數據源SqlDataSource_Products，並選中啓用分頁、啓用排序、啓用選定內容，如圖14。
Default.aspx頁面便顯示出所有的內容。如圖15，
因爲顯示的是所有的內容，頁面看起來很多內容。而有的內容並不需要顯示在顯示頁面上。所以需要進行修改，只留下一些有用的信息。我們在智能標記中選擇“編輯列”，打開“字段”對話框，看到如圖16頁面，
在“字段”對話框可以設置顯示內容、標題以及顯示順序，在選定的字段那一下拉列表框內，刪除其他項，留下ProductID，ProductName，SupplierID，CategoryID，UnitPrice，UnitsInStock六個字段，當選中某字段時，在右側的字段屬性中可設置響應屬性。此時我們只需修改顯示的標題頭即可，即在HeaderText欄的屬性值中填寫對應的中文標題。依次修改HeaderText內容，將他們均改爲漢語名字爲，編號，產品名字，供應商，類別，單價，庫存。如圖17。
編輯好之後單擊“確定”，生成解決方案，在瀏覽器中查看。便能夠查出所有需要的數據。但是需要進一步的修改。
產品分類的修改
1．因爲有外鍵關聯，用戶在IE中看到的供應商和類別下面均是數字編號，具體不知道是誰供貨，和到底是什麼類型的商品，爲了給人一目瞭然，需要進一步的做出修改，在智能標記中選擇“編輯列”，在選定的字段那一下拉列表框內，選中供應商那一項，點右下角“單擊將此字段轉換爲TemplateFiele”，然後點“確定”按鈕。然後再點GridView任務最下面的“編輯模板”，如圖19。
在顯示那裏選中剛建好的那個供應商項，如圖20。
出現如圖21頁面，
修改Label屬性ID爲lblSupplier，然後從左邊工具欄中添加DropDownList控件，爲其屬性ID命名爲DropDownList_Supplier_DataBound如圖22。
然後選擇DropDownList右上角的小三角，單擊選擇數據源，出現數據源配置嚮導，選擇數據庫，併爲數據源指定ID爲SqlDataSource_Supplier，單擊“確定”，在配置數據源對話框中選擇連接字符串，單擊“下一步”，進入到配置Select語句對話框中，在名稱下拉框中選擇表“Suppliers”，並將列的SupplierID和CompanyName前對號勾上，單擊“下一步”，測試查詢，單擊“完成”。如圖28。
在選擇數據源配置對話框中，選擇在DropDownList中“顯示的數據字段”選擇爲CompanyName。單擊“確定”。
2．生成解決方案，查看一下頁面效果，網站鼠標右鍵，在瀏覽器中查看，看到供應商那一列，頁面效果依舊不友好，繼續修改。接下來就是添加“DataBound事件”，將DropDownList選中的文本傳入Label標籤。進入到Default.aspx.cs中寫代碼，代碼如下：如圖26。
3．刷新頁面，顯示如圖25，
結果已經顯示在頁面中，但是結果後面還有DropDownList下拉列表框。再將Visible屬性值修改爲False，顯示結果如圖30。
4. 同理，將類別那一列原本也顯示爲數字也改成對用戶友好的模式。修改後結果，如圖31。
預警作用效果：
1．對於庫存列，一旦商品數量低於某一數量之後，顯示高亮效果，起到預警作用。用戶可以及時對產品數量做出調整。GridView控件，綁定RowDataBound事件。具體代碼如下：如圖32
2．保存並刷新IE頁面顯示，如圖33。
光棒效果：
1．就是改變了一下某行的背景色而已。在樣式表中，backgroundColor屬性用於設置對象的背景色。使用JavaScript時，我們可以通過this.style.backgroundColor來獲得或者設置某對象的背景色。
2．我們只需要給需要高亮顯示的行添加兩個事件onmouseover和onmouseout。Onmouseover在鼠標移動到對象所在區域時執，而onmouseout在鼠標離開對象所在區域時執行，我們在這兩個事件上編寫代碼，實現高亮效果。那麼我們在表格中的每一行添加這兩個事件就可以了。但表格中的行是綁定生成的。
3．在GridView中，有一個OnRowDataBound行綁定事件。我們可以在綁定行的時候，設置當前行的鼠標移動效果，代碼如下：如圖34。
4．顯示效果如圖35。
綁定字段的設置
1．BoundField
用於顯示普通文本，是默認的數據綁定列的類型，一般自動生成的列就是該類型。需要注意的是DataFormatString屬性，該屬性可以設置顯示的格式，常見的格式有：
{0:C}，設置顯示的內容是貨幣類型。
{0:D}，設置顯示的內容是數字。
{0:yy-mm-dd}，設置顯示的是日期格式。
2．使用DataFormatString屬性時，需要設置HtmlEncode屬性值爲false，否則設置無效。
3．步驟：智能標記中選擇“編輯列”，在選定的字段那一下拉列表框內，選中單價項，並修改其DataFormatString屬性值爲{0:C}。如圖36。單擊“確定”。刷新IE，顯示效果如￥14.00格式。
添加主題
1．可以從網絡上下載主題使用。
2．在WebUI網頁中，添加ASP.NET文件夾，選擇主題。這裏，將主題文件刪除，用自己下載的WebBlue主題文件夾替換。找到WebBlue文件夾，將其拷到當前項目的WebUI文件夾下，然後，項目中刷新。便出現在項目中。如圖37，38。
3. 打開WebBlue文件夾，找到文件GridStyle.txt打開。將其第一行內容Grid_WebBlue拷貝到當前項目的GridView的CssClass屬性那裏。
4．再將gridview下面的所有內容拷貝到當前項目的Default.aspx頁面，源碼中<Columns>的前面，並選中，按Tab鍵調整頁面。出現如圖40代碼示例。
5．屬性下面下拉劉表框中選擇DOCUMENT，如圖41。找到Theme屬性，選中WebBlue。
6．保存，刷新IE。便得到主題。顯示效果如圖42。
（2）
客戶需求變化，增加新功能。如圖1。
(1).用戶單擊“選擇”一種產品，相應的產品名字便輸出在頁面第一行。
(2).提供商品分類的下拉菜單，當用戶選擇相應的產品類別，同一類的產品均顯示出來。
(3).“詳細”鏈接指向商品的詳情頁面。
(4).分頁顯示商品列表，每頁顯示5條商品信息，可以向下一頁跳轉，可以直接跳轉到商品最後一頁。
輸出選擇的產品名字
1.該項功能相對來說比較簡單，選中GridView控件的SelectedIndexChanged事件，如圖2。
2.手寫代碼便可實現，代碼如圖3：
商品分類的下拉菜單
1.拖一個DropDownList控件到頁面，並命名ID爲DropDownList_Type，智能標記選擇數據源，新建數據源，如圖4。
2.爲數據源指定ID爲SqlDataSource_Type。單擊“確定”。進入選擇數據連接對話框，選擇NorthwindConnectionString，單擊“下一步”，如圖5。
3.進入配置數據源對話框，指定列的名稱“Categories”，將CategoryID和CategoryName兩列勾上，如圖6。
4.單擊“下一步”，進入到選擇數據源對話框，選擇要在DropDownList中顯示的數據字段爲CategoryName，爲DropDownList選擇的字段爲CategoryID，單擊“確定”，如圖7。
5.在智能標記中，將啓用AutoPostBack勾上。表示只要用戶變換選擇就向服務器提交。如圖8。
6.GridView智能標記中選擇配置數據源，單擊“下一步”，配置Select語句對話框中，單擊“WHERE”，如圖9。
7.進入添加WHERE子句對話框，選擇CategoryID列、Control源、參數屬性控件ID選擇DropDownList_Type，如圖10。
8.單擊“添加”，如圖11。單擊“確定”，單擊“下一步”，單擊“完成”。
9.保存，在瀏覽器中查看，商品表上方便出現類別下拉菜單，如圖12，用戶選擇哪一類別，所有相同類別產品便出現在表中。
顯示一個指向詳細頁面的超鏈接HyperLinkField
HyperLinkField允許將所綁定的數據以超鏈接的形式顯示出來，可以定義綁定超鏈接的顯示文字、超鏈接、打開窗口方式等。
1.在GridView智能標記中選擇“編輯列”，打開“字段”對話框，添加HyperLinkField，並修改HeaderText屬性爲“詳情”如圖13。
2.編輯HyperLinkField的屬性，如圖14。
DataNavigateUrlFields對應的數據庫中的列，這裏選擇ProductID爲參數。
DataNavigateUrlFormatString表示使用URL參數重寫跳轉到新頁面Details.aspx顯示詳情。
DataTextField表示在新頁面上要顯示的文本內容。這裏我要顯示在新頁面的內容是ProductName商品名字。
DataTextFormatString內容自己寫的，這裏爲查看，當一單擊查看，就進行跳轉。
設置DataNavigateUrlFields爲ProductID、DataNavigateUrlFormatString爲Detail.aspx?ProductID={0}、DataTextField選擇爲ProductID、DataTextFormatString爲查看。如圖15。
3.單擊“確定”，保存，刷新IE。表中最後一項就多了一列超鏈接。如圖16。
4.新建Detail.aspx頁面。當單擊查看，頁面跳轉，在Detail.aspx頁面顯示產品編號。在Detail.aspx.cs中代碼爲：
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(Request.QueryString["ProductID"].ToString());
}
5.保存，刷新IE。查看某一產品詳情，便出現該產品的編號。
分頁顯示
1.將AllowPaging屬性改爲true，允許分頁。
2.PageSige屬性，每一頁有幾條信息，默認是10。這裏改爲5，每頁顯示5條商品信息。
3.Mode換頁表示，默認四種選擇，支持自定義風格選擇NextPreviousFirstLast。
4.對分頁的設置，如圖17。
