ASP.NET Core Razor汇率表格代码合理性及优化咨询

我写了一段在cshtml文件中展示汇率数据表格的Razor代码，用4个循环和if-else条件生成对应HTML元素，现在有三个问题：

1. 数据是否已正确读取到cshtml文件中？
2. 循环与条件语句的使用是否合理？
3. 代码能否进一步优化？

代码如下： #

@model IEnumerable<CurrencyResponse>
@{
    ViewData["Title"] = "Index";
}
@foreach (var obj in Model)
{
    <div>
        <h5>Table: @obj.Table</h5>
        <h5>Table number: @obj.No</h5>
        <h5>Date of publication: @obj.EffectiveDate</h5>
        @if (obj.Table == "C")
        {
            <h5>Quotation date: @obj.TradingDate</h5>
        }
    </div>
}
<table class="table table-bordered table-striped" style="width: 100%">
    <thead>
    <tr>
        <th>
            Currency
        </th>
        <th>
            Code
        </th>
    @foreach (var obj in Model)
    {
        @if (obj.Table != "C")
        {
            <th>
                Mid
            </th>
        }
        else
        {
            <th>
                Bid
            </th>
            <th>
                Ask
            </th>
        }
    }
    </tr>
    </thead>
    <tbody>
        @foreach (var obj in Model)
        {
            foreach (var element in obj.Rates)
            {
                <tr>
                    <td width="50%">
                        @element.Currency
                    </td>
                    <td width="50%">
                        @element.Code
                    </td>
                    @if (obj.Table != "C")
                    {
                        <td width="50%">
                            @element.Mid
                        </td>
                    }
                    else
                    {
                        <td width="50%">
                            @element.Bid
                        </td>
                        <td width="50%">
                            @element.Ask
                        </td>
                    }
                </tr>
            }
        }
    </tbody>
</table>

注：代码用h5标签展示表格类型（A/B/C）、编号、发布日期等信息，数据源为NBP的三个API端点。

1. 数据是否已正确读取到cshtml文件中？ #

从代码逻辑来看，只要后端正确将IEnumerable<CurrencyResponse>类型的模型传递给视图，数据就能被读取。可以通过以下方式验证：

• 在视图开头添加@if(Model == null || !Model.Any()) { <p>无数据</p> }，如果页面显示这句话，说明数据没传进来；
• 临时在循环中输出@obj.Rates.Count()，查看是否有正常数值，确认Rates集合是否有数据；
• 检查后端接口是否正确调用API并序列化数据到CurrencyResponse实体中，确保实体属性名和API返回字段匹配（比如Table、No、EffectiveDate等）。

2. 循环与条件语句的使用是否合理？ #

现有写法存在明显不合理之处：

• 表头循环问题：如果Model包含多个CurrencyResponse实例（比如同时返回A、B、C三个表格），表头会重复生成对应列（A表加Mid列，C表加Bid+Ask列），但行数据是按每个表格的Rates分别生成，会导致表头列数和行的列数不匹配，结构混乱；
• tbody嵌套循环问题：遍历每个CurrencyResponse后再遍历其Rates，会生成多组重复的货币名称和代码行（比如A表和B表都有USD，会生成两行USD），不符合汇率表格的常规展示逻辑；
• 重复判断冗余：多处重复obj.Table == "C"的条件判断，代码冗余度高。

3. 代码能否进一步优化？ #

可以从结构、复用性、可读性三个方向优化：

优化方向1：调整为单表格独立展示 #

如果需要同时展示多个汇率表格，建议每个CurrencyResponse对应一个独立表格，避免列数不匹配：

@model IEnumerable<CurrencyResponse>
@{
    ViewData["Title"] = "Index";
}
@foreach (var table in Model)
{
    <div class="mb-4">
        <h5>表格类型: @table.Table</h5>
        <h5>表格编号: @table.No</h5>
        <h5>发布日期: @table.EffectiveDate</h5>
        @if (table.Table == "C")
        {
            <h5>报价日期: @table.TradingDate</h5>
        }

        <table class="table table-bordered table-striped" style="width: 100%">
            <thead>
                <tr>
                    <th>货币名称</th>
                    <th>货币代码</th>
                    @if (table.Table != "C")
                    {
                        <th>中间价</th>
                    }
                    else
                    {
                        <th>买入价</th>
                        <th>卖出价</th>
                    }
                </tr>
            </thead>
            <tbody>
                @foreach (var rate in table.Rates)
                {
                    <tr>
                        <td>@rate.Currency</td>
                        <td>@rate.Code</td>
                        @if (table.Table != "C")
                        {
                            <td>@rate.Mid</td>
                        }
                        else
                        {
                            <td>@rate.Bid</td>
                            <td>@rate.Ask</td>
                        }
                    </tr>
                }
            </tbody>
        </table>
    </div>
}

优化方向2：提取重复逻辑为局部视图 #

将重复的Table == "C"判断逻辑封装成局部视图_RateColumns.cshtml：

@model CurrencyResponse
@if (Model.Table != "C")
{
    <th>中间价</th>
}
else
{
    <th>买入价</th>
    <th>卖出价</th>
}

然后在表头和行中引用：@await Html.PartialAsync("_RateColumns", table)，减少代码冗余。

优化方向3：样式优化 #

去掉内联的width="50%"，改用CSS类控制列宽；利用Bootstrap的间距类（如mb-4）给每个表格添加间距，提升页面可读性。

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