如何根据 ASP.NET 中数据绑定到该行的值在中继器中设置表行颜色？答案

【问题标题】：How can I set a table row color in my repeater based on the values databound to that row in ASP.NET?如何根据 ASP.NET 中数据绑定到该行的值在中继器中设置表行颜色？
【发布时间】：2015-04-27 13:59:37
【问题描述】：

我有一个中继器控件：

 <table style="width: 100%">
     <asp:Repeater runat="server" ID="rptOptions" OnItemDataBound="rptOptions_ItemDataBound">
                                <HeaderTemplate>
                                    <tr>
                                        <td class="GridHeader">Account</td>    
                                        <td class="GridHeader">Margin</td>  
                                        <td class="GridHeader">Symbol</td>  
                                        <td class="GridHeader">Price</td> 
                                    </tr>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionAccount"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionMargin"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionSymbol"></asp:Label></td>
                                        <td class="GridRow"><asp:Label runat="server" ID="lblOptionPrice"></asp:Label></td>
                                    </tr>
                                </ItemTemplate>
                             </asp:Repeater>
                        </table>

以及以下代码隐藏数据绑定方法：

protected void rptOptions_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Option rowOption = (Option)e.Item.DataItem;

                ((Label)e.Item.FindControl("lblOptionAccount")).Text = rowOption.Account;
                ((Label)e.Item.FindControl("lblOptionMargin")).Text = rowOption.Margin ? "Y" : "N";
                ((Label)e.Item.FindControl("lblOptionSymbol")).Text = rowOption.Symbol;
                       ((Label)e.Item.FindControl("lblOptionPrice")).Text = rowOption.Price.ToString("C", currencyFormat);

            }
        }

该网格中有更多列，但我只是为了这个问题而对其进行了精简。

现在，我想做的是根据价格更改 tr 的背景颜色。如果是在不同级别，我想相应地更改行背景颜色。

我是否必须使用 javascript 来执行此操作，或者有什么方法可以访问代码隐藏中的表行来设置此颜色？

【问题讨论】：

标签： c# html asp.net repeater

【解决方案1】：

让它运行到 runat="Server"

<tr runat="server" ID="trHeader"></tr>

然后在数据绑定事件后面的代码中按 ID 找到 Table Row，就像您为其他服务器端控件所做的那样并更改颜色。

【讨论】：

【解决方案2】：

另一种选择：

<tr class="<%# GetClassForPrice( Container.DataItem ) %>">

在代码隐藏中

protected string GetClassForPrice( object data ) 
{
    var rowOption = (Option)data;
    if(rowOption.Price > 100) return "red";
    else return "green";
}

还有...您不使用数据绑定的任何原因？它会让你消除你的 ItemDataBound 代码隐藏方法。

<tr>
    <td class="GridRow"><%# Eval("Account") %></td>
    <td class="GridRow"><%# ((bool)Eval("Margin")) ? "Y" : "N" %></td>
    <td class="GridRow"><%# Eval("Symbol") %></td>
    <td class="GridRow"><%# Eval("Price", "{0:c}") %></td>
</tr>

【讨论】：

【解决方案3】：

在重复数据绑定事件中使用此代码。

HtmlTableRow tr = (HtmlTableRow)e.Item.FindControl("trID"); 
tr.Visible = false;

【讨论】：

【解决方案4】：

您可以使用的另一个选项是 jQuery。看到您正在使用中继器，您可以完全控制输出。 Jquery 可以进入您的表格，查看数据并按照您的需要设置格式。

看： http://plugins.jquery.com/project/Plugins/category/54

http://plugins.jquery.com/project/Colorize

http://franca.exofire.net/js/demo_cross.html

或者，您可以使用转发器中的代码来设置您需要更改的单元格/行/列的 CSS 类。

您需要使这些控件成为服务器控件（要求：ID="my_thing" runat="server"），创建这些控件（使用查找控件并绑定它们），然后在确定价值。

【讨论】：

【解决方案5】：

Dave Thieben 的回答效果很好，只是缺少 css。

如果您添加以下内容，则示例将起作用：

table tr.red td { background-color:red; }
table tr.green td { background-color:green; }

【讨论】：

嗨，布鲁斯，将来您实际上可以编辑其他答案以更正诸如缺少 CSS 之类的问题，或者在他们的答案中添加注释来解释问题。