如何在GridMVC中显示动态颜色的小矩形

Question

我有一个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>
}

这段代码可以很好地工作，并且我的网格可以按预期呈现。

​

​

现在我想添加网格和过滤功能，所以我把我的SOrting改成了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列中的文本更改为以前使用的彩色方块？

如果不能添加正方形，那么我可以根据单元格包含的值更改单元格的背景颜色吗？这对我也是有效的。

Answer 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";
}

}