如何在Razor循环中根据@item.OS值显示对应图标与文本

算力阿峰

2026-5-15

实现Razor中根据OS值显示对应图标和文本的方案

嘿，这个需求很容易搞定，我给你两种实用的实现方式，你可以根据自己的习惯选：

方法一：使用@if-else条件判断（逻辑清晰，易扩展）

这种方式代码可读性强，如果之后要加更多OS类型，直接加else if就行：

@{ 
    foreach (TestMachine item in Model) { 
        <tr>
            <td>
                @if (item.OS == "window")
                {
                    <i class="fa fa-window"></i> @item.OS
                }
                else if (item.OS == "Cloud")
                {
                    <i class="fa fa-cloud"></i> @item.OS
                }
                // 可以加个默认情况，防止出现意外值
                else
                {
                    @item.OS
                }
            </td>
        </tr> 
    } 
}

方法二：使用三元运算符（代码更紧凑）

如果只有这两种固定情况，用三元运算符能让代码更简洁：

@{ 
    foreach (TestMachine item in Model) { 
        <tr>
            <td>
                <i class="fa @(item.OS == "window" ? "fa-window" : "fa-cloud")"></i> @item.OS
            </td>
        </tr> 
    } 
}