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

Question

我知道之前有人问过这个问题，但我想以我自己的方式提出更多的问题。我正在尝试有条件地设置使用 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 默认在 table 单元格中有一个小填充，因此 div 不会完全扩展到大小细胞要么。

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

Answer 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>

Answer 2

借助 Golda 的回复和 here 我能够创建一个优雅的解决方案。该解决方案使用 JavaScript/JQuery，因为没有它似乎不可能做到这一点，但使用（对我来说）比我遇到的更清洁的解决方案。我在模型 class（List<>() 的类型）中所做的是添加一个引用自身的属性和 returns 一个实例强制转换为它的接口，如下所示：

    public iTrans This
    {
        get
        {
            return this;
        }
    }

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

然后在同一个模型中，我有一个方法可以有条件地将隐藏输入字段的标记附加到数据字符串，并且 return 它作为 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" 存储在 ajaxUpdateCallback 属性通过 webgrid 构造函数参数：new WebGrid(Model ..... ajaxUpdateCallback: "SetFeaturedRow");或者可以通过WebGrid引用来设置，ref.ajaxUpdateCallback = "SetFeatureRow"

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

希望这对某人有所帮助。

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

Change WebGrid row color conditionally without Jquery/javascript ASP.NET MVC 4

webgrid

asp.net-mvc-4