MVC Razor - 将颜色应用于动态生成的 div 标签答案

【问题标题】：MVC Razor - Applying colours to dynamically generated div tagsMVC Razor - 将颜色应用于动态生成的 div 标签
【发布时间】：2017-09-13 11:56:53
【问题描述】：

我有一个（大部分）正在运行的小程序。它从数据库返回一个项目代码并返回该代码的数量。然后我在 Razor 中有一个 @foreach 代码块来动态创建包含名称和数量的 div。在其余代码中，有 Knockout 函数可以自动更新显示。但是...我遇到的问题是尝试对每个 div 应用不同的背景颜色。

@foreach (var x in Model.Quantities)
{
    int itemCode = x.ItemEncode;
    string itemName = "";
    int quantity = x.Quantity;
    switch (itemCode)
    {
        case 11:
        <style>.getcolour {background-color: blue}</style>
            itemName = "Item A";
            break;
        case 12:
            <style>.getcolour {background-color: skyblue}</style>
            itemName = "Item B";
            break;
        case 21:
            <style>.getcolour {background-color: red}</style>
            itemName = "Item C";
            break;
        case 31:
            <style>.getcolour {background-color: pink}</style>
            itemName = "Item D";
            break;
        case 41:
            <style>.getcolour {background-color: purple}</style>
            itemName = "Item E";
            break;
        case 61:
            <style>.getcolour {background-color: green}</style>
            itemName = "Item F";
            break;
    }


    <div class="getcolour">
        <h3>@Html.Raw(itemName)</h3>
        <hr />
        <h2>@Html.Raw(quantity)</h2>
    </div>
}

itemNames 和 Quantities 显示正确，因此 foreach 块正在工作，但每个 div 都以 Switch 语句中的最后一种颜色（绿色）呈现。任何有关正确应用颜色的建议将不胜感激。

【问题讨论】：

为颜色声明一个变量并将<style>.getcolour {background-color: blue}</style>替换为color = "blue;"，然后使用<div style="background-color: @color">或者为每种颜色定义单独的样式-<style>.bluediv {background-color: blue} reddiv {background-color: red} .... </style>并为类名定义一个变量跨度>
这正是我想要的。感谢您的快速回复！

标签： c# asp.net-mvc razor

【解决方案1】：

请试试这个。

@foreach (var x in Model.Quantities)
{
    int itemCode = x.ItemEncode;
    string itemName = "";
    int quantity = x.Quantity;
    string bgColor = "";
    switch (itemCode)
    {
        case 11:
            bgColor = "blue";
            itemName = "Item A";
            break;
        case 12:
            bgColor = "skyblue";
            itemName = "Item B";
            break;
        case 21:
            bgColor = "red";
            itemName = "Item C";
            break;
        case 31:
            bgColor = "pink";
            itemName = "Item D";
            break;
        case 41:
            bgColor = "purple";
            itemName = "Item E";
            break;
        case 61:
            bgColor = "green";
            itemName = "Item F";
            break;
        default: break;
    }

    <div style="background-color:@bgColor">
        <h3>@Html.Raw(itemName)</h3>
        <hr />
        <h2>@Html.Raw(quantity)</h2>
    </div>
}

【讨论】：