再議ASP.NET DataGrid控制項中的“添加新行”功能

在園子裡搜尋了一下，發現不管是panchengyong的“在DataGrid快速添加新行(c#) ”還是piccolo的”在DataGrid快速添加新行“，都只是簡單的實現了添加新行，功能上還是有改進的餘地。

說起在DataGrid中添加新行，ASP.NET開發的大牛人物：Dino Esposito，他的《構建WEB解決方案--應用ASP.NET和ADO.NET》一書中提供了和以上兩位類似的方法，但是Dino又加了些功能，首先就是”添加新行“這個LinkButton放在頁尾，同時這個LinkButton在分頁到最後一頁時才啟用，因為在其他頁面添加新行是不可取的；其次是添加的行如果引起分頁，就切換到新頁並進入此行的編輯模式。

前一段時間，我也使用了這個功能，發現仍然存在兩個問題：
1.點擊”添加新行“按鈕編輯新行時，如果再次點擊”添加新行“的話，這個剛添加的新行會變成空白，編輯模式會進入另外的新行
2.在翻頁時DataGrid的EditItemIndex沒有恢複成-1，會造成其他頁面相同索引的行也進入編輯模式

於是就操刀稍稍修改了一下，解決了這兩個問題，最終效果是這樣的：
圖一：不在最後一頁時，添加新行按鈕不可用

圖二：在最後一頁時，按鈕才可用

圖三：當新加行進入編輯模式後，按鈕再次不可點擊，取消後此新增行會刪除，恢複到圖二

頁尾模板中的LinkButton：<FooterTemplate>
                                <asp:LinkButton id=lbAddNewRow runat="server" CommandName="AddNewRow" Enabled="<%# IsEnableAddNewRow() %>">添加新行</asp:LinkButton>
                            </FooterTemplate>

頁面代碼中IsEnableAddNewRow方法代碼：

1 protected bool IsEnableAddNewRow()
2         {
3             //只有最後一頁並不在編輯模式時才啟用添加新行功能
4             return (dgData.CurrentPageIndex == dgData.PageCount - 1&&dgData.EditItemIndex == -1);
5         }

頁面代碼中ItemCommand事件代碼： 1 private void dgData_ItemCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
 2         {
 3             if(e.CommandName == "AddNewRow")
 4             {
 5                 //先在資料來源添加新行,如果有主鍵欄位,還需要考慮主鍵欄位的資料產生和最後更新時的提交
 6                 LoadData();
 7                 DataRow newRow = dsData.Tables[0].NewRow();                
 8                 dsData.Tables[0].Rows.Add(newRow);
 9                 dgData.DataSource = dsData;
10                 Session["myData"] = dsData;
11                 //判斷添加此行後是否應該換頁                
12                 int currentIndex = dgData.Items.Count;
13                 if(currentIndex >= dgData.PageSize)
14                 {
15                     dgData.CurrentPageIndex ++;
16                     currentIndex = 0;
17                 }                
18                 dgData.EditItemIndex = currentIndex;                
19                 dgData.DataBind();
20                 dgData.Items[currentIndex].Attributes.Add("IsNewItem","True");
21             }
22         }

CancelCommand事件代碼： 1 private void dgData_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
 2         {
 3             LoadData();
 4             //如果在新增行選擇取消，則拒絕添加此行
 5             if(e.Item.Attributes["IsNewItem"] != null && e.Item.Attributes["IsNewItem"] == "True")
 6             {
 7                 dsData.RejectChanges();
 8                 Session["myData"] = dsData;
 9             }                        
10             dgData.EditItemIndex = -1;
11             BindGrid(dgData.CurrentPageIndex);
12         }

以上的例子我寫了一個Demo，打包好的解決方案檔案可以在這裡下載（注意修改Web.config檔案中的連接字串，資料存取碼在DataAccess類中）。
在寫這篇Post的途中，有朋友建議在DataGrid的頁尾為每個欄位放置一個文字框，然後再放置一個“添加此行”按鈕，點擊按鈕後即可將行添加到DataGrid中，如果頁尾沒有做其他用途的話，這種方式也不失為較好的解決方案。