ASP.NET Core MVC中如何在视图脚本遍历控制器传来的集合并拼接URL

方案1：将服务器端集合转为JS可直接使用的JSON数组 #

利用Razor的Json.Serialize方法，把模型中的Model.IDs序列化为JSON字符串，再通过Html.Raw输出给JS，就能在脚本里正常遍历集合。

完整代码示例：

@model MVCTEST.Controllers.ViewModel 

@{
    // 将服务器端的IDs集合序列化为JSON字符串
    var idsJson = Json.Serialize(Model.IDs);
}

<div id="timezone">
    <a id="url">URL</a>
</div>

<script>
    $(document).ready(function () {
        localStorage.setItem('timezone', 'cairo');
        var timezone = window.localStorage.getItem('timezone');
        
        // 获取服务器端传入的IDs数组
        var ids = @Html.Raw(idsJson);
        
        // 按需拼接参数：可选逗号分隔字符串或多参数形式
        // 逗号分隔示例
        var idsParam = ids.join(',');
        // 多参数示例（格式：ids=1&ids=2）
        // var idsParam = ids.map(id => `ids=${id}`).join('&');
        
        // 拼接最终URL
        $('#url').attr('href', `../../Info/GetInfoDetails/@id?timezone=${timezone}&ids=${idsParam}`);
    });
</script>

方案2：直接在Razor中生成参数字符串 #

如果不需要在JS中做复杂遍历逻辑，可直接在Razor视图里用string.Join把ID集合拼成字符串，再传给JS使用：

@model MVCTEST.Controllers.ViewModel 

<div id="timezone">
    <a id="url">URL</a>
</div>

<script>
    $(document).ready(function () {
        localStorage.setItem('timezone', 'cairo');
        var timezone = window.localStorage.getItem('timezone');
        
        // 通过Razor直接生成逗号分隔的ID字符串
        var ids = "@string.Join(",", Model.IDs)";
        
        // 拼接URL
        $('#url').attr('href', `../../Info/GetInfoDetails/@id?timezone=${timezone}&ids=${ids}`);
    });
</script>

关键注意点 #

• 使用Html.Raw(idsJson)是为了避免Razor把JSON字符串转义成HTML实体，确保JS能正确解析数组。
• 若Model.IDs是复杂对象集合，Json.Serialize依然能正常序列化，只需在JS中对应访问对象属性即可。
• URL参数格式需和后端接口的接收逻辑匹配，比如逗号分隔或多参数形式，后端要做对应处理。

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