如何在Kendo Grid中带确认删除行并传递选中ID至Destroy方法

我来帮你解决这个问题，你的核心问题出在Destroy动作的参数传递方式和缺少删除确认提示这两点上，咱们一步步来修正：

1. 错误原因分析 #

你在配置Destroy动作时写了 .Destroy(update => update.Action("Delete", "Home", Model.ID))，这里的Model.ID是页面全局ViewModel的ID，并不是当前要删除的行的ID，所以运行时会提示为空。Kendo Grid的Ajax数据源在执行Destroy操作时，会自动把当前选中行的模型数据（包括ID）提交到后台接口，完全不需要手动在Action路径里传参数。

2. 添加删除确认提示 #

给Destroy按钮添加自定义样式类，然后通过jQuery绑定点击事件实现确认弹窗：

• 修改Grid列的Command配置：

columns.Command(command => command.Destroy().Text("Delete").HtmlAttributes(new { @class = "delete-confirm" })).Width(110);

• 在页面底部添加JavaScript代码：

$(document).ready(function() {
    // 绑定删除确认事件
    $(document).on("click", ".delete-confirm", function(e) {
        if (!confirm("确定要删除这条邮件模板吗？")) {
            e.preventDefault(); // 用户取消时阻止删除动作
        }
    });
});

3. 修正Destroy数据源配置 #

把原来带Model.ID的Destroy配置改成不带参数的形式，让Kendo自动传递当前行ID：

.Destroy(update => update.Action("Delete", "Home"))

4. 调整控制器方法（优化UI刷新） #

你的现有Delete方法逻辑没问题，但需要返回Json格式的响应，这样Kendo Grid才能正确刷新界面：

[HttpPost]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, int ID)
{
    Worker.DeleteEmailTemplate(ID);
    // 返回空的数据源结果，告诉Grid删除成功
    return Json(ModelState.ToDataSourceResult());
}

如果需要更严谨的返回，也可以返回被删除的模型数据：

[HttpPost]
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, int ID)
{
    Worker.DeleteEmailTemplate(ID);
    return Json(new[] { new EmailTemplate { ID = ID } }.ToDataSourceResult(request, ModelState));
}

完整修改后的CSHTML代码 #

@(Html.Kendo().Grid<EmailTemplateEditor.Models.EmailTemplate>()
    .Name("EmailTemplates")
    .Columns(columns => {
        columns.Bound(c => c.ID).ClientTemplate("<a href='/EmailTemplate/EmailTemplate/#=ID#'>#=ID#</a>");
        columns.Bound(c => c.Name);
        columns.Bound(c => c.Subject);
        columns.Bound(c => c.OperationalBrand);
        columns.Bound(c => c.Body);
        columns.Bound(c => c.DateAdded).Format("{0:MM/dd/yyyy}");
        columns.Command(command => command.Destroy().Text("Delete").HtmlAttributes(new { @class = "delete-confirm" })).Width(110);
    })
    .HtmlAttributes(new { style = "height: 700px;" })
    .Scrollable()
    .Groupable()
    .AutoBind(true)
    .Sortable()
    .Filterable()
    .Pageable(pageable => pageable
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ID))
        .Read(read => read.Action("GetEmailTemplates", "Home"))
        .PageSize(20)
        .ServerOperation(true)
        .Destroy(update => update.Action("Delete", "Home"))
    )
)

<script>
$(document).ready(function() {
    $(document).on("click", ".delete-confirm", function(e) {
        if (!confirm("确定要删除这条邮件模板吗？")) {
            e.preventDefault();
        }
    });
});
</script>

关于Transport风格的补充（非必须） #

如果你后续确实需要自定义参数传递逻辑，才需要重构为Transport风格，示例如下，但上面的方案已经完全满足你的需求，不需要额外重构：

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.ID))
    .Read(read => read.Action("GetEmailTemplates", "Home"))
    .PageSize(20)
    .ServerOperation(true)
    .Transport(transport => {
        transport.Destroy(destroy => {
            destroy.Action("Delete", "Home");
            destroy.Type(HttpVerbs.Post);
        });
        transport.ParameterMap((data, type) => {
            if (type == "destroy") {
                return { ID: data.models[0].ID };
            }
            return data;
        });
    })
)

内容的提问来源于stack exchange，提问作者Dylan West