html - 如何在 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>
}

此代码工作正常，我的 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 列中的文本更改为我之前使用的彩色方块？

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

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

}