如何在独立JS文件中接收Controller设置的ViewBag数据

开发者阿泽

2026-10-4

问题根本原因

ViewBag是ASP.NET MVC服务端Razor渲染阶段的专属变量，仅在.cshtml视图文件中会被服务端解析替换成实际值。独立的.js文件默认不会被服务端的Razor引擎处理，浏览器加载到的y.js代码里还是原样的ViewBag.Id，前端JS环境不存在这个变量，所以会报未定义错误。

你遗漏的核心步骤

你需要在`Update.cshtml`分部视图（也就是Controller返回的那个分部视图）里，把`ViewBag.Id`的值提前暴露给前端JS可读取的位置，常用两种实现方案：

方案1：通过全局JS变量传递

在Update.cshtml的任意位置（建议放在头部）加入以下代码：

<script>
// 服务端会把@ViewBag.Id替换成实际的数值，渲染后输出给前端
window.sharedId = @ViewBag.Id;
// 如果Id是字符串类型，要加单引号包裹：window.sharedId = '@ViewBag.Id';
</script>

修改y.js代码直接读取全局变量即可：

$("#renderView").load("/v.mvc/View", function () {
    getDetails(window.sharedId, populateData);
});

方案2：通过DOM自定义属性传递（更推荐，不污染全局变量）

在Update.cshtml的根节点或者你确认存在的DOM节点上添加data属性：

<!-- 示例是给你要渲染的容器加属性，你可以根据实际业务选节点 -->
<div id="updateContainer" data-id="@ViewBag.Id">
    <!-- 分部视图其他内容 -->
</div>

修改y.js代码读取DOM的data属性：

$("#renderView").load("/v.mvc/View", function () {
    // 从加载后的DOM里取自定义属性的值
    const targetId = $("#updateContainer").data("id");
    getDetails(targetId, populateData);
});