如何在Index视图中用单个foreach循环构建双会议列表表格

好问题！用两次foreach遍历数据集确实会增加不必要的性能开销，尤其是当会议数据量较大时。下面我会给出两种基于ASP.NET Razor的解决方案，既实现单个循环遍历，又避免重复代码，完美适配你4列+8列的布局需求。

核心思路 #

我们的目标是只遍历一次Model集合，同时为左侧（特色会议）和右侧（全部会议）生成所需的表格行。关键是复用表格行的渲染逻辑，避免重复编写相同的HTML代码。

方案一：提前收集行内容（推荐，性能更优） #

这种方法先通过单个循环把所有需要的行内容收集到两个列表中，再分别渲染到左右两个表格里，适合数据量较大的场景。

步骤1：定义复用的行渲染逻辑 #

首先，在视图顶部定义一个可复用的函数，用来生成单条会议记录的HTML行（直接复用你原有表格的行代码）：

@{
    // 替换YourEventModel为你实际的模型类型
    Func<YourEventModel, IHtmlContent> RenderEventRow = @item => 
    {
        return Html.Raw($@"
        <tr>
            <td>
                <a asp-action=""Details"" asp-route-id=""{item.Id}""> {Html.DisplayFor(modelItem => item.EventNameAr)}</a>
            </td>
            <td> {Html.DisplayFor(modelItem => item.EventNameEn)} </td>
            <td>
                <a asp-action=""Details"" asp-controller=""ApplicationUsers"" asp-route-id=""{item.ApplicationUser.Id}"">
                    {Html.DisplayFor(model => item.ApplicationUser.ArName)}
                </a>
                <img class=""img-rounded"" src=""{Url.Content("~/" + ARID.Properties.Resources.ProfileImageFolder + "/" + item.ApplicationUser.ProfileImage)}"" width=""50"" height=""50"" /><br />
            </td>
            <td> {Html.DisplayFor(modelItem => item.EventType)} </td>
            <td> {Html.Raw(item.Organizers)} </td>
            <td> {Html.DisplayFor(modelItem => item.Country.ArCountryName)} </td>
            <td> {Html.DisplayFor(modelItem => item.Speciality.ArSpecialityName)} </td>
            <td> {Html.DisplayFor(modelItem => item.EventDate)} </td>
            <td>
                {(User.IsInRole("Admins") || item.ApplicationUserId == currentUser.Id ? $"<a asp-action=\"Edit\" asp-route-id=\"{item.Id}\"><span class=\"glyphicon glyphicon-edit\"></span></a>" : "")}
                {(User.IsInRole("Admins") ? $"<a asp-action=\"Delete\" asp-route-id=\"{item.Id}\"><span class=\"glyphicon glyphicon-trash\"></span></a>" : "")}
            </td>
        </tr>");
    };
}

步骤2：单个循环收集行内容 #

接下来，只用一次foreach遍历Model，把行内容分别存入特色会议和全部会议的列表：

@{
    var featuredRows = new List<IHtmlContent>();
    var allRows = new List<IHtmlContent>();

    foreach (var item in Model)
    {
        var eventRow = RenderEventRow(item);
        // 所有会议都加入全部会议列表
        allRows.Add(eventRow);
        
        // 判断是否为特色会议，是的话加入特色列表（替换IsFeatured为你实际的判断条件）
        if (item.IsFeatured) 
        {
            featuredRows.Add(eventRow);
        }
    }
}

步骤3：渲染左右两个表格 #

最后，在Bootstrap的4列+8列布局中，分别渲染两个列表的内容：

<div class="row">
    <!-- 左侧：4列 - 特色会议 -->
    <div class="col-md-4">
        <h3>特色会议</h3>
        <table class="table-hover table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.EventNameAr)</th>
                    <th>@Html.DisplayNameFor(model => model.EventNameEn)</th>
                    <th>@Html.DisplayNameFor(model => model.ApplicationUserId)</th>
                    <th>@Html.DisplayNameFor(model => model.EventType)</th>
                    <th>@Html.DisplayNameFor(model => model.Organizers)</th>
                    <th>@Html.DisplayNameFor(model => model.Country)</th>
                    <th>@Html.DisplayNameFor(model => model.Speciality)</th>
                    <th>@Html.DisplayNameFor(model => model.EventDate)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var row in featuredRows)
                {
                    @row
                }
            </tbody>
        </table>
    </div>

    <!-- 右侧：8列 - 全部会议 -->
    <div class="col-md-8">
        <h3>全部会议</h3>
        <table class="table-hover table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.EventNameAr)</th>
                    <th>@Html.DisplayNameFor(model => model.EventNameEn)</th>
                    <th>@Html.DisplayNameFor(model => model.ApplicationUserId)</th>
                    <th>@Html.DisplayNameFor(model => model.EventType)</th>
                    <th>@Html.DisplayNameFor(model => model.Organizers)</th>
                    <th>@Html.DisplayNameFor(model => model.Country)</th>
                    <th>@Html.DisplayNameFor(model => model.Speciality)</th>
                    <th>@Html.DisplayNameFor(model => model.EventDate)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var row in allRows)
                {
                    @row
                }
            </tbody>
        </table>
    </div>
</div>

方案二：单个循环中直接渲染两个区域（简洁版） #

如果你觉得收集列表的方式有点繁琐，也可以直接在单个foreach循环中，同时向两个表格的tbody输出内容。这种方式更简洁，适合数据量较小的场景：

<div class="row">
    <!-- 左侧：特色会议表格（先写好结构，留空tbody） -->
    <div class="col-md-4">
        <h3>特色会议</h3>
        <table class="table-hover table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.EventNameAr)</th>
                    <th>@Html.DisplayNameFor(model => model.EventNameEn)</th>
                    <th>@Html.DisplayNameFor(model => model.ApplicationUserId)</th>
                    <th>@Html.DisplayNameFor(model => model.EventType)</th>
                    <th>@Html.DisplayNameFor(model => model.Organizers)</th>
                    <th>@Html.DisplayNameFor(model => model.Country)</th>
                    <th>@Html.DisplayNameFor(model => model.Speciality)</th>
                    <th>@Html.DisplayNameFor(model => model.EventDate)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    if (item.IsFeatured) // 替换为你的特色判断条件
                    {
                        <tr>
                            <!-- 复制你原有表格的行代码 -->
                            <td>
                                <a asp-action="Details" asp-route-id="@item.Id"> @Html.DisplayFor(modelItem => item.EventNameAr)</a>
                            </td>
                            <td> @Html.DisplayFor(modelItem => item.EventNameEn) </td>
                            <!-- 剩余列代码... -->
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>

    <!-- 右侧：全部会议表格 -->
    <div class="col-md-8">
        <h3>全部会议</h3>
        <table class="table-hover table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.EventNameAr)</th>
                    <th>@Html.DisplayNameFor(model => model.EventNameEn)</th>
                    <th>@Html.DisplayNameFor(model => model.ApplicationUserId)</th>
                    <th>@Html.DisplayNameFor(model => model.EventType)</th>
                    <th>@Html.DisplayNameFor(model => model.Organizers)</th>
                    <th>@Html.DisplayNameFor(model => model.Country)</th>
                    <th>@Html.DisplayNameFor(model => model.Speciality)</th>
                    <th>@Html.DisplayNameFor(model => model.EventDate)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <!-- 复制你原有表格的行代码 -->
                        <td>
                            <a asp-action="Details" asp-route-id="@item.Id"> @Html.DisplayFor(modelItem => item.EventNameAr)</a>
                        </td>
                        <td> @Html.DisplayFor(modelItem => item.EventNameEn) </td>
                        <!-- 剩余列代码... -->
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<!-- 单个循环同时填充两个表格 -->
@{
    // 注意：这里的循环只执行一次，同时向两个tbody输出内容
    foreach (var item in Model)
    {
        // 渲染到全部会议表格
        <text>
            <tr>
                <!-- 你的行代码 -->
            </tr>
        </text>

        // 渲染到特色会议表格（判断条件）
        if (item.IsFeatured)
        {
            <text>
                <tr>
                    <!-- 你的行代码 -->
                </tr>
            </text>
        }
    }
}

关键注意点 #

1. 替换判断条件：把item.IsFeatured替换成你实际判断特色会议的逻辑（比如item.FeaturedStatus == "Active"，或者基于其他字段的判断）。
2. 模型类型：把YourEventModel替换成你实际使用的会议模型类名。
3. 性能优化：方案一只遍历Model一次，比两次foreach减少了50%的遍历开销，数据量越大，优化效果越明显。

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