Infragistics|Ultimate UI for ASP.NET|WebDataGrid 的客戶端 CRUD

infragistics log


概述:

插入

添加函數傳遞, 與數據源架構匹配的值數組, 來將數據添加到數據源。

$find(<GRID_CLIENT_ID>).get_rows().add(<NEW_VALUES_ARRAY>);

刪除行

請使用刪除函數。

$find(<GRID_CLIENT_ID>).get_rows().remove(<ROW_INSTANCE>,false);

更新

網格中保留數據更新,請將 WebDataGrid 包裝在 UpdatePanel 中以觸發服務器回發。

<asp:UpdatePanel runat="server"> <ContentTemplate> <ig:WebDataGrid ID="wdg" runat="server" AutoGenerateColumns="False" DataSourceID="ods" DataKeyFields="Id" Width="400"> <Columns> <ig:BoundDataField DataFieldName="FirstName" Header-Text="First Name" Key="FirstName" /> <ig:BoundDataField DataFieldName="LastName" Header-Text="Last Name" Key="LastName" /> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing /> <ig:RowAdding /> <ig:RowDeleting /> </Behaviors> </ig:EditingCore> <ig:Selection CellClickAction="Row" RowSelectType="Single"> <SelectionClientEvents RowSelectionChanged="onRowSelectionChanged" /> </ig:Selection> <ig:RowSelectors> </ig:RowSelectors> </Behaviors> </ig:WebDataGrid> <input type="button" value="Delete" onclick="del();" /> <asp:Button Text="Update" runat="server" /> </ContentTemplate> </asp:UpdatePanel>

介紹

WebDataGrid 提供了豐富的 API 來執行服務器 CRUD 操作。您還可以在客戶端添加、修改和刪除數據源中的行。請參閱下面的 JavaScript 以在客戶端執行此操作。本教程將向您展示如何僅在客戶端的網格中插入、更新和刪除數據。

注意:我說過 CRUD 操作“僅限客戶端”,但讓我再解釋一下。所有持久性都在服務器端完成。客戶端 CRUD 方法使用 AJAX 將持久消息發送到服務器,而無需執行完整的回發。此外,使用客戶端 CRUD 方法,您無需編寫後台代碼即可與數據源交互。


以帶有網格和其他控件的頁面為例。

WebDataGrid 應以標準方式顯示數據。要從網格(和數據源)中刪除行,請單擊行選擇器,然後按刪除按鈕。網格數據的更新不會立即保存,因為我將它們與網格內聯。編輯網格中的多個字段,然後單擊“更新”按鈕保存更改。要將數據添加到數據源,請輸入新數據並單擊“添加”按鈕。

注意:WebDataGrid 包含提供向網格添加數據的界面的默認控件。默認情況下,使用網格下方的空行將使用 AJAX 請求將數據添加到源。本文使用與網格不關聯的輸入控件插入數據。



標記

此示例標記包含以下部分中描述的多個控件。第一組控件是WebDataGrid 和UpdatePanel。

WebDataGrid 和 UpdatePanel

此示例的標記以 ScriptManager 和 WebDataGrid 開始。還有一個包含網格和按鈕控件的 UpdatePanel。

WebDataGrid 支持付費模式。僅當行為有效時,才會向客戶端提供網格功能所需的腳本和其他資源。下面的行為編輯器圖像顯示了啟用客戶端 CRUD 所需的行為。



啟用單元格編輯、行添加和行刪除為客戶端提供了必要的腳本文件,以在網格中啟用此行為。啟用行選擇器行為以刪除行。用戶必須選擇一行。需要選擇行為來格式化行選擇。單擊單元格或行選擇器時,將選擇整行。 必須選擇整行,網格 才能觸發RowSelectionChanged事件。在此示例中, 它是在onRowSelectionChanged函數中處理的。此函數提供必要的掛鉤來引用代碼中選定的行。

UpdatePanel 和網格的標記是下面的代碼。


ObjectDataSource

WebDataGrid 需要 ASP.NET 數據源控件來提供用於訪問應用程序的持久性功能的接口。此示例使用 ObjectDataSource,但您也可以使用其他數據源控件。

數據源控件引用名為 PersonRepository 的類中的匹配方法來保存更改。

<asp:ObjectDataSource
ID="ods"
runat="server"
DataObjectTypeName="Person"
DeleteMethod="Delete"
InsertMethod="Insert"
SelectMethod="GetAll"
TypeName="PersonRepository"
UpdateMethod="Update"
onobjectcreating="ods_ObjectCreating">
<DeleteParameters>
<asp:Parameter Name="id" Type="Int32" />

</DeleteParameters>

</asp:ObjectDataSource>

請參閱onobjectcreating  的事件處理程序。 該事件處理程序用於為數據源控件提供 PersonRepository 類的一個實例,而不是在執行每個數據源控件操作時創建一個新實例。 向控件提供對象實例需要在代碼隱藏中添加幾行代碼。

using System;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    private WebStateRepository _repository =
        new WebStateRepository();


    protected void ods_ObjectCreating(object sender, ObjectDataSourceEventArgs e)
    {
        e.ObjectInstance = this._repository.Instance;
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (this.Page.IsPostBack)
        {
            this._repository.Persist();
        }
    }
}
  

該代碼的重要部分是 ods_ObjectCreating 方法的主體。這裡我們提供了一個用於 ObjectDataSource 控件的對象實例。


注意:WebStateRepository 類是本示例中使用的實用程序類,用於存儲會話狀態中的對象集合。該實現將數據源控件引用到實際存儲庫類的實例。


HTML 輸入控件


下面的代碼提供了顯示文本框以供用戶輸入人員姓名所需的標記。當您單擊“添加”按鈕時,頁面上會執行一個名為“ add ”的 JavaScript 函數。

<div>
<input type="text" id="firstName" name="firstName" />
<input type="text" id="lastName" name="lastName" />
<input type="button" value="Add" onclick="add();" />
</div>


腳本

到目前為止的代碼應該看起來很熟悉,但最後一步是實現用於添加和刪除數據的客戶端消息。要批量更新服務器,請更改網格的內聯數據並在 UpdatePanel 中觸發到服務器的回發。


添加數據

  function add() {
    var grid = $find("<%= wdg.ClientID %>");
    var rows = grid.get_rows();
    var newPerson = [$get("firstName").value, $get("lastName").value];
    rows.add(newPerson);
}


將新值數組傳遞給行集合添加函數,以向服務器發送插入請求。此函數使用 ASP.NET AJAX 選擇器  查找頁面上的firstName 和 lastName控件,並根據控件的值創建一個新數組。為了檢查插入,將數組傳遞給 add 函數。

刪除數據

刪除數據有兩個步驟。首先,用戶選擇要刪除的行。它檢索選定的行並允許您刪除該行。要處理選擇過程,請 在 RowSelectionChanged事件中 調用onRowSelectionChanged函數。

var selectedDataKey = "";
function onRowSelectionChanged(sender, eventArgs) {
    var rows = eventArgs.getSelectedRows();
    var selectedRow = rows.getItem(0);
    selectedDataKey = selectedRow.get_dataKey();
}
  

創建selectedDataKey變量以在行選擇更改時存儲所選鍵。onRowSelectionChanged 函數 從eventArgs 獲取選定的行。由於我們已將網格配置為只能選擇一行,因此 我們調用row.getItem(0) 來設置selectedRow變量。selectedDataKey 的值  是通過調用selectedRow 實例 的get_dataKey()函數來設置的。

設置所選鍵後刪除數據源中的行。

  function del() {
    if (selectedDataKey != "") {
        var grid = $find("<%= wdg.ClientID %>");
        var rows = grid.get_rows();
        var row = rows.get_rowFromKey(selectedDataKey);
        rows.remove(row, false);
    }
    else {
        alert("Please select a row to remove.");
    }
}
通過傳遞網格行集合的實例,get_rowFromKey 方法檢索用戶選擇的行。將行實例傳遞給行集合的刪除函數會向服務器發送一條刪除消息。delete 方法的第二個參數稍微複雜一些。參數名稱 是noncommitting  。


如果要保存對數據源的更改,則應將 false 傳遞給此函數。


延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言