ASP.NET Core MVC视图中如何展示List集合中每第N个（如第8个）元素

你可以通过以下两种方式实现仅展示每第8条记录的需求： #

方法1：在for循环中直接判断索引（最直观） #

直接将原有foreach替换为带索引的for循环，在循环内添加你提到的模运算判断即可，Razor代码如下：

@for (int i = 0; i < Model.list.Count; i++)
{
    // 索引从0开始计数，i%8==0对应第1、9、17...条记录，刚好匹配5天的单日数据
    if (i % 8 == 0) 
    {
        var forecast = Model.list[i];
        <tr>
            <td>@(TimeUtils.UnixTimeStampToDateTime(forecast.dt).ToLongDateString())</td>
            <td>@forecast.main.temp_min F°</td>
            <td>@forecast.main.temp_max F°</td>
            <td>@forecast.main.temp F°</td>
            <td>@forecast.main.feels_like</td>
        </tr>
    }
}

如果你需要调整取每日的其他时段（比如中午时段），只需要把i%8 == 0中的0改为0-7之间的对应数值即可。 #

方法2：提前过滤集合（代码更简洁） #

你可以借助LINQ的Where重载方法，先过滤出符合要求的记录再遍历，不需要在循环内写判断：

<!-- 先过滤出每第8条记录 -->
@{
    var dailyForecasts = Model.list.Where((forecast, index) => index % 8 == 0).ToList();
}

<!-- 直接遍历过滤后的集合 -->
@foreach (var forecast in dailyForecasts)
{
    <tr>
        <td>@(TimeUtils.UnixTimeStampToDateTime(forecast.dt).ToLongDateString())</td>
        <td>@forecast.main.temp_min F°</td>
        <td>@forecast.main.temp_max F°</td>
        <td>@forecast.main.temp F°</td>
        <td>@forecast.main.feels_like</td>
    </tr>
}

更准确的优化方案（可选） #

如果存在API返回时段偏移的问题，直接按索引取可能出现日期错位，你可以按日期分组统计单日数据，展示的结果更准确：

@foreach (var dayGroup in Model.list.GroupBy(f => TimeUtils.UnixTimeStampToDateTime(f.dt).Date))
{
    // 统计当日最高/最低温，取中午12点左右的记录作为当日温度代表
    var dayMinTemp = dayGroup.Min(f => f.main.temp_min);
    var dayMaxTemp = dayGroup.Max(f => f.main.temp_max);
    var noonForecast = dayGroup.OrderBy(f => TimeUtils.UnixTimeStampToDateTime(f.dt).Hour)
                               .FirstOrDefault(f => TimeUtils.UnixTimeStampToDateTime(f.dt).Hour >= 12) 
                               ?? dayGroup.First();
    <tr>
        <td>@dayGroup.Key.ToLongDateString()</td>
        <td>@dayMinTemp F°</td>
        <td>@dayMaxTemp F°</td>
        <td>@noonForecast.main.temp F°</td>
        <td>@noonForecast.main.feels_like</td>
    </tr>
}

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