GridView 和DataGrid區別

GridView 和DataGrid區別

 

一、GridView和DataGrid的異同

GridView 是 DataGrid的後繼控件，在.net framework 2 中，雖然還存在DataGrid，但是GridView已經走上了歷史的前臺，取代DataGrid的趨勢已是勢不可擋。GridView和 DataGrid功能相似，都是在web頁面中顯示數據源中的數據，將數據源中的一行數據，也就是一條記錄，顯示爲在web頁面上輸出表格中的一行。

GridView相對於DataGrid來說，具有如下優勢，功能上更加豐富，因爲提供了智能 標記面板（也就是show smart tag）更加易用方便,常用的排序、分頁、更新、刪除等操作可以零代碼實現！具有PagerTemplate屬性，可以自定義用戶導航頁面，也就是說分頁的控制更加隨心所欲。GridView和DataGrid在事件模型上也多有不同之處，DataGrid控件引發的都是單個事件，而GridView控件會引發兩個事件，一個在操作前發生，一個在操作後發生，操作前的事件多位***ing事件，操作後的事件多位***ed事件，比如Sorting 事件和sorted 事件，RowDeleting和RowDeleted事件。

 

二、GridView操作初步

 

1、顯示數據源中的數據

從ToolBox中選取GridView控件拖到頁面上，然後點擊右鍵，選擇Show Smart Tag,在Choose Data Source中選擇 New Data Source, 出現Data Source Configuration Wizard,選擇連接字符串，可以選擇已經存放在web.config中的ConnectionString ,然後可以選擇是使用存儲過程，還是從表或視圖中選擇數據。

在這一步，左側的Where語句可以指定查詢條件，點擊Where，出現Add Where Clause ,選擇要設定條件的列，操作符是等於還是like還是其它，然後選擇Source，也就是說要限定的條件從哪裏取值，可以是Control、 Session、Form、Cookie、QueryStirng等，如果選擇Control，那麼需要在右側，選中是那個控件，然後還可以設定默認值，設定完後系統自動生成Sql 表達式和值的表達式，此時點擊Add按鈕，完成條件的添加，Where Cluase下出現剛剛添加的條件。如果沒有點擊Add，很容易設定了條件，但是因爲沒有添加到Where子句中，所以不起作用。

在這一步，左側的Order By，可以讓我們設定排序列，就是我們取出的記錄要按照什麼派遜，可以設定三個列，是升序還是降序。

在這一部，左側的Advanced，可以設定Advanced Sql Generation Options,這裏可以生成這個查詢的Insert、update、Delete語句，當然，前提是您選擇的字段中必須包含了主鍵。當您想在 GridView中不編寫任何代碼實現對錶格的編輯、刪除等操作時，就必須在配置數據源時，在這裏生成Insert、Update、Delete這些語句。 GridView中編輯刪除等操作的零代碼，就是根據配置數據源時自動生成的這些語句來完成數據源的更新刪除等操作的。

在最後一步，您可以測試一下您剛剛生成的查詢是否正確，最後點擊完成，數據已經出現在頁面上了，按Ctrl+F5運行。

恭喜您！您已經會使用Asp.net來顯示數據庫中的數據了。

 

2、讓GridView可以分頁

 

GridView把數據顯示出來了，但是那麼多條記錄羅列到一頁上是不合適的，我們應該對數據進行分頁。還記得在asp時代，分頁是多麼的麻煩，需要編寫很多的代碼，而且各種分頁組件也應運而生。而在GridView中，您會發現，分頁是如此的簡單，只需要您輕點鼠標，在Show Smart Tag中，選中Enable Paging，表格的分頁操作變完成了，是不是So Easy呢。

並不是什麼數據源都可以讓GridView實現自動分頁的，比如如果 DataSourceMode是DataReader，就無法實現自動分頁。而且只有ObjectDataSource是界面級別的支持分頁，類似我們常用的SqlDataSource都是先提取所有的記錄，然後只顯示本頁需要顯示的記錄，然後拋棄其餘的記錄，都有點浪費資源的啦！

當GridView的AllowPaging屬性設置爲True的時候，我們實現了分頁，我們還可以對分頁進行一些個性化的設置。常用的屬性包括：PageIndex――設置數據顯示的當前頁面，默認是0，也就是數據的首頁。PageSize ――也就是一頁顯示多少條記錄，默認爲10條。在PagerSettings中，還可以對分頁的導航按鈕進行詳細設置，在Mode屬性中，可以設置： Numeric――默認的，分頁用數字表示，1，2，3……。NextPrevious、NextPreviousFirstLast、 NumericFirstLast均可顧名思義，顯示上一頁、下一頁、首頁、末頁等。當Mode設定不是Numeric時，那麼可以通過設定 FirstPageText、LastPageText等屬性來實現分頁導航時，到首頁、末頁、下頁、上頁時顯示的文字提示。

如果想實現分頁界面的完全自動控制，還可以點擊GridView右鍵，選擇編輯模版－ PagerTemplate來實現，在模版中加入若干個Button控件，然後將Button控件的CommandName屬性設置爲Page,將 CommandArgument屬性分別設置爲First、Last、Prev、Next或者一個數字，即可實現分頁操作。

 

3、GridView中的編輯、刪除、排序

數據從數據源中提取出現，顯示在網頁上後，我們如果需要對其中的數據進行編輯、更新、刪除等操作，還是不需要編寫任何代碼，利用GridView內置的功能即可實現。

在智能標記中，點擊編輯列，在Avaliable Fields中，選擇ComandField，然後雙擊Edit,update,cancel和Delete，我們就爲GridView添加了編輯和刪除功能。如果在配置數據源的時候，我們已經生成了Insert、update、delete這些語句，那麼我們現在就可以執行程序。點擊頁面上的Edit，出現Update和Cancel按鈕，同時當前行除了主鍵以外的列，數值都放在了一個文本框中，可以進行編輯，然後點擊Update即可保存。點擊 Delete，刪除當前行記錄。您是不是已經被GridView強大的功能折服了呢？

在Show Smart Tag中，選擇Enable Sorting，這時所有列的Header都變成了一個超鏈接，其實這些都是一個LinkButton控件，運行代碼，在網頁生成的數據表中，點擊第一行中的列名，即可按照當前列進行排序，再次點擊則反向排序。

如果您只需要對其中的幾列進行排序，可以在智能標記中，選擇編輯列，選中要排序的列，然後在右側的屬性中找到SortExpression屬性，然後從下拉框中選擇根據哪個字段排序，一般當然是當前字段咯，完成排序的設置。如果您不需要這一列參與排序，那麼只需要把此列的SortExpression屬性後面的值刪除，也就是說設置成空字符串即可。試一試，是不是排序已經盡在掌握之中了呢？

 

三、GridView中的自定義列

GridView可以根據數據源自動生成列，但是如果我們需要自定義列的顯示方式，讓 GridView的列完完全全的由我們自己來控制，我們就需要用到一種特殊的列――TemplateField。因爲GridView生成的列都是一個字段一列，如果我們需要把兩個字段合併爲一列顯示呢？我們可以使用模板列。我們可以指定包含標記和控件的模版，自定義列的佈局和行爲，我們可以新建一個模版列，也可以直接把已經生成的列轉換爲模版列來進行個性化的設置。

在GridView上單擊右鍵，選擇編輯模版，在彈出菜單中選擇要編輯的列，出現列模版的編輯畫面。其中HeaderTemplate――自定義列的標頭部分顯示的內容，FooterTemplate――腳註部分顯示哪諶藎?/SPAN> ItemTemplate――是打開網頁後此列數據顯示的內容，EditItemTemplate――此列處於編輯狀態時如何顯示， AlternatingItemTemplate――交替項顯示的內容，也就是說爲了顯示效果，可以隔行分別以不同的風格顯示。

Example 1：

我們現在假設有一個表，其中有一個字段是username，我們現在產生一個自定義列，自定義列中包含此人的照片，同時我們假定照片的路徑爲image/username.jpg。我們首先右鍵點擊GridView，在智能標記中，選擇編輯列，添加一個模版列，然後編輯模版中的ItemTemplate，加入一個Image控件，然後右鍵點擊Image控件，選擇Edit DataBindings，在ImageUrl中設置Field Binding，首先我我要Bound to 數據源中的某列，因爲所有圖片的路徑和格式是相同的，唯有名字不同而已，所以我們這裏選中username字段，在format中，我們要自己定義其格式，輸入image/{0}.jpg, {0}代表的就是上面綁定的字段，下面有一個Two Way DataBinding 的複選框，就是是否雙向綁定的意思，如果單向綁定，一般採用Eval，也就是說數值只從數據源傳到頁面上，如果雙向綁定，也就是採用Bind的話，對數據的修改可以回傳到數據源之中。

在web頁面執行時，不同的行因爲username不同，圖片的名字也會做出相應的替換。點擊確定，然後執行當前網頁，我們就可以看到在我們的自定義列中顯示出了用戶的照片。

Example 2：

在數據庫中，存儲性別的時候，一般採用bit數據類型，存儲爲True或者False，在 GridView自動生成列的時候，一般使用CheckedBoxField 列來顯示bit類型的數據，顯示在網頁上就是一個單選框，如果選中，也就是Checked了，就是男的，否則就是女的。這樣看起來，很不直觀，下面我們通過自定義列將性別顯示爲男、女。

首先在GridView的Show Smart Tag中，選擇編輯列，然後雙擊TemplateFields ,添加了一個模版列，確定後，點擊右鍵選擇編輯模版，選中剛添加的列。在ItemTemplate中添加一個DropListDown控件，然後編輯它的數據綁定，Edit DataBinding，把SelectedValue屬性綁定到性別列。

在DropListDown控件中選擇 Edit Item，就是編輯其下拉列表的項，我們添加兩個Item，一個的Text屬性是男，Value設置爲True，一個的Text屬性設置爲女，Value 屬性設置爲False。到這裏，你明白了麼？因爲DropDownList控件的顯示文本和其值是可以不一樣的，我們用數據綁定取到了性別這一列的值， True或者False，然後反映到DropDownList控件上，如果值爲True，因爲Text屬性爲男的Item的Value爲True，所以我們現在運行網頁，在新添加的列中，顯示的不再是單選框或者True、false這些沒有含義的東西，而是以下拉列表的方式顯示出了當前用戶是男還是女。

 

四、自定義列中的數據更新

假設數據庫中有一個"權限"字段，值爲0代表未審覈用戶，爲1代表一般用戶，爲9則代表管理員用戶。根據前面所說的自定義列的辦法，通過對DropListDown的綁定，在網頁中顯示權限爲 "管理員"，而不是顯示數字9。問題產生了，如果我們調整用戶權限的話，比如把一般用戶更改爲管理員，在編輯模版中的用戶權限的下拉列表，如何把它的值返回給數據源來完成更新操作。

我們在EditItemTemplate中設置的DropListDown控件，必須選中了 Two Way DataBinding，也就是數據雙向幫定，這樣才能返回數據。前面我們談到，在GridView中，事件不是單個的，是兩個，一個是發生前，一個是發生後，因爲我們需要在數據更新前把下拉列表的權限值傳送出去，所以我們需要對GridView1_RowUpdating 進行編碼,編碼如下：

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//當前編輯的是哪行？

        int index = GridView1.EditIndex;

 

//取得當前編輯行的GridViewRow對象

        GridViewRow gvr = GridView1.Rows[index];

 

//在當前行中，尋找DropListDown控件

        DropDownList dp = (DropDownList)gvr.FindControl("editdrop");

 

//將DropListDown的值賦給NewValues集合中的權限字段。

        e.NewValues["rights"] = dp.SelectedValue;

}

 

2、RowDataBound事件

在創建gridView控件時，必須先爲GridView的每一行創建一個 GridViewRow對象，創建每一行時，將引發一個RowCreated事件；當行創建完畢，每一行GridViewRow就要綁定數據源中的數據，當綁定完成後，將引發RowDataBound事件。如果說我們可以利用RowCreated事件來控制每一行綁定的控件，那麼我們同樣可以利用 RowDataBound事件來控制每一行綁定的數據，也就是讓數據如何呈現給大家。

還舉同樣的例子，在數據表中，存在性別列，上面我們用DropListDown控件的DataBounding來表示出了中文的性別，但是畢竟不太美觀，我們現在可以利用Label控件和RowDataBound事件來實現完美的中文性別顯示。RowDataBound，

首先，還是把性別列，設置爲模板列，並添加一個Label控件，將Label控件綁定到數據源的性別段，然後我們在GridView控件屬性的事件列表中雙擊RowDataBound，生成如下事件：

Example：

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

//判斷當前行是否是數據行

        if (e.Row.RowType == DataControlRowType.DataRow)

        { //用FindControl方法找到模板中的Label控件

Label lb1= (Label)e.Row.FindControl("Label1");

//因爲RowDataBound是發生在數據綁定之後，所以我們可以

//判斷Label綁定的數據，如果是True，就更改其text屬性爲男

                if (lb1.Text== "True")

                      lb1.Text = "男";

                else

                      lb1.Text = "female";

        }

    }

 

3、RowType

RowType可以確定GridView中行的類型，RowType是玫舉變量 DataControlRowType中的一個值。RowType可以取值包括 DataRow、Footer、Header、EmptyDataRow、Pager、Separator。很多時候，我們需要判斷當前是否是數據行，通過如下代碼來進行判斷 ：

   if (e.Row.RowType == DataControlRowType.DataRow)

 

4、RowDeleting和RowDeleted事件

RowDeleting發生在刪除數據之前，RowDeleted發生在刪除數據之後。

使用RowDeleting事件，可以在真正刪除前再次確認是否刪除，可以通過設置GridViewDeleteEventArgs.Cancel=True來取消刪除；也可以用於判斷當前數據庫記錄數，如果只剩一條記錄且數據庫不能爲空則提示並取消刪除操作。

使用RowDeleted事件，可以在刪除後，通過GridViewDeletedEventArgs的Exception屬性判斷刪除過程中是否產生異常，如無異常，則可以顯示類似於” 1 Records deleted” 之類的提示信息。

Example：

    protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)

{

//取得當前行號，並取得當前行的GridViewRow對象

        int index=e.RowIndex ;

        GridViewRow gvr=GridView1.Rows[index];

//取得當前行第二個單元格中的文字

        str1 = gvr.Cells[1].Text;

//進行提示

        Message.Text ="您將刪除一個用戶，其姓名爲"+str1 ;

    }

    protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)

{

//如果沒有產生異常，則提示成功刪除，否則提示刪除失敗

        if (e.Exception == null)

            Message.Text += "<br>您成功刪除了"+str1 ;

        else

            Message.Text += "刪除失敗，請聯繫管理員";

}

5、RowEditing事件

在GridView中的行進入編輯模式之前，引發RowEditing事件，如果您需要在編輯記錄前進行某些預處理，可以在這裏操作。如果想取消對當前行的編輯，可以把GridViewEditEventArgs 對象的 Cancel 屬性設置爲 true即可。

Example：

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

{

//用NewEidIndex取得當前編輯的行號，然後獲取gridviewrow對象

        GridViewRow gvr = GridView1.Rows[e.NewEditIndex];

 

//判斷，如果當前編輯行姓名欄爲admin用戶，則取消對當前行的編輯

        if (gvr.Cells[1].Text =="admin")

            e.Cancel = true;

}

 

6、RowUpdating和RowUpdated事件

RowUpdating事件發生在更新數據源之前，RowUpdated發生在更新數據源之後。

我們可以在記錄更新前利用RowUpdating做一些預處理工作，比如修改密碼時，因爲密碼在數據庫中不是明文存儲，進行了hash，所以在更新密碼前，應該生成其hash值，再進行更新操作。RowUpdated則可以檢驗更新是否成功。

Example：

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

    {

        GridViewRow gvr = GridView1.Rows[GridView1 .EditIndex ];

//尋找輸入密碼的控件

        TextBox tb1 = (TextBox)gvr.FindControl("tb_password");

//將此控件中的文本hash後，把password存入NewValues這個字典中

        e.NewValues ["password"] =tb1.Text .GetHashCode().ToString () ;

 

    }

    protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e)

{

//如無異常，則更新成功

        if (e.Exception == null)

            Message.Text += "更新成功！";

    }

 

7、Keys、OldValues、NewValues集合

Keys字典中一般存放的是數據源中的主鍵字段的key和value的對應值，如果主鍵由多個字段組成，那麼Keys爲每個鍵字段添加其字段名稱和值。OldValues中存放的是要更新的行的字段名和原始值，每個字段爲其中的一項。 NewValues中存放的是要更新的行的字段名和修改後的值，每個字段爲其中的一項。注意，主鍵字段只存放於keys集合中。

這三個集合中的每一項都是DictionaryEntry類型的對象，我們可以用DictionaryEntry.Key來確定一個項的字段名稱,用DictionaryEntry.Value來確定某項的值。

在上面的例子中，爲了把密碼明文加密後再存入數據庫，我們利用了NewValues字段，重新設置key爲password的項的值。爲了保證安全性，我們在更新數據前對NewValues中的所有值進行html編碼：

Example1:

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//遍歷NewValues，取得其中每一對DictionaryEntry對象

       foreach (DictionaryEntry de in e.NewValues)

 

//de.key就是字段名，如果此處單獨更新某字段的話，也可以直接填寫字段名，//比如 e.NewValues[“password”]

 

       e.NewValues[de.Key] = Server.HtmlEncode(de.Value.ToString());

    }

 

Example2:

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

//分別利用Keys、OldValues、NewValues取得主鍵名、原始數據和更新後數據

        Message .Text = e.Keys["username"] + "的email地址從" + e.OldValues["email"] + "變更爲" + e.NewValues["email"];

}