如何在MVC Razor网站中从C#设置全局JavaScript变量

问题根源 #

单独的.js静态文件不会经过ASP.NET MVC的Razor视图引擎解析，你写的'@Session["apiURL"]'会被直接当作普通字符串输出，不会被替换成Session中存储的实际URL。Razor语法仅在.cshtml文件（视图页、布局页等）里才会被引擎处理解析。

可行解决方法 #

方法一：在.cshtml页面注入全局变量

在布局页（比如_Layout.cshtml）或具体视图页中，添加一个<script>标签用Razor语法把API URL赋值给全局变量，之后在apiCalls.js里直接引用这个变量：

<!-- 在.cshtml文件的<head>或<body>底部添加，确保在apiCalls.js之前加载 -->
<script>
    // 定义全局变量存储API URL
    window.apiBaseUrl = '@Session["apiURL"]';
</script>
<script src="~/js/apiCalls.js"></script>

然后在apiCalls.js中使用：

var api = window.apiBaseUrl;
console.log(api); // 此时会输出实际的URL

方法二：使用HTML元素的data属性传递值

在页面的某个元素（比如<body>）上添加自定义data属性，用Razor赋值后再在js中读取：

<!-- 在.cshtml的<body>标签中添加 -->
<body data-api-url="@Session["apiURL"]">

在apiCalls.js中读取：

var api = document.body.dataset.apiUrl;

方法三：将js文件改为Razor视图（不推荐，仅作参考）

把apiCalls.js重命名为apiCalls.cshtml，在文件顶部添加Razor指令后，就可以在里面使用Razor语法：

@{
    Layout = null; // 禁用布局
}
var api = '@Session["apiURL"]';
// 其他原有js代码...

然后在页面中引用这个cshtml文件：

<script src="~/apiCalls.cshtml"></script>

这种方式不推荐，会把静态js文件变成动态视图，影响缓存和性能。

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