ASP.Net Core如何将PageModel中的对象传递至外部JS文件？

方案1：规范注入全局数据（无额外请求，简洁高效） #

不要直接暴露零散的全局变量，用命名空间包裹避免污染全局作用域。在Index.cshtml中，引入外部JS模块前添加内联脚本，将Model数据序列化为JSON：

<script>
    // 定义专属命名空间，避免和其他脚本冲突
    window.App = window.App || {};
    // 把Model.data序列化为JS对象存入命名空间
    window.App.pageData = @Json.Serialize(Model.data);
</script>
<script type="module" src="~/built/script.js"></script>

然后在script.js中直接读取：

// ES模块中需要通过window访问全局对象
const pageData = window.App.pageData;
console.log(pageData.name, pageData.id);
// 后续业务逻辑基于pageData展开即可

方案2：向JS模块直接传递数据（符合ES模块设计） #

通过内联脚本导入模块的初始化函数，直接把Model数据作为参数传入，完全避免全局变量：

在Index.cshtml中：

<script type="module">
    // 导入模块的初始化方法
    import { initPage } from '/built/script.js';
    // 把Model数据序列化后传入函数
    initPage(@Json.Serialize(Model.data));
</script>

在script.js中导出初始化函数：

// 导出初始化方法，接收页面数据
export function initPage(pageData) {
    // 在这里直接使用传入的pageData
    console.log(pageData.name, pageData.id);
    // 页面的交互逻辑都可以在这里基于数据实现
}

方案3：新增API接口（适合动态/权限敏感场景） #

如果需要后续动态刷新数据，或者数据需要严格的权限校验，新增API控制器是合理选择：

1. 创建API控制器：

[ApiController]
[Route("api/[controller]")]
public class DataController : ControllerBase
{
    [HttpGet("{inputId}")]
    public IActionResult Get(int inputId)
    {
        // 复用原有逻辑生成数据
        var data = new myClass
        {
            name = "name",
            id = inputId
        };
        return Ok(data);
    }
}

2. 在script.js中用fetch请求数据：

// 从URL参数中获取inputId（和PageModel的OnGet参数对应）
const inputId = new URLSearchParams(window.location.search).get('inputId');

fetch(`/api/data/${inputId}`)
    .then(res => res.json())
    .then(pageData => {
        console.log(pageData.name, pageData.id);
        // 处理数据逻辑
    })
    .catch(err => console.error('数据获取失败:', err));

方案选择建议 #

• 仅需页面加载时一次性获取数据：优先选方案2（模块参数传递），其次是方案1，二者都无额外HTTP请求开销，实现简单。
• 需要动态刷新数据/权限校验：选择方案3，通过API接口统一管理数据请求逻辑。

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