Discussion :

[lou-03]

Bonjour,

Je voudrais changer la couleur de fond de ma case en fonction de la valeur qu'elle contient.
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td align="right" style="color:Black;background-color:#33e6aa;font-family:Arial;font-size:8pt;width:55px;"><% =mavaleur %></td>

C'est la partie en violet que je voudrais changer. J'avais essayé en appelant une fonction de mon code behing grâce à un id mais si je dois mettre un id à chaque ligne je n'ai pas fini ^^.

Sauriez-vous comment faire et si possible sans utiliser javascript?

Merci

[Nicolas Esprit]

Bonjour,

Tu as plusieurs possibilités. La première est d'utiliser le contrôle ASP.NET Table et non le contrôle HTML table de base. Ainsi tu y auras accès dans ton code-behind. L'inconvénient est que ta page sera plus lourde.

Ensuite, tu peux modifier le rendu HTML de ta page via la méthode Render. L'inconvénient est que si tu utilises des UpdatePanels, tu risques d'avoir des surprises.

Egalement, tu pourrais binder dynamiquement la couleur dans le HTML ( comme tu le fais pour ta valeur, là tu auras juste un test du genre : "Si valeur > seuil alors telle couleur, sinon telle autre couleur). C'est le plus simple je pense.

Enfin, vu que tu remplis un tableau avec des valeur et que tu souhaites avoir un formatage des couleurs ou d'autres propriétés en fonction de ces valeurs, tu peux peut être te pencher sur l'utilisation d'une GridView (à voir si c'est vraiment utile en fonction de ton besoin).

En espérant t'avoir aidé.

[lou-03]

Merci pour tes explications .

Egalement, tu pourrais binder dynamiquement la couleur dans le HTML ( comme tu le fais pour ta valeur, là tu auras juste un test du genre : "Si valeur > seuil alors telle couleur, sinon telle autre couleur). C'est le plus simple je pense.

Le problème c'est que si je met background-color:<% =fonction %> il me dit que la syntaxe n'est pas valide. C'est bien comme ça qu'il fallait faire ?

Je vais tester avec une GridView j'aurais peut être plus de facilité à colorer mes cases.

Merci pour ton aide!

[lou-03]

Pour finir je n'ai pas utilisé de GridView car j'avais des données qui ne me servaient pas forcément et donc ca devenait aussi compliqué que le tableau ^^.
J'ai utilisé cette méthode que j'ai trouvé sur le net :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 mesId[i].Attributes.CssStyle.Add("background-color", "green");

Cela me permet de changer la propriété background-color de ma ligne td.
Je boucle sur mes id (que j'ai récupéré dans un tableau) et en fonction des valeurs je change la couleur.

C'est à mon avis une méthode un peu "archaïque" mais bon au moins ça marche .

Je te remercie encore pour ton aide

[Nicolas Esprit]

Effectivement, c'est une autre façon de faire. Peux tu au passage, poster ta fonction pour récupérer les ID de tes cells, cela devrait bien aider ceux qui reliront ce topic plus tard, merci

Également, pense au statut [Résolu]

[lou-03]

Voici ma fonction :

Côté code behind :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public void couleur()
        {
            //tableau valeurs
            int[] valeurs = new int[8] {val1, val2, val3, val4, val5, val6, val7, val8};
            //tableau avec mes id
            HtmlTableCell[] ids = new HtmlTableCell[8] { id1, id2, id3, id4, id5, id6, id7, id8 };
            //pour chaque id on va regarder si la valeur correspondante est > ou < à 0
            for (int i = 0; i < ids.Length; i++)
            {
 
                if (valeurs[i] >= 0)
                {
                    //si c'est >0 on met la cellule en vert
                    ids[i].Attributes.CssStyle.Add("background-color", "green");
                }
                else
                {
                    ids[i].Attributes.CssStyle.Add("background-color", "red");
                }
            }
        }

Côté aspx :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td id="id5" runat="server" align="right" style="color:Black;background-color:#33e6aa;font-family:Arial;font-size:8pt;width:55px;"><% =val5 %></td>

à ajouter
ce qui sera modifier par la fonction couleur()

[Nicolas Esprit]

OK, merci pour le code.

Mais du coup en voyant cela, je me dis que j'aurais du t'orienter vers JQuery dès le début :-)

[lou-03]

Ah...tant pis maintenant c'est fait ^^