很多時候，我們在使用 GridView 展示數據時，希望最終用戶可以編輯數據並且同步到數據源中。這是一項繁瑣的工作。我們需要自定義模板列，並且在后台手動獲取更新值，最后使用 SQL 語句同步到數據庫中。
但是，現在我們有了 C1 Wijmo GridView ,這些繁瑣的工作都成為歷史。C1GridView 僅僅通過一個屬性-AllowClientEditing 便允用戶在客戶端編輯單元格內容。
需要編輯時，我們可以通過雙擊單元格使其進入編輯狀態即可。完成編輯后，選擇其它單元格去保存編輯值。
這篇文章將敘述在不執行任何 PostBack 的情況下，如何輕而易舉的更新數據庫。
1.定義數據庫連接字符串並且綁定到 C1GridView
C1GridView 可以綁定 Oledb 數據源或 SQL 數據源。本文中，我們將使用 Oledb 數據源。請根據下面的代碼設置 DataKeyNames 和 C1GridView 相關列。同時，我們需要設定 CallbackSettings 值為 editing ，這樣在我們保存時，不會發生 Postback。
參考代碼:
<wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="false" DataKeyNames="CustomerID" ClientSelectionMode="SingleRow" AllowClientEditing="true" ShowFilter="true" OnEndRowUpdated="C1GridView1_EndRowUpdated"> <CallbackSettings Action="Editing, Filtering" /> <Columns> <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID"> </wijmo:C1BoundField> <wijmo:C1BoundField DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyName"> </wijmo:C1BoundField> <wijmo:C1BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName"> </wijmo:C1BoundField> <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City"> </wijmo:C1BoundField> <wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country"> </wijmo:C1BoundField> </Columns> </wijmo:C1GridView>
2.下面，我們定義 Oledb 數據庫連接字符串。因為需要將更改同步到數據庫中，所以我們需要寫 SQL 語句去同步數據源。
參考代碼：
public DataTable GetDataTable() { DataTable dt = Page.Session["Customers"] as DataTable; OleDbConnection con = new OleDbConnection("provider=Microsoft.Jet.Oledb.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind.mdb")); OleDbDataAdapter da = new OleDbDataAdapter(); da.SelectCommand = new OleDbCommand("SELECT * FROM [Customers] Order By [CustomerID]", con); da.UpdateCommand = new OleDbCommand("Update [Customers] set [CompanyName]=?, [ContactName]=?, [City]=?, [Country]=? where CustomerID = ?", con); da.UpdateCommand.Parameters.Add("@CompanyName", OleDbType.VarChar, 50, "CompanyName"); da.UpdateCommand.Parameters.Add("@ContactName", OleDbType.VarChar, 50, "ContactName"); da.UpdateCommand.Parameters.Add("@City", OleDbType.VarChar, 50, "City"); da.UpdateCommand.Parameters.Add("@Country", OleDbType.VarChar, 50, "Country"); da.UpdateCommand.Parameters.Add("@CustomerID", OleDbType.VarChar, 50, "CustomerID"); if (dt == null) { dt = new DataTable(); da.Fill(dt); dt.PrimaryKey = new DataColumn[] { dt.Columns["CustomerID"] }; Page.Session["Customers"] = dt; } da.Update(dt); return dt; }
3.我們僅需在 RowUpdating 和 EndRowUpdated 事件中更新被編輯的行。在客戶端使用 C1 Wijmo GridView 修改數據源。
protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e) { DataTable customers = GetDataTable(); DataRow row = customers.Rows.Find(C1GridView1.DataKeys[e.RowIndex].Value); if (row != null) { foreach (DictionaryEntry entry in e.NewValues) { row[(string)entry.Key] = entry.Value; } } else { throw new RowNotInTableException(); } Page.Session["Customers"] = customers; }
在 EndRowUpdated 事件中重新綁定 C1GridView 數據源。
protected void C1GridView1_EndRowUpdated(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEndRowUpdatedEventArgs e) { C1GridView1.DataSource = GetDataTable(); C1GridView1.DataBind(); }
不過，有時 C1GridView 中僅僅有一行數據（例如：執行了過濾操作）。用戶編輯這一行，但是我們並沒有其他行可以點擊，從而無法保存更改。不要着急！
我們只需要添加 button 去調用 C1GridView 的前台方法 Update即可。
<asp:Button ID="btn1" runat="server" Text="Update C1GridView"OnClientClick="btn_ClientClick(); return false;" />
使用下面代碼調用 Update() 方法：
function btn_ClientClick(sender, args) { var grid = $("#C1GridView1"); grid.c1gridview("endEdit"); grid.c1gridview("update"); }
好了，現在我們可以運行程序查看效果了。
Demo 下載：Sample_C1GridView_ClientSideUpdate.zip
Wijmo下載，請進入Studio for ASP.NET Wijmo 2012 v1正式發布（2012.03.22更新）!