在MVC的Razor页面中如何从脚本访问IEnumerable类型的模型？

直接用@Model输出集合会得到C#对象的字符串表示（比如System.Collections.Generic.List1[YourNamespace.Model]`），这不是JavaScript能识别的数组或对象，所以你之前的写法会失效。下面是两种可行的解决方案：

方案一：将模型序列化为JSON传递给JS #

把C#的集合序列化为JSON格式，再转成JavaScript数组，这样就能正常遍历处理：

@model IEnumerable<YourNamespace.Model>

@section Scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script>
        // 把模型序列化为JSON并转为JS数组
        var modelList = @Html.Raw(Json.Encode(Model));
        
        // 遍历数组，根据属性值添加样式
        $(modelList).each(function(index, model) {
            // 示例：根据模型的Status属性给对应DOM元素加样式
            if (model.Status === "Active") {
                $("#item-" + model.Id).addClass("active-style");
            }
        });
    </script>
}

注意：如果是.NET Core项目，Json.Encode已过时，改用System.Text.Json.JsonSerializer.Serialize：

var modelList = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model));

方案二：通过HTML data属性传递模型属性 #

如果已经把模型渲染到页面DOM中，可以直接给元素添加data-*属性存储需要的模型值，再用JS读取处理：

@model IEnumerable<YourNamespace.Model>

<!-- 先渲染模型对应的DOM元素，附带data属性 -->
@foreach (var item in Model)
{
    <div class="item" data-id="@item.Id" data-status="@item.Status">
        @item.Name
    </div>
}

@section Scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script>
        // 遍历DOM元素，读取data属性并设置样式
        $(".item").each(function() {
            var status = $(this).data("status");
            if (status === "Active") {
                $(this).addClass("active-style");
            }
        });
    </script>
}

注意事项 #

• 确保模型类的属性是公共的、可序列化的，避免循环引用导致序列化失败。
• 不要通过这种方式传递敏感数据，因为前端JavaScript可以直接查看这些数据。

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