如何在Razor Pages中实现ASP.NET DataList的水平2列布局效果

当然可以实现，和旧版ASP.NET的DataList水平填充效果一致，推荐两种常用实现方式：

方案1：CSS Grid实现（推荐） #

不需要修改循环逻辑，仅通过样式控制布局，灵活性最高，后续调整列数仅需修改CSS参数即可。

样式代码 #

/* 可写在页面<style>标签或全局样式文件中 */
.two-col-container {
  display: grid;
  /* 2为列数，可按需调整为3、4等数值 */
  grid-template-columns: repeat(2, 1fr);
  /* 列与行之间的间距 */
  gap: 1rem;
}
.record-card {
  border: 1px solid #e5e7eb;
  padding: 1rem;
  text-align: center;
}
.grow {
  max-width: 100%;
  height: auto;
}

Razor页面代码 #

<div class="two-col-container">
@foreach (var x in Model.records)
{
    <div class="record-card">
        <div>@x.AccessDate</div>
        <div>@x.AccessLocationName</div>
        <div>
            <img src="@x.imagepath" class="grow" alt="访问记录图片" />
        </div>
    </div>
}
</div>

方案2：Razor分组渲染（适配表格场景） #

如果需要保留表格布局，可以先将数据源按每2条分为一组，逐行渲染每组数据，和旧版DataList的实现逻辑一致。

Razor页面代码 #

@{
    // 按每2条记录为一组拆分数据源
    var recordGroups = Model.records
        .Select((item, index) => new { Item = item, Index = index })
        .GroupBy(x => x.Index / 2)
        .Select(g => g.Select(x => x.Item).ToList());
}

<table class="w-full border-collapse">
@foreach (var group in recordGroups)
{
    <tr class="border text-center">
        @foreach (var x in group)
        {
            <td class="border p-2">
                <div>@x.AccessDate</div>
                <div>@x.AccessLocationName</div>
                <div>
                    <img src="@x.imagepath" class="grow" alt="访问记录图片" />
                </div>
            </td>
        }
        <!-- 最后一组不足2条时补空单元格，保持表格结构整齐 -->
        @if (group.Count < 2)
        {
            <td class="border p-2" colspan="@(2 - group.Count)">&nbsp;</td>
        }
    </tr>
}
</table>

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