在JS的innerHTML中使用asp-action/asp-controller属性报错的解决求助

错误原因分析 #

1. 第一个方案报错：asp-action、asp-controller这类属性是ASP.NET Razor标签助手，仅在服务器端渲染时会被解析为真实的href属性。前端JS直接将包含这些属性的字符串插入DOM，浏览器无法识别，因此抛出属性不允许的错误。
2. 第二个方案无效的原因：
   • newCardHTML是字符串类型，不是DOM元素，无法调用querySelector方法。
   • 代码中url的cardId固定为0，没有替换成实际的currentCardNumber，导致链接无效。
   • linkHtml变量仅使用一次，因此IDE提示冗余。

有效解决方案 #

方案1：利用服务器生成的URL模板（推荐） #

先在Razor视图中生成带占位符的URL模板，前端JS替换占位符为实际卡片ID：

<!-- 在Razor视图中提前定义URL模板 -->
<script>
const deleteCardUrlTemplate = '@Url.Action("DeleteCard", "Cards", new { cardId = "{0}" })';
</script>

然后在JS中构造完整HTML并插入：

// 假设currentCardNumber是你的动态卡片ID
let currentCardNumber = 10;
// 替换模板中的占位符为实际ID
const deleteUrl = deleteCardUrlTemplate.replace("{0}", currentCardNumber);

// 拼接完整的HTML字符串
let newCardHTML = `
  <div class="header">
    <h4 class="card-counter">${currentCardNumber}</h4>
    <a class="button-bin btn" href="${deleteUrl}"></a>                       
  </div>`;

// 将HTML插入到目标容器（示例：id为cardContainer的元素）
document.getElementById('cardContainer').innerHTML += newCardHTML;

方案2：前端直接构造URL #

如果不需要依赖服务器生成URL模板，可以直接拼接路由地址：

let currentCardNumber = 10;
// 直接构造DeleteCard的请求URL
const deleteUrl = `/Cards/DeleteCard?cardId=${currentCardNumber}`;

let newCardHTML = `
  <div class="header">
    <h4 class="card-counter">${currentCardNumber}</h4>
    <a class="button-bin btn" href="${deleteUrl}"></a>                       
  </div>`;

// 插入到DOM目标容器
document.getElementById('cardContainer').innerHTML += newCardHTML;

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