Uncaught Syntax Error: 未终止模板字面量错误及JS调用C#集合问题求助

阿华AIGC实验室

2026-5-26

解决「Uncaught Syntax Error: Unterminated template literal」错误

咱们一步步拆解问题，把这个错误彻底解决掉：

首先，问题的核心根源很明确：你调用updateNewSKU(@ViewBag.NewSKUDrop)时，Razor引擎直接把C#的List<string>对象输出成了它的类型字符串System.Collections.Generic.List1[System.String]——这串内容放到JS里完全是非法语法！尤其是里面的反引号1`，直接干扰了JS的解析逻辑，让浏览器误以为遇到了未闭合的模板字符串，所以才抛出了这个错误。

具体解决步骤：

第一步：把C#集合转成JS能识别的JSON数组
你需要让Razor把ViewBag.NewSKUDrop序列化为合法的JS数组，而不是输出类型名称：
- 如果是ASP.NET Core项目，使用Json.Serialize方法：
```
updateNewSKU(@Json.Serialize(ViewBag.NewSKUDrop));
```
- 如果是旧版ASP.NET MVC项目，用Json.Encode配合Html.Raw：
```
updateNewSKU(@Html.Raw(Json.Encode(ViewBag.NewSKUDrop)));
```
这样渲染后的JS代码会变成updateNewSKU(["item1", "item2", ...]);，这才是JS能正常解析的数组格式。
第二步：优化JS函数（可选但更安全）
你当前用字符串拼接生成<option>的写法存在XSS风险（如果List里的内容包含特殊字符，会破坏HTML结构），推荐改成用jQuery API直接创建元素：
```
var updateNewSKU = function(make) { 
  // 先清空下拉框
  var $skuSelect = $("select#NewSKU").empty();
  // 循环生成选项
  for (var i = 0; i < make.length; i++){ 
    $skuSelect.append($("<option>", {
      value: make[i], // 用List里的实际值作为选项value
      text: make[i]   // 用List里的实际值作为显示文本
    }));
  } 
}
```
另外提一句：你原来的函数里用循环下标i作为option的value和文本，应该不是你的真实需求吧？改成make[i]才能把List里的字符串正确显示到下拉框中。
第三步：验证结果
修改后刷新页面，打开控制台检查，原来的语法错误应该已经消失，下拉框也会正确加载ViewBag.NewSKUDrop里的内容。