在没有 Jquery/javascript ASP.NET MVC 4 的情况下有条件地更改 WebGrid 行颜色答案

【问题标题】：Change WebGrid row color conditionally without Jquery/javascript ASP.NET MVC 4在没有 Jquery/javascript ASP.NET MVC 4 的情况下有条件地更改 WebGrid 行颜色
【发布时间】：2016-07-05 13:34:02
【问题描述】：

我知道以前有人问过这个问题，但我想以我自己的方式提出更多的澄清。我正在尝试有条件地设置使用 ASP.NET MVC 中的 webGrid 创建的 td 的背景。我看不到这样做的好方法。

到目前为止，我想出的是这样的：

 grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
                   (
                           (item.isCurrentlyBackordered)
                           ?
                                   "<div style=\"background-color: red\">Item Backordered</div>" 
                           :
                           ""
                   )),

这是一个不错的解决方案，但我想要一个更干净的外观，因为 webgrid 默认在表格单元格中有一个小填充，因此 div 也不会完全扩展到单元格的大小。

有没有办法以任何方式编辑 td ？我知道我可以使用 jquery 或 javascript 更改背景和其他样式属性，但我不喜欢先在服务器上构建表，然后在客户端再次有条件地更改颜色的重复工作的想法当这应该在第一次迭代中完成时。

【问题讨论】：

标签： asp.net-mvc-4 webgrid

【解决方案1】：

希望下面的回答对你有帮助

    grid.GetHtml(columns: grid.Columns(grid.Column(columnName: "DATT", header: "Date",format: @<text> @{
        if (@item.isCurrentlyBackordered)
            {                                                                                                             
            <span>Item Backordered</span>                                                                                                          
            <script>
            $("tr:contains('Item Backordered')").css("background-color", "yellow");
            </script>
            }
          }</text>)))

你也可以用一个普通的 JQuery 来写这个

 grid.Column("DATT", header: "Date", format: (item) => new MvcHtmlString
                   (
                           (item.isCurrentlyBackordered)
                           ?
                                   "<span>Item Backordered</span>" 
                           :
                           ""
                   )),

jQuery

<script type="text/javascript">
    $(function () {
        $("tr:contains('Item Backordered')").css("background-color", "yellow");
    })
</script>

【讨论】：

感谢您的帮助。在查看您的示例并在我找到的另一个资源的帮助下，我能够提出一个解决方案。谢谢！

【解决方案2】：

在 Golda 的回复和here 的帮助下我能够创建一个优雅的解决方案。该解决方案使用 JavaScript/JQuery，因为没有它似乎无法做到，但使用（对我而言）比我遇到的更清洁的解决方案。我在模型类（List() 的类型）中所做的是添加一个引用自身的属性并将一个实例转换返回到它的接口，如下所示：

    public iTrans This
    {
        get
        {
            return this;
        }
    }

我这样做是因为 webGrid 似乎只允许访问属性而不是方法；无论访问级别如何。

然后在同一个模型中，我有一个方法可以有条件地将隐藏输入字段的标记附加到数据字符串并将其作为 MvcHtmlString 对象返回：

    public MvcHtmlString htmlColorWrapper(string cellStr, string hexColor = "#ccc")
    {
        if (isOnBackorder)
        {
            cellStr = cellStr + "<input type='hidden' class='color' value='" + hexColor + "'/>";
        }

        return new MvcHtmlString(cellStr);
    }

在标记（部分视图）中，我进行了 grid.Column 调用：

grid.Column("Date", header: "Date", format: (item) => item.This.htmlColorWrapper(item.Date.ToString("MM/dd/yyy"))),

然后我创建 JavaScript 函数：

 window.onload = function () {
     SetFeaturedRow();
 };

 function SetFeaturedRow() {
     $('.color').each(function (index, element) {
         $(element).parent().parent().css('background-color', $(element).val());
     });
 }

window.onload 需要指向 SetFeaturedRow() 函数来设置页面加载时的行颜色，函数名称“SetFeaturedRow”通过 webgrid 构造函数参数存储在 ajaxUpdateCallback 属性中：new WebGrid(Model . .... ajaxUpdateCallback: "SetFeaturedRow");或者可以通过WebGrid引用来设置，ref.ajaxUpdateCallback = "SetFeatureRow"

这将在 WebGrid 类将进行的任何 ajax 调用期间使用。因此，例如，如果 webgrid 有多个页面，则每个选择都是一个 ajax 调用，并且需要重新更新行颜色。

希望这对某人有所帮助。

【讨论】：