Razor Foreach仅显示IEnumerable集合最后一项问题求助

我一眼就揪出问题所在啦——你给每个.cbp-item都硬加了固定的left: 0px; top: 0px内联样式！这会让所有遍历生成的图片项完全重叠在同一个位置，最后自然只能看到最上层的那一个（也就是集合的最后一项）。

先确认：数据层面是正常的 #

从你的后端代码来看，不管是用ViewBag传递数据还是直接把集合作为Model返回，sectorRepository.AllActive().ToList()应该都能正确返回14条数据（毕竟你预期是14个），所以数据本身没问题，锅全在前端样式的定位上。

修复步骤 #

1. 移除导致重叠的固定定位样式

把每个.cbp-item上的left: 0px; top: 0px删掉，让你的图库插件（看起来是Cubeportfolio）自动处理布局定位。修改后的循环代码如下：

@foreach (var item in sector) {
    <div class="cbp-item web-design graphic print motion" style="width: 389px;">
        <div class="cbp-item-wrapper">
            <a href="ajax-lightbox-gallery/project1.html" class="cbp-caption cbp-singlePageInline" data-title="World Clock<br>by Paul Flavius Nechita" rel="nofollow">
                <div class="cbp-caption-defaultWrap">
                    <img src="https://placeimg.com/380/285/arch" alt="">
                </div>
                <div class="cbp-caption-activeWrap">
                    <div class="cbp-l-caption-alignLeft">
                        <div class="cbp-l-caption-body">
                            <div class="cbp-l-caption-title">@item.Name</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
}

2. 确保插件正确初始化

如果你用的是Cubeportfolio这类图库插件，要保证页面JS里已经正确初始化了它，比如：

$(document).ready(function() {
    $('#js-grid-lightbox-gallery').cubeportfolio({
        // 你的插件配置项
        layoutMode: 'grid',
        gapHorizontal: 10,
        gapVertical: 10
    });
});

插件会自动根据容器宽度、每个项的宽度计算位置，完全不需要手动设置left和top。

额外小建议 #

• 把固定的width:389px移到CSS类里，别用内联样式，代码更整洁也方便后续修改；
• 目前所有项的href都是同一个固定地址，如果需要对应不同的Sector，记得改成动态路径，比如href="@Url.Action("SectorDetail", new { id = item.Id })"。

修改完刷新页面，所有图片项就会按插件规则排列，不会再重叠，你就能看到14个带不同名称的图片啦！

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