asp.net: GridView相關技術(二–重要事件解析）

 

一、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屬性後面的值刪除，也就是說設定成Null 字元串即可。試一試，是不是排序已經盡在掌握之中了呢？

 

三、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"];

}

模板:

<asp:TemplateField>
                               <HeaderTemplate>
                                  <asp:Label ID="lb2222" runat="server" Text="學員姓名"></asp:Label>
                               </HeaderTemplate>
                              
                               <ItemTemplate>
                                  <asp:Label ID="lbname" runat="server" Text='<%# Eval("Name") %>' Width="80px"></asp:Label>
                               </ItemTemplate>
                             
                            </asp:TemplateField>
                            <asp:BoundField DataField="Name" HeaderText="學員姓名" >
                                <ItemStyle HorizontalAlign="Center" Width="80px" />
                            </asp:BoundField>