.NET Core 2 Razor视图如何将模型数据传递至外部JavaScript文件

嘿，这个场景我在做.NET Core Razor项目的时候刚好碰到过，给你分享几个实用的方案，能轻松把模型里的字符串/数组数据传到外部JS文件里，完美适配你用jVectorMap预填充选中区域的需求：

这是最简单的方式，在你的.cshtml文件里，在引入外部JS之前，把模型数据序列化为JS可识别的格式，挂载到全局window对象上：

<!-- 在.cshtml文件的头部或外部JS引入代码之前添加 -->
<script>
    // 把模型中的选中区域ID数组转成全局JS变量
    window.selectedRegionIds = @Json.Serialize(Model.SelectedRegionIds);
</script>

<!-- 接着引入你的外部jVectorMap脚本 -->
<script src="/js/your-jvectormap-script.js"></script>

然后在你的外部JS文件里，直接使用这个全局变量初始化地图即可：

// your-jvectormap-script.js
$(document).ready(function() {
    $('#world-map').vectorMap({
        // 其他地图配置项...
        selectedRegions: window.selectedRegionIds,
        // 处理区域选中/取消的逻辑...
    });
});

注意点：@Json.Serialize会自动把C#的数组/字符串转成标准的JS格式，不用担心语法错误；用window挂载变量是为了避免作用域问题，确保外部JS能访问到。

如果你不想污染全局作用域，可以把数据存在地图容器的data-*属性里，更符合HTML语义化：

在.cshtml中给地图容器添加data属性：

<!-- 用单引号包裹序列化后的JSON，避免和内部的双引号冲突 -->
<div id="world-map" data-selected-regions='@Json.Serialize(Model.SelectedRegionIds)'></div>

<script src="/js/your-jvectormap-script.js"></script>

然后在外部JS里读取并解析这个data属性：

// your-jvectormap-script.js
$(document).ready(function() {
    const mapContainer = $('#world-map');
    // 解析data属性中的JSON字符串为JS数组
    const selectedRegions = JSON.parse(mapContainer.data('selected-regions'));

    mapContainer.vectorMap({
        // 其他地图配置项...
        selectedRegions: selectedRegions,
        // 其他逻辑...
    });
});

如果你的选中区域数据需要从后端动态拉取（比如用户登录后从数据库读取），或者数据比较敏感不想直接渲染在页面里，可以用AJAX请求后端接口：

首先在你的.cshtml.cs页面模型中添加一个API端点：

public IActionResult OnGetGetSelectedRegions()
{
    // 从模型或数据库获取选中区域ID数组
    var selectedIds = Model.SelectedRegionIds;
    return new JsonResult(selectedIds);
}

然后在外部JS里发起GET请求获取数据：

// your-jvectormap-script.js
$(document).ready(function() {
    $.get('/YourPageName?handler=GetSelectedRegions', function(data) {
        $('#world-map').vectorMap({
            // 其他地图配置项...
            selectedRegions: data,
            // 其他逻辑...
        });
    });
});

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