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

}

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

1 个答案: