CSHTML向JavaScript函数传递Model值失败的问题求助

哦，这个坑我之前踩过！你遇到的Uncaught SyntaxError完全是因为JS字符串缺少引号导致的——当你写functionA(@Model.Name)时，Razor会把它渲染成functionA(Dean)，在JS里Dean会被当作一个未定义的变量，而不是字符串值，自然就报错了。

快速修复：给字符串加引号 #

最简单的方式是给@Model.Name包裹单引号（或双引号），让JS识别它是字符串：

<a href="javascript:functionA('@Model.Name')">Call Function</a>

不过要注意，如果你的Name值里包含单引号（比如O'Neil），这种写法会导致字符串提前闭合，依然报错。所以更稳妥的是用JSON序列化来处理。

更稳妥的方案：用JSON序列化生成合法JS值 #

ASP.NET提供了内置的JSON序列化方法，能自动处理引号转义和特殊字符，生成标准的JS字符串：

• 如果你用的是ASP.NET Core，用Json.Serialize：

  <a href="javascript:functionA(@Json.Serialize(Model.Name))">Call Function</a>
  

• 旧版ASP.NET MVC的话，用Json.Encode：

  <a href="javascript:functionA(@Json.Encode(Model.Name))">Call Function</a>
  

这样渲染后会变成functionA("Dean")，就算Name里有特殊字符（比如引号、斜杠），也会被自动转义，完全符合JS语法规范。

更现代的写法：用Data属性+事件监听 #

其实不推荐直接在href里写JS代码，更优雅的方式是把模型值放到HTML元素的data-*属性里，然后用JS监听点击事件获取：

<a href="#" class="js-call-function" data-name="@Model.Name">Call Function</a>

<script>
// 监听点击事件
document.querySelector('.js-call-function').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的跳转行为
    const name = this.dataset.name; // 获取data属性里的值
    functionA(name);
});
</script>

这种写法不仅避免了拼接JS字符串的麻烦，还能降低XSS风险，更符合前端最佳实践。

为什么里能正常显示？ #

因为<span>@Model.Name</span>是直接把字符串输出为HTML文本，不需要遵循JS的语法规则，所以没问题——但JS函数参数必须是合法的JS表达式，字符串必须用引号包裹哦！

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