ASP.NET Core Razor中window.onload调用@Model变量报引用错误如何解决

问题原因 #

该报错的核心是Razor渲染字符串类型的Model属性时，不会自动为输出内容添加JavaScript字符串所需的引号。你的degree属性值为XYZ，渲染到JS代码中时会直接生成如下内容：

console.log('Model degree value -' + XYZ );

JS会把无引号包裹的XYZ识别为变量名，而你的代码中并没有定义名为XYZ的变量，因此抛出未定义的引用错误。

修复方案 #

有两种常用的修复方式，推荐优先使用第二种避免特殊字符问题：

1. 手动为Razor变量添加引号
   仅适用于你能确认变量值不含引号、换行等特殊字符的场景：

window.onload = function () {
    console.log('Model degree value -' + '@Model.degree' );
    callJavascriptFunction('@Model.degree');
};

2. 使用Json.Serialize处理（更安全）
   该方法会自动对字符串做转义处理，兼容包含引号、换行、特殊符号的内容，也支持数字、布尔值、复杂对象等类型的参数传递：

window.onload = function () {
    console.log('Model degree value -' + @Json.Serialize(Model.degree) );
    callJavascriptFunction(@Json.Serialize(Model.degree));
};

如果需要处理属性为null的情况，可以追加空值 fallback：

@Json.Serialize(Model.degree ?? "")

额外注意：你当前的OnGet方法标记了async但没有任何异步操作，可以去掉async关键字修改为同步方法，避免编译器警告。

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