DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗，這個UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調度程序、圖表、數據編輯器和報表等）。

在這篇文章中，我們將介紹DevExpress Blazor Grid?組件的新單元格編輯模式功能（在v23.2發(fā)布周期中作為社區(qū)技術預覽版提供）。

獲取DevExpress v23.2正式版下載

DevExpress技術交流群9：909157416      歡迎一起進群討論

單元格編輯UI

當啟用單元格編輯模式時，用戶可以單擊單元格，并通過這樣做將其切換到編輯模式。一旦進入編輯模式，DevExpress Blazor Grid將在單元格中顯示一個就地編輯器，用戶可以使用此編輯器編輯當前單元格值，或者將焦點移動到其他單元格并顯示關聯(lián)的編輯器。當焦點移到另一行時，控件將驗證用戶輸入并根據需要保存更改。

當使用DevExpress Blazor Grid的單元格編輯模式時，Edit（編輯）、Cancel（取消）和Save按鈕是不必要的。您可以從命令列中刪除這些按鈕，也可以刪除整個命令列。不使用內置命令列，您可以添加工具欄或上下文菜單來顯示自己的新記錄和/或Delete按鈕。

要在您的Blazor應用程序中激活單元格編輯模式，必須：

1. 啟用d?屬性，并將 e?屬性設置為 EditCell。
2. 如果您的數據對象有一個或多個主鍵，請將它/它們分配給/ 屬性。
3. 處理和 事件來處理保存和刪除操作。
4. (可選)要在Grid組件中顯示與crud相關的命令按鈕，可以在 模板中聲明對象。

<DxGrid Data="DataSource"
KeyFieldName="EmployeeId"
EditMode="GridEditMode.EditCell"
KeyboardNavigationEnabled="true"
EditModelSaving="Grid_EditModelSaving"
DataItemDeleting="Grid_DataItemDeleting">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
</DxGrid>
@code {
IGrid Grid { get; set; }
IEnumerable<EditableEmployee> DataSource { get; set; }
// ...
async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
// Saves changes
}
async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
// Deletes the processed data item
}
}

與DevExpress Blazor Grid的其他數據編輯模式類似，單元格編輯模式根據列數據類型自動生成單元格編輯器。對于高級使用場景，您可能需要自定義自動生成的編輯器，或者用所需的編輯器替換它們。當您探索這個特性時，一定要檢查單元格編輯是否與為EditSettings和CellEditTemplate定義的DevExpress編輯器(以及自動生成的編輯器)一起工作。

鍵盤支持

單元格編輯模式支持鍵盤導航，并附帶一組預定義的鍵盤快捷鍵，因此它要求您啟用 屬性。要在數據單元格中顯示編輯器，用戶可以聚焦該單元格并按Enter。當編輯器可見時，以下鍵盤快捷鍵可用：

• Enter — 驗證單元格值并隱藏編輯器。
• Esc — 隱藏編輯器并丟棄在此單元格中所做的更改，隱藏編輯器時按Esc將放棄行中所做的所有更改并取消行編輯。
• Tab/Shift+Tab — 隱藏編輯器，聚焦下一個/上一個數據單元格，并在新聚焦的單元格中顯示編輯器。

要在網格單元格之間快速導航，用戶還可以執(zhí)行以下內置快捷方式(隱藏本地編輯器時可用)：

• Home/End — 聚焦當前行的第一個/最后一個單元格。
• Ctrl+Home/Ctrl+End — 聚焦當前頁面上的第一個/最后一個數據單元格。
• Page Up/Page Down — 向上/向下移動焦點一頁。

內置驗證

DevExpress Blazor?Grid?根據編輯模型中定義的?數據注釋屬性?自動驗證用戶輸入，一旦用戶將焦點從編輯的單元格上移開，網格將驗證該單元格的值。當焦點離開已編輯的行或用戶按下Save按鈕時，網格驗證已編輯數據項的所有字段值。

驗證后，組件將用彩色輪廓標記編輯器并顯示驗證圖標。用戶可以將鼠標懸停在錯誤圖標上，在工具提示中顯示相應的錯誤消息。網格阻止用戶編輯其他行，直到解決了所有驗證錯誤。

保存更改

使用單元格編輯，您可以隨時保存更改，可以將和事件處理程序中的更改直接發(fā)布到底層數據庫，從而實現(xiàn)逐行保存操作。或者，您可以在內存中積累更改(批處理編輯)，并在用戶執(zhí)行特定操作(例如，按下外部按鈕)時將它們發(fā)布到數據庫。

要在Blazor應用程序中引入批處理數據編輯，請對代碼進行以下更改：

1. 創(chuàng)建累積用戶更改的存儲。
2. 在和事件處理程序中，將更改放在此存儲中，替代將其發(fā)布到數據庫中。
3. 創(chuàng)建允許用戶放棄累積更改或將其應用于底層數據源的按鈕。
4. 處理事件來根據需要突出顯示修改的單元格。