Comment puis-je définir une couleur de ligne de table dans mon répéteur en fonction des valeurs de données liées à cette ligne dans ASP.NET?

Question

J'ai un contrôle répéteur:

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

Et la méthode de code-behind databound suivant:

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

      } 
     } 

Il y a plus de colonnes dans cette grille, mais j'ai amincie vers le bas juste pour la question . Maintenant, ce que je voudrais faire est de changer la couleur de fond de tr en fonction du montant du prix. Si c'est dans des niveaux différents, je voudrais changer la couleur d'arrière-plan des lignes en conséquence.

Est-ce que je dois faire ceci avec javascript ou est-ce que je peux accéder aux rangées de la table dans le code-behind pour définir cette couleur?

Answer 1

rendre à runat = « serveur »

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

Ensuite, trouver que le tableau Row dans par ID dans votre code derrière en cas databound, comme ce que vous faites pour un autre contrôle côté serveur et la couleur du changement.

Answer 2

Une autre option que vous pouvez utiliser est jQuery. Voyant que vous utilisez un répéteur, cela vous donne un contrôle total sur votre sortie. Jquery peut entrer dans votre table, regarder les données et les formater comme vous le voulez.

Regardez: http://plugins.jquery.com/project/Plugins/category/54

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

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

Alternativement, vous pouvez utiliser le code derrière dans le répéteur pour définir la classe CSS des cellules/lignes/colonnes dont vous avez besoin modifiés.

Vous devez effectuer les commandes du serveur de contrôles (require: ID = "my_thing" runat = "server"), créer ces contrôles (utiliser le contrôle find et les lier), puis définir la classe CSS après avoir déterminé la valeur.

Answer 3

une autre option:

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

et code-behind

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

aussi ... quelque raison que vous ne l'utilisez la liaison de données? cela vous permettrait d'éliminer votre méthode code-behind 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

La réponse de Dave Thieben fonctionne bien, sauf que le css est manquant.

Si vous ajoutez ce qui suit alors l'exemple fonctionnera:

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

Answer 5

utiliser ce code à l'intérieur repeter événement databound.

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