Telerik UI for ASP.NET MVC Kendo Grid控制器异常时如何撤销变更回显旧值？

解决方案 #

你之前的实现存在两个核心问题：一是Ajax异步请求场景下修改ViewBag不会同步到前端，ViewBag仅在页面首次渲染/返回视图时生效；二是MVC版Telerik UI最终渲染的就是jQuery版Kendo控件，前端API完全通用，cancelChanges方法可以直接调用。按照以下步骤修改即可实现需求：

1. 修改控制器逻辑 #

不需要操作ViewBag，异常时直接往ModelState中添加错误信息，统一返回数据源结果即可，前端Error事件会自动识别错误：

[HttpPost]
public ActionResult RemoveX(int idX){
     Model.typeX removeX = //从上下文取对应id的对象
     try
     {
          //你的删除逻辑，测试可直接抛出异常
          context.SaveChanges();
     }
     catch(Exception e)
     {
          //添加错误信息，前端可直接读取
          ModelState.AddModelError("OperationError", $"操作失败：{e.Message}");
     }
     //成功失败都返回该结构即可，带错误的响应会自动触发前端Error事件
     return Json(ModelState.ToDataSourceResult());
}

新增、更新的控制器方法也遵循相同逻辑，异常时添加ModelState错误即可。

2. 修改前端JS逻辑 #

直接用你已经注册的Error事件处理失败逻辑，删除无用的Change事件和gridAfterChange方法：

function errorFunction(e) {
    if (e.errors) {
        // 撤销所有未同步成功的变更，自动恢复Grid旧数据
        var grid = $("#gridName").data("kendoGrid");
        grid.dataSource.cancelChanges();
        // 若需要强制拉取后端最新数据，可额外调用read方法
        // grid.dataSource.read();
        
        // 弹出自定义提示窗口
        var otherWindow = $("#otherWindow").data("kendoWindow");
        otherWindow.center().open();
        
        // 阻止Kendo默认的错误提示弹出
        e.preventDefault();
    }
}

注意事项 #

• 所有增删改的控制器方法都要遵循相同的异常处理逻辑，不需要单独定制返回值
• cancelChanges方法支持批量操作场景，会自动撤销所有新增、修改、删除的临时变更
• 如果需要在弹窗中展示后端返回的错误信息，直接从e.errors对象中读取即可
• MVC版Telerik UI的前端API和jQuery版完全通用，所有jQuery版支持的方法都可以直接调用，不需要寻找MVC专属实现

内容的提问来源于stack exchange，提问作者Gabriel Plata