ASP.NET MVC中Syncfusion TreeGrid单元格超链接传递NoteID问题

需求 #

在EJ TreeGrid中添加超链接，需将NoteID字段值传入href属性。

现有代码 #

col.Field("NoteID")
    .HeaderText("View")
    .Width(80)
    .TextAlign(TextAlign.Right)
    .IsTemplateColumn(true)
    .Template("<a href='" + @Url.Action("GetNoteID", "Notes") + "/" + "/{NoteID}' target='_blank'>View Broker Note</a>")                     
    .Add();

问题 #

无法将NoteID的实际值正确填充到href中的{NoteID}位置。

已尝试的方案（未成功） #

通过QueryCellInfo客户端事件实现，但未达到预期效果：

.ClientSideEvents(eve =>
{
    eve.QueryCellInfo("querycellinfo");
})

function querycellinfo(args) {
    if (args.column.field === "NoteID" && args.cellValue != null) {
        $(args.cellElement).find(".linkbtn").click(function () {
            $.ajax({
                type: "GET",
                url: @Url.Action("GetNoteID", "Notes") + "/" + args.cellValue,
                data: args.data,
                dataType: "json"
            });
        })
    }
}

正确解决方案 #

方案一：修正模板语法（推荐） #

EJ TreeGrid的模板列需要用正确的变量语法绑定字段值，同时修正URL拼接的多余斜杠：

col.Field("NoteID")
    .HeaderText("View")
    .Width(80)
    .TextAlign(TextAlign.Right)
    .IsTemplateColumn(true)
    // 使用 ${NoteID} 作为字段值占位符，适配EJ1的模板语法
    .Template("<a href='" + @Url.Action("GetNoteID", "Notes") + "/${NoteID}' target='_blank'>View Broker Note</a>")                     
    .Add();

提示：如果使用的是EJ2版本，模板语法需改为{{data.NoteID}}，请根据实际版本调整。

方案二：修复QueryCellInfo事件逻辑 #

如果要通过客户端事件实现，需调整逻辑直接修改超链接的href属性（原需求是跳转新窗口，无需AJAX请求）：

.ClientSideEvents(eve =>
{
    eve.QueryCellInfo("querycellinfo");
})

function querycellinfo(args) {
    // 按列的HeaderText匹配更准确，因为该列字段是NoteID但显示为View
    if (args.column.headerText === "View" && args.data.NoteID != null) {
        var link = $(args.cellElement).find("a");
        var targetUrl = '@Url.Action("GetNoteID", "Notes")/' + args.data.NoteID;
        link.attr("href", targetUrl);
    }
}

原尝试的问题点：

• 列匹配逻辑错误：模板列的field是NoteID，但单元格渲染的是超链接，用args.column.field匹配容易出错；
• 逻辑不符需求：原代码用AJAX请求，而需求是打开新窗口跳转；
• 未直接修改超链接的href属性，而是绑定了多余的点击事件。

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