C# 如何根据某些条件更改MVC webgrid行文本的颜色

我是MVC新手，请指导我。我需要根据条件更改webgrid行的文本颜色。如前所述，我是MVC新手，所以我不确定从何处着手处理这个问题

下面是视图

@model  IEnumerable<GridViewMVC.Models.Employee>

@{
ViewBag.Title = "Home Page";
WebGrid grid = new WebGrid(Model);
}


<div>
@grid.GetHtml(
    tableStyle:"GridTable",
    headerStyle :"GridHeader",
    footerStyle :"GridFooter",
    alternatingRowStyle :"GridAlterRow",
    rowStyle:"gridRow",        

    columns:grid.Columns(
    grid.Column("Id","Emp Id"),
    grid.Column("Name","Name"),
    grid.Column("Age","Age"),
    grid.Column("Designation","Title"),
    grid.Column("Gender","Gender")
))

</div>

---

现在我想根据这个条件突出显示年龄的背景色。如果年龄在20到30岁之间，背景色应为绿色。如果年龄在30到40岁之间，背景色应该是黄色。如果年龄在40岁以上，则该单元格的背景色应为红色。

请尝试将其放在@grid.Html（）下面

@Scripts.Render（“~/bundles/jquery”）
$（'tr'）。每个（函数（索引）{//迭代所有表行
如果（索引>0）{//跳过标题
if（$（this）.children（'td:nth child（3）'）.text（）<31）//在每行中查找第三个td。这就是您的年龄。
{
$（this.children（'td:nth child（3）'））.css（“背景色”、“绿色”）；
}
else if（$（this）.children（'td:nth child（3）'）.text（）<41）
{
$（this.children（'td:nth child（3）'））.css（“背景色”、“黄色”）；
}
其他的
{
$（this.children（'td:nth child（3）'））.css（“背景色”、“红色”）；
}
}
});

---

由于webgrid只生成一个html表

或更好的

$（'tbody tr'）

（因此不包括页眉和页脚）和

var cell=$（this）.children（'td:nth child（3）'）；if（cell.text（）<31）{cell.css（…）}else if（…

（缓存元素以获得更好的性能）答案是Thanx。我想知道是否有不使用JavaScript或JQuery操作webgrid的方法。我可以从控制器访问webgrid并从那里操作它吗？当然，这是一种快速的方式…我很确定您可以尝试以列格式编写它…参见本文

Emp Id   Name           Age   Designation   Gender
1        Anurag         24    SE             Male
2        Mike           31    Lead           Male
3        George         41    GPM            Male

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
    $('tr').each(function (index) { //iterate over all table rows
        if (index > 0) {     //skip header
            if ($(this).children('td:nth-child(3)').text() < 31)  //look for the 3rd td in each row. thats where your age is.
            {
                $(this).children('td:nth-child(3)').css("background-color","green");
            }
            else if ($(this).children('td:nth-child(3)').text() < 41)
            {
                $(this).children('td:nth-child(3)').css("background-color", "yellow");
            }
            else 
            {
                $(this).children('td:nth-child(3)').css("background-color", "red");
            }
        }
    });
</script>