如何在 GridMVC 中显示具有动态颜色的小矩形答案

【问题标题】：How to display a small rectangle with dynamic color in GridMVC如何在 GridMVC 中显示具有动态颜色的小矩形
【发布时间】：2019-03-20 14:40:01
【问题描述】：

我有一个 MVC 应用程序，我正在从我的模型中填充一个网格。模型属性“RAG”有一个包含颜色名称的字符串。基于此，我用一个彩色小方块填充网格。

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.DMRTitle)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PlannedDate)
        </td>            
        <td>
            @if (item.RAG == "Green")
            {
                <div style="height: 20px; width: 20px; background-color: lightgreen"></div>
            }
            else if (item.RAG == "Amber")
            {
                <div style="height: 20px; width: 20px; background-color: orange"></div>
            }
            else
            {
                <div style="height: 20px; width: 20px; background-color: orangered"></div>
            }
        </td>            
    </tr>
}

此代码工作正常，我的 Grid 按预期呈现。

现在我想添加排序和过滤功能，所以我将我的 Grid 更改为 Grid.MVC。

我可以使用此代码将列呈现为文本。

<div>
@Html.Grid(Model).Columns(columns =>
{
    columns.Add(c => c.DMRTitle).Titled("Milestone").Filterable(true).SetWidth(100);
    columns.Add(c => c.PlannedDate).Titled("Planned Date").Format("{0:dd-MMM-yyyy}").Filterable(true).SetWidth(100);        

    columns.Add(c => c.RAG).Titled("RAG").Filterable(true).SetWidth(100);


}).WithPaging(5).Sortable(true)

如何将 RAG 列中的文本更改为我之前使用的彩色方块？

如果无法添加正方形，我可以根据它包含的值更改单元格背景颜色吗？这也对我有用。

【问题讨论】：

标签： html asp.net-mvc grid.mvc

【解决方案1】：

我终于找到了解决办法。

我刚刚添加了这样的列

columns.Add(c => c.RAG).Titled("RAG").Filterable(true).Sanitized(false).Encoded(false).RenderValueAs(c => new HtmlString(
    "<div style='height: 20px; width: 20px; background-color: " + GetColorForRag(c.RAG) + "'></div>"
    )).SetWidth(50);

这是颜色函数

@functions
{

public string GetColorForRag(string RAG)
{
    if (RAG == "Red")
        return "Orangered";
    else if (RAG == "Amber")
        return "orange";
    else
        return "lightgreen";
}

}

【讨论】：