ASP.NET Core：如何在HTML文件与JavaScript文件中共享变量？

嘿，别慌！这事儿有好几种简单的实现方式，完全适配你懂HTML但JS不太熟的情况，我给你逐个讲清楚：

方法1：用隐藏HTML元素存值（最适合新手的直观方案） #

先在你的registreerPagina.cshtml里，把需要传递的变量值放到一个隐藏的<input>标签里——就像在页面里藏个小纸条：

<!-- 在registreerPagina.cshtml的合适位置（比如表单附近）添加这个 -->
<input type="hidden" id="targetVariable" value="@你的C#变量内容" />

举个例子，如果你的C#变量是ViewBag.RegistrationKey，那就写成value="@ViewBag.RegistrationKey"。

然后去API.js里，把这个“小纸条”的内容读出来就行：

// API.js中读取值
const myVariable = document.getElementById('targetVariable').value;
// 测试一下，看看拿到的对不对
console.log('从CSHTML拿到的变量值：', myVariable);

这个方法完全靠你已经掌握的HTML知识就能搞定，几乎不需要额外的JS技巧，超容易上手。

方法2：直接在CSHTML里声明全局JS变量 #

另一种更直接的方式，在registreerPagina.cshtml里用<script>标签声明一个全局变量，让API.js能直接调用：

<!-- 注意：这段脚本一定要放在API.js引入的前面！ -->
<script>
// 把CSHTML里的值赋值给全局变量，window前缀是为了确保全局可访问
window.pageVariable = "@你的C#变量内容";
</script>
<!-- 然后再引入你的API.js -->
<script src="~/js/API.js"></script>

之后在API.js里直接用这个变量就行：

// API.js里直接使用
console.log('全局变量值：', window.pageVariable);
// 甚至可以省略window，直接写pageVariable也能拿到

这个方法更简洁，但一定要注意脚本加载顺序——必须先声明变量，再加载API.js，不然API.js运行的时候变量还没创建出来哦。

方法3：用HTML5 Data属性（更优雅的规范写法） #

如果你不想用隐藏输入框，也可以把变量值绑定到页面元素的data-*属性上，比如绑定到<body>或者页面的容器元素：

<!-- 在registreerPagina.cshtml里给元素加data属性 -->
<body data-registration-value="@你的C#变量内容">
<!-- 或者绑定到某个特定容器 -->
<div id="registration-container" data-registration-value="@你的C#变量内容">...</div>

然后在API.js里读取这个data属性：

// 读取body上的data属性
const myVariable = document.body.dataset.registrationValue;
// 或者读取容器上的
const myVariable = document.getElementById('registration-container').dataset.registrationValue;

这种写法更符合HTML5的规范，看起来更干净，适合需要传递多个变量到不同元素的场景。

小提醒 #

如果你的变量值里包含引号、换行这类特殊字符，记得在CSHTML里用@Html.Raw(Json.Encode(你的变量))来处理，避免出现JS语法错误。比如：

<input type="hidden" id="targetVariable" value="@Html.Raw(Json.Encode(ViewBag.ComplexValue))" />

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