Blazor中如何根据条件动态修改文本颜色

我通过以下代码为model的CIIrating2021等字段分配A-E评级：

if (model.CIIattainedrequired2021 > model.d4)
{
    model.CIIrating2021 = "E";
}
if (model.CIIattainedrequired2021 < model.d4)
{
    model.CIIrating2021 = "D";
}
if (model.CIIattainedrequired2021 < model.d3)
{
    model.CIIrating2021 = "C";
}
if (model.CIIattainedrequired2021 < model.d2)
{
    model.CIIrating2021 = "B";
}
if (model.CIIattainedrequired2021 < model.d1)
{
    model.CIIrating2021 = "A";
}

并在Blazor表格中展示这些评级：

<td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2019</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2020</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2021</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2022</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2023</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2024</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2025</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2026</p>
</td>

希望根据评级设置文本颜色：A-绿色、B-浅绿色、C-黄色、D-橙色、E-红色，请问如何实现？

第一步：修复评级赋值逻辑 #

原代码存在逻辑覆盖问题，多个if会依次执行，最终被最后满足条件的赋值覆盖。需改成从最高评级（A）的条件开始判断，用else if避免冲突：

if (model.CIIattainedrequired2021 < model.d1)
{
    model.CIIrating2021 = "A";
}
else if (model.CIIattainedrequired2021 < model.d2)
{
    model.CIIrating2021 = "B";
}
else if (model.CIIattainedrequired2021 < model.d3)
{
    model.CIIrating2021 = "C";
}
else if (model.CIIattainedrequired2021 < model.d4)
{
    model.CIIrating2021 = "D";
}
else if (model.CIIattainedrequired2021 > model.d4)
{
    model.CIIrating2021 = "E";
}
// 可选：处理等于d4的情况，根据业务需求调整
else
{
    model.CIIrating2021 = "D";
}

第二步：Blazor中实现评级颜色区分 #

以下三种方法可按需选择：

方法1：内联条件样式 #

在<p>标签中通过方法动态返回样式，在组件的@code块中添加颜色判断逻辑：

<td class="text-center px-2 py-1 mx-0 text-xs">
    <p style="@GetRatingColor(model.CIIrating2019)">@model.CIIrating2019</p>
</td>
<td class="text-center px-2 py-1 mx-0 text-xs">
    <p style="@GetRatingColor(model.CIIrating2020)">@model.CIIrating2020</p>
</td>
<!-- 其他年份单元格同理 -->

@code {
    private string GetRatingColor(string rating)
    {
        return rating switch
        {
            "A" => "color: #2ecc71;", // 绿色
            "B" => "color: #5cdb95;", // 浅绿色
            "C" => "color: #f1c40f;", // 黄色
            "D" => "color: #f39c12;", // 橙色
            "E" => "color: #e74c3c;", // 红色
            _ => "" // 默认无样式
        };
    }
}

方法2：CSS类绑定 #

先在组件<style>或全局CSS中定义颜色类：

.rating-A { color: #2ecc71; }
.rating-B { color: #5cdb95; }
.rating-C { color: #f1c40f; }
.rating-D { color: #f39c12; }
.rating-E { color: #e74c3c; }

然后在Blazor代码中动态绑定类：

<td class="text-center px-2 py-1 mx-0 text-xs">
    <p class="@(string.IsNullOrEmpty(model.CIIrating2019) ? "" : $"rating-{model.CIIrating2019}")">@model.CIIrating2019</p>
</td>
<!-- 其他年份单元格同理 -->

方法3：封装可复用组件 #

创建RatingDisplay.razor组件，统一处理评级展示逻辑：

@* RatingDisplay.razor *@
<p style="@GetRatingColor(Rating)">@Rating</p>

@code {
    [Parameter]
    public string Rating { get; set; } = string.Empty;

    private string GetRatingColor(string rating)
    {
        return rating switch
        {
            "A" => "color: #2ecc71;",
            "B" => "color: #5cdb95;",
            "C" => "color: #f1c40f;",
            "D" => "color: #f39c12;",
            "E" => "color: #e74c3c;",
            _ => ""
        };
    }
}

在表格中调用组件：

<td class="text-center px-2 py-1 mx-0 text-xs">
    <RatingDisplay Rating="@model.CIIrating2019" />
</td>
<td class="text-center px-2 py-1 mx-0 text-xs">
    <RatingDisplay Rating="@model.CIIrating2020" />
</td>
<!-- 其他年份单元格同理 -->

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