Kendo Grid自定义列求助：添加带JS点击链接的列编译报错

我最近尝试给Kendo Grid添加一个包含可点击链接的自定义列，想用模板方法实现，但代码编译报错了。想请教下，能不能在Kendo Grid里创建这种带可点击链接、能调用JavaScript函数的自定义列？

我的代码片段如下：

@ModelType IEnumerable(Of Gatekeeper.SystemGroupMembers)
@Code
    ViewData("Title") = "DisplayMembers"
End Code
@(Html.Kendo().Grid(Model) _
    .Name("...")
    // 这里是我尝试添加模板列但编译出错的部分
)

当然可以实现这种需求！你编译报错大概率是模板的Razor语法没写对，下面给你一个VB.NET Razor环境下的正确实现示例：

1. 完整实现代码 #

@ModelType IEnumerable(Of Gatekeeper.SystemGroupMembers)
@Code
    ViewData("Title") = "DisplayMembers"
End Code

<script>
    // 定义要调用的JavaScript函数
    function handleMemberAction(memberId) {
        console.log("开始处理成员ID：" + memberId);
        // 这里可以写你的业务逻辑，比如弹出详情弹窗、发起AJAX请求、页面跳转等
    }
</script>

@(Html.Kendo().Grid(Model) _
    .Name("systemGroupMembersGrid") _
    .Columns(columns =>
        columns.Template(Function(item)
            @<text>
                <a href="javascript:void(0);" onclick="handleMemberAction(@item.Id)">查看详情</a>
            </text>
        ).Title("操作") _
        // 其他常规列配置示例
        .Bound(Function(item) item.MemberName).Title("成员名称") _
        .Bound(Function(item) item.GroupName).Title("所属组")
    ) _
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(Function(item) item.Id))
    )
)

2. 关键注意点 #

• 模板语法正确包裹：在VB.NET的Razor模板里，必须用@<text>标签包裹HTML内容，避免Razor解析时出现语法错误
• 正确传递模型数据：调用JS函数时，通过@item.Id把模型的属性值注入到渲染后的HTML中，确保JS能拿到正确的参数
• 避免默认跳转：用javascript:void(0);作为链接的href值，防止点击链接时触发页面跳转行为

3. 更优雅的事件绑定方式（推荐） #

如果不想用内联的onclick，可以采用事件委托的方式绑定点击事件，更符合现代前端开发规范：

// 修改模板列的HTML，去掉onclick，添加自定义数据属性和样式类
columns.Template(Function(item)
    @<text>
        <a href="javascript:void(0);" class="member-action-link" data-member-id="@item.Id">查看详情</a>
    </text>
).Title("操作")

// 在页面加载完成后绑定事件
$(document).ready(function() {
    $("#systemGroupMembersGrid").on("click", ".member-action-link", function() {
        var memberId = $(this).data("member-id");
        handleMemberAction(memberId);
    });
});

这种方式把HTML结构和事件逻辑分离，后期维护起来更方便，也能避免一些内联事件带来的问题。

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