ASP.Net Core使用EntityFramework时JS拼接HTML出现意外标识符错误如何解决

错误原因 #

• 直接报错是JavaScript字符串拼接语法错误：JS中拼接静态字符串和动态变量必须用+运算符连接，你现有代码中'<tr><td>'result[i].name'、'asp-route-id="'result[i].value'"这类写法都漏写了连接符，JS解析时无法识别连续的字符串和变量，就会抛出「意外标识符」错误。
• 另外存在一个隐藏功能问题：你代码中写的asp-action、asp-route-id属于ASP.NET Core服务端Tag Helper，仅在视图服务端渲染阶段会被解析为实际的href属性，客户端JS动态拼接的内容不会触发Tag Helper解析，最终生成的链接无法正常跳转。

修复方案 #

你可以选择任意一种写法修复：

写法1：传统字符串拼接 #

// 先通过服务端Url.Action生成控制器根路径，避免硬编码路由
const controllerBaseUrl = '@Url.Action("Index", "替换为你实际的控制器名称")'.replace('/Index', '');
let s = '';
for (var i = 0; i < result.length; i++) {
    s += '<tr><td>' + result[i].name + '</td><td><a href="' + controllerBaseUrl + '/Edit/' + result[i].value + '">Edit</a>| <a href="' + controllerBaseUrl + '/Details/' + result[i].value + '">Details</a> |<a href="' + controllerBaseUrl + '/Delete/' + result[i].value + '">Delete</a></td></tr>';
}

写法2：ES6模板字符串（更简洁，不容易写错拼接符） #

const controllerBaseUrl = '@Url.Action("Index", "替换为你实际的控制器名称")'.replace('/Index', '');
let s = '';
for (var i = 0; i < result.length; i++) {
    s += `<tr>
        <td>${result[i].name}</td>
        <td>
            <a href="${controllerBaseUrl}/Edit/${result[i].value}">Edit</a>| 
            <a href="${controllerBaseUrl}/Details/${result[i].value}">Details</a> |
            <a href="${controllerBaseUrl}/Delete/${result[i].value}">Delete</a>
        </td>
    </tr>`;
}

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