Razor视图传递模型属性至JavaScript函数时的无效令牌语法错误解决

你碰到的Uncaught SyntaxError: Invalid or unexpected token完全来自Razor渲染后生成的内联onclick代码不符合JS语法要求，不是你独立JS文件里的favouriteBook函数本身有问题。
最常见的触发逻辑：

• 当book.Id为字符串类型时，Razor直接将值嵌入onclick代码，没有给JS字符串参数加包裹引号。比如Id值为NET-2024-001时，最终渲染出的代码是onclick="favouriteBook(NET-2024-001)"，JS解析时会将这串内容当成未定义的变量，碰到横杠、中文、空格这类非法标识符字符时直接抛出语法错误。
• 如果Id取值本身包含双引号、换行符这类特殊字符，会直接截断用双引号包裹的onclick HTML属性，属性截断后残留的碎片代码被JS解析时，必然出现语法错误。

• 优先推荐无转义坑的写法：彻底弃用内联onclick拼动态参数的方式，给按钮加自定义data-*属性存储书籍Id，通过统一的事件绑定逻辑处理点击：

  <button data-book-id="@book.Id">Favourite</button>
  

  对应JS逻辑不需要写在视图里，直接在你现有的独立JS文件里加监听即可：

  // 页面加载完成后绑定所有收藏按钮的点击事件
  document.querySelectorAll('button[data-book-id]').forEach(btn => {
      btn.addEventListener('click', () => {
          const targetBookId = btn.dataset.bookId;
          localStorage.setItem("bookId", targetBookId);
      })
  })
  

• 如果坚持使用内联onclick触发，必须保证渲染出的JS参数是合法的字符串值，给参数补上配对的引号：
  你当前的错误写法：
  onclick="favouriteBook(@book.Id)"
  修正后基础写法：
  onclick="favouriteBook('@book.Id')"
  如果Id取值可能包含单引号、双引号，需要搭配Html.Encode()对值做转义，避免破坏HTML属性结构。
• 顺带修正视图里的HTML结构问题：当前你把<tbody>标签写在了foreach循环内部，会导致每生成一行就重复创建一个tbody，不符合HTML表格的标准结构，建议把<tbody>标签挪到foreach循环外层，仅在循环内部生成<tr>行元素。

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