如何根據ASP.NET中該行的值數據綁定在我的轉發器中設置表格行顏色？

Question

我有一個轉發器控件：

 <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執行此操作，或者是否有某些方法可以訪問代碼隱藏中的表行以設置此顏色？

Answer 1

使它成為runat =“Server”

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

然后在數據綁定事件后面的代碼中找到ID表中的ID，就像你正在為其他服務器端控件做的那樣並改變顏色。

Answer 2

在repeter數據綁定事件中使用此代碼。

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

Answer 3

另外一個選項：

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

Answer 4

Dave Thieben的回答非常好，除了缺少css。

如果添加以下內容，則示例將起作用：

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

Answer 5

您可以使用的另一個選項是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類。

您需要創建這些控件服務器控件（require：ID =“my_thing”runat =“server”），創建這些控件（使用find控件並綁定它們），然后在確定值后設置CSS類。