JavaScript中使用ViewBag报Uncaught SyntaxError: Unexpected token '<'怎么解决

• 语法混用导致服务器未正确渲染变量：你当前混用了Web Forms的<%=输出语法与Razor的@语法，且错误地给@ViewBag.datasourceDevList加了引号，服务器没有识别到变量输出逻辑，直接将<开头的原始代码输出到前端，JS解析时碰到非法开头的<字符直接抛出语法错误。
• 序列化逻辑错误：你将字符串"@ViewBag.datasourceDevList"作为序列化对象，而非实际的ViewBag存储的列表数据，就算语法修复也拿不到正确的数据源。
• 后续业务逻辑存在两处隐性问题：一是后端返回的nameT是List<string>类型（只提取了Name字段），序列化后是纯字符串数组，不需要调用JSON.parse，也不存在value.Name属性；二是tableHtml未初始化空字符串，拼接时会带undefined前缀。

后端原有代码无需调整，仅需要修改前端代码即可：

1. 修正前端变量获取逻辑（Razor视图 .cshtml适用） #

把原有的变量声明行替换为：

// .NET Core/.NET 5+ 版本写法
var nameList = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(ViewBag.datasourceDevList));

如果是.NET Framework项目，用JavaScriptSerializer的写法为：

var nameList = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.datasourceDevList));

注意：不要给ViewBag.datasourceDevList加引号，@Html.Raw是为了防止框架自动转义JSON中的引号为HTML实体，避免JS解析失败。

2. 修正业务逻辑代码 #

替换原有生成下拉框的逻辑：

if (Array.isArray(nameList) && nameList.length > 0) {
    // 初始化空字符串避免undefined
    var tableHtml = '';
    $.each(nameList, function (index, value) {
        // 直接用value，因为本身就是Name字段的字符串值
        tableHtml += `<option value="${value}">${value}</option>`;
        console.log(value);
    });
    $("#selectTrainer").html(tableHtml);
}

如果是Web Forms .aspx视图，变量声明行使用对应语法即可：

var nameList = <%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.datasourceDevList) %>;

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