asp.net-mvc - 在 System.Web.Helpers.WebGrid 中定义内联行样式

Question

我正在将我的应用程序迁移到 MVC 3 并尝试使用 System.Web.Helpers.WebGrid。我想得到像这样的html代码:

<table>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
    <tr style="background-color: <%= item.Color %>">
    </tr>
</table>

有 rowStyle 属性，允许为每一行定义 css 类，但每一行会有不同的样式。是否容易实现？

Answer 1

所以我不得不以 hack 结束。首先，将颜色作为另一列的一部分。它必须作为 MvcHtmlString 返回以避免额外的编码:

<%  
    var grid = new WebGrid(Model);
%>
<%= 
    grid.GetHtml(
        tableStyle: "table_class",
        columns:  grid.Columns(
            grid.Column("Importance", CTRes.Importance, (item) => 
                new MvcHtmlString(Html.Encode(item.Importance) + 
                "<div class='color' style='display: none;'>#" + item.Color + "</div>"))
        )
    ) 
%>

然后我们在 $(document).ready() 中设置背景颜色:

<script type="text/javascript">
    $(document).ready(
        function () {
            $('.table_class .color').each(function (index, element) { $(element).parent().parent().css('background-color', $(element).html()); });
        }
    );
</script>