jQuery循环中使用@Html.ActionLink时item未定义的问题排查

我在第一列可正常展示Studentid，但在第四列结合@Html.ActionLink使用时，系统提示“item在当前上下文中未定义”，@Html.ActionLink("Edit", "Edit", new { id = item.Studentid })中的item.Studentid无法正常生效，而前面代码里item的属性可正常调用。

问题截图：

相关代码 #

$.each(data, function (i, item) {
    var stdid = item.Studentid;
    var rows = "<tr>"
    + "<td class='prtoducttd'>" + item.Studentid + "</td>"
    + "<td class='prtoducttd'>" + item.StudentName + "</td>"
    + "<td class='prtoducttd'>" + item.StudentAddress + "</td>"
    + "<td class='prtoducttd'>" 
    + '@Html.ActionLink("Edit", "Edit", new { id = item.Studentid })'   
    + "</td>"

核心原因 #

@Html.ActionLink是后端Razor语法，会在页面服务器渲染阶段执行；而$.each里的item是前端JavaScript变量，只有页面加载完成后在浏览器端才会存在。后端渲染时根本识别不了前端的item变量，所以会报错“item在当前上下文中未定义”。

解决方案 #

直接用前端拼接HTML的方式生成Edit链接，不要混用后端Razor语法：

$.each(data, function (i, item) {
    var stdid = item.Studentid;
    // 拼接Edit链接的HTML，替换成你的实际控制器名称
    var editLink = '<a href="/你的控制器名/Edit/' + stdid + '">Edit</a>';
    var rows = "<tr>"
    + "<td class='prtoducttd'>" + item.Studentid + "</td>"
    + "<td class='prtoducttd'>" + item.StudentName + "</td>"
    + "<td class='prtoducttd'>" + item.StudentAddress + "</td>"
    + "<td class='prtoducttd'>" + editLink + "</td>"
    + "</tr>";
    // 后续将rows添加到表格的逻辑
});

如果想复用后端路由规则，可以先在页面生成模板再替换：

<!-- 页面中隐藏一个路由模板 -->
<span id="editLinkTpl" style="display:none">@Html.ActionLink("Edit", "Edit", new { id = 0 })</span>

$.each(data, function (i, item) {
    var stdid = item.Studentid;
    // 复制模板并替换ID
    var editLink = $('#editLinkTpl').html().replace('0', stdid);
    var rows = "<tr>"
    + "<td class='prtoducttd'>" + item.Studentid + "</td>"
    + "<td class='prtoducttd'>" + item.StudentName + "</td>"
    + "<td class='prtoducttd'>" + item.StudentAddress + "</td>"
    + "<td class='prtoducttd'>" + editLink + "</td>"
    + "</tr>";
    // 后续逻辑
});

ASP.NET Core项目还可以用Url.Action生成基础路由：

// 先获取后端生成的基础路由地址
var editBaseUrl = '@Url.Action("Edit", "你的控制器名")';
$.each(data, function (i, item) {
    var stdid = item.Studentid;
    var editLink = '<a href="' + editBaseUrl + '?id=' + stdid + '">Edit</a>';
    // 其余代码同上
});

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