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

192 瀏覽人次

2023-07-17 更新

概述：

插入

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

$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 傳遞給此函數。