ASP.NET Core MVC中Kendo Grid行ID在jQuery href中的引用问题

问题场景 #

在ASP.NET Core MVC中使用Kendo Grid时，创建了操作列并通过jQuery添加下拉菜单，但编辑按钮的URL无法正确传递对应行的AdvertiserId，生成的URL显示为：

edit/System.Linq.Enumerable+SelectListIterator%602[Lib.Models.Advertiser,System.Int32];

原操作列代码：

columns.Template("<div class='btn-group'></div>")
       .Title("").Width(100);

原jQuery添加下拉菜单代码：

$(this).find(".btn-group").append("<button type='button' class='btn btn-light btn-sm dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>Actions<i class='mdi mdi-chevron-down'></i></button>
<ul class='dropdown-menu dropdown-menu-end'>
    <li>
       <a href='advertisers/edit/@Html.Raw(Model.Select(x => x.AdvertiserId));'>
       <button class='dropdown-item' type='button'>Edit</button></a>
    </li>
    <li>
      <button class='dropdown-item text-danger' type='button'>Mark Inactive</button>
    </li>
</ul>");

已更新配置 #

已添加隐藏列存储AdvertiserId：

columns.Bound(x => x.AdvertiserId)
       .Hidden();

现在可通过jQuery的dataItem.AdvertiserId获取每行ID，需要将该ID添加到编辑按钮的<a href='advertisers/edit/'>中。

解决方案 #

方法1：使用Kendo客户端模板（推荐） #

直接在列模板中使用Kendo的客户端绑定语法#= 字段名 #，无需额外jQuery处理，代码更简洁高效：

columns.Template(@<text>
    <div class='btn-group'>
        <button type='button' class='btn btn-light btn-sm dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>
            Actions<i class='mdi mdi-chevron-down'></i>
        </button>
        <ul class='dropdown-menu dropdown-menu-end'>
            <li>
                <a href='advertisers/edit/#= AdvertiserId #'>
                    <button class='dropdown-item' type='button'>Edit</button>
                </a>
            </li>
            <li>
                <button class='dropdown-item text-danger' type='button'>Mark Inactive</button>
            </li>
        </ul>
    </div>
</text>).Title("").Width(100);

方法2：在Grid的dataBound事件中通过jQuery拼接URL #

如果需要保留原有jQuery逻辑，可在Grid的dataBound事件中遍历每行，获取当前行的dataItem并拼接URL：

$("#yourGridId").kendoGrid({
    // 其他Grid配置项
    dataBound: function() {
        var grid = this;
        // 遍历每行
        grid.tbody.find("tr").each(function() {
            var dataItem = grid.dataItem(this);
            // 构建带ID的下拉菜单HTML
            var actionMenu = `
                <button type='button' class='btn btn-light btn-sm dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>
                    Actions<i class='mdi mdi-chevron-down'></i>
                </button>
                <ul class='dropdown-menu dropdown-menu-end'>
                    <li>
                        <a href='advertisers/edit/${dataItem.AdvertiserId}'>
                            <button class='dropdown-item' type='button'>Edit</button>
                        </a>
                    </li>
                    <li>
                        <button class='dropdown-item text-danger' type='button'>Mark Inactive</button>
                    </li>
                </ul>
            `;
            // 将菜单添加到当前行的btn-group中
            $(this).find(".btn-group").append(actionMenu);
        });
    },
    columns: [
        // 其他列配置
        { template: "<div class='btn-group'></div>", title: "", width: 100 },
        { field: "AdvertiserId", hidden: true }
    ]
});

问题原因说明 #

之前使用@Model.Select(x => x.AdvertiserId)是服务器端代码，它会返回整个数据集的Linq查询迭代器，而非当前行的单个ID——服务器端渲染时无法感知客户端每行的具体数据，因此必须通过客户端绑定或事件获取当前行的dataItem来动态生成URL。

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