如何在Kendo UI Grid MVC中生成自定义按钮并提交行UID对应单元格数据？

没问题，作为Kendo UI for ASP.NET MVC的新手，这个需求其实很容易实现，我给你一步步拆解：

1. 在Grid中添加自定义操作按钮 #

首先，你需要在Grid的列配置里添加一个自定义命令列，用来放置你的操作按钮。假设你已经有了基础的Grid代码，只需要在Columns中加入这段配置：

@(Html.Kendo().Grid<PromotionVM>()
    .Name("promotionGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Hidden(); // 如果不需要显示Id列，可以隐藏
        columns.Bound(p => p.Name);
        // 其他列...
        // 添加自定义操作按钮
        columns.Command(command =>
        {
            command.Custom("GetDetails")
                   .Text("获取详情")
                   .Click("onGetDetailsClick"); // 绑定点击事件函数
        }).Width(120);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetPromotions", "Home")) // 你的读取接口
    )
)

这里的关键是command.Custom()方法，指定按钮名称、显示文本，并且绑定点击事件onGetDetailsClick——也就是你准备好的空JS函数，接下来我们完善它。

2. 完善JavaScript函数获取行Id并发起Ajax请求 #

接下来，在你的JS文件或者页面脚本块里，实现onGetDetailsClick函数，通过Kendo Grid的API获取当前行的Id值，然后发起Ajax请求：

function onGetDetailsClick(e) {
    e.preventDefault(); // 阻止默认行为

    // 获取当前点击的行数据
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var promotionId = dataItem.Id; // 从PromotionVM中获取Id

    // 发起Ajax请求
    $.ajax({
        url: "/Home/GetPromotionDetails", // 你的详情接口地址
        type: "GET",
        data: { id: promotionId }, // 传递Id参数
        success: function(response) {
            // 请求成功后的处理逻辑，比如弹出详情、更新页面等
            console.log("获取到的详情数据：", response);
            // 示例：显示模态框或者更新DOM
        },
        error: function(xhr, status, error) {
            // 请求失败的处理
            console.error("请求出错：", error);
            alert("获取详情失败，请稍后重试");
        }
    });
}

关键知识点说明： #

• $(e.currentTarget).closest("tr")：找到点击按钮所在的行元素
• this.dataItem(行元素)：通过Grid的dataItem方法获取该行对应的PromotionVM对象，这样就能直接拿到Id属性
• 如果你用的是fetch而不是jQuery的$.ajax，也可以替换成对应的代码逻辑，核心都是拿到promotionId后传递给后端接口

3. 后端接口示例（可选） #

如果你需要后端的参考代码，这里给一个ASP.NET MVC的Action示例：

public ActionResult GetPromotionDetails(int id)
{
    // 根据Id从数据库或其他数据源获取详情数据
    var promotionDetails = _promotionService.GetPromotionById(id);
    return Json(promotionDetails, JsonRequestBehavior.AllowGet);
}

这样一套流程下来，点击自定义按钮就能准确获取每行的唯一Id，并且发起Ajax请求获取对应数据了。如果还有其他细节需要调整，比如按钮样式、请求方式，都可以根据自己的需求修改。

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