Blazor - Change Color of text based on condition

Question

I have this five ratings:

    if (model.CIIattainedrequired2021 > model.d4)
    {
        model.CIIrating2021 = "E";
    }
    if (model.CIIattainedrequired2021 < model.d4)
    {
        model.CIIrating2021 = "D";
    }
    if (model.CIIattainedrequired2021 < model.d3)
    {
        model.CIIrating2021 = "C";
    }
    if (model.CIIattainedrequired2021 < model.d2)
    {
        model.CIIrating2021 = "B";
    }
    if (model.CIIattainedrequired2021 < model.d1)
    {
        model.CIIrating2021 = "A";
    }

I display them in tables:

    <td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2019</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2020</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2021</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2022</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2023</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2024</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2025</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
    <p>@model.CIIrating2026</p>

And depending on the answer i would like to show the text in different colors as follow:

A-GREEN B-LIGHTGREEN C-YELLOW D-ORANGE E-RED

Your code example is weird, you have the same value in all your columns. — T.Trassoudaine
– T.Trassoudaine, Commented Jul 21, 2022 at 13:41
@NikolasKypri Your model is probably not optimal (it would be more logical to have an object for each year). However, you could create a Dictionary<string, string> with the rating as key and the color as value. — T.Trassoudaine
– T.Trassoudaine, Commented Jul 21, 2022 at 14:37
I would recommend using a switch case instead of "if" condition — LYass
– LYass, Commented Jul 21, 2022 at 14:52

Community · Accepted Answer · 2024-04-22 20:06:53Z

4

For the text, add this:

<p style="color:@TextColor(model.CIIrating2020);">@model.CIIrating2020</p>

Then in your code add something like this to return the correct color based on the text:

private string TextColor(string text) {
switch(text) 
{
  case "A":
    return "#00FF00"
    break;
  case "B":
    return "#90EE90"
    break;
  //etc....
}
}

edited Apr 22, 2024 at 20:06

CommunityBot

11 silver badge

answered Jul 21, 2022 at 16:25

John

3066 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Urasquirrel Over a year ago

Could also do the same thing for a class yes?

mcky · Accepted Answer · 2022-07-23 03:44:29Z

0

First thing you will need will be to add a class using a variable in your td element.

<td class="text-center px-2 py-1 mx-0 text-xs Add a class
        variable here like :@Color-code" >

Then in the code section of the page/component you need the variable you are using as the class above and a method that switches classes based on your logic:

@code{
    private string Color-code{get;set;}

     -//method that identifies the color

     private void setColorClassMethod(){

         if(condition){
             //Assuming you want to assign blue class in the case
             Color-Code="blueClass";
        }
    }
}

Finally in site.css file add colors to the classes you used above in variables like:

.blueClass{
 //if you want to change background color
 background-color:blue;
 
 //if you want to change text color
 color:blue;
}

You can also achieve the same results via in line css. But I suggested classes because you might need to add further styling later to the td.

edited Jul 23, 2022 at 3:44

mcky

8432 gold badges7 silver badges20 bronze badges

answered Jul 21, 2022 at 15:21

Tanveer Khan

1682 silver badges15 bronze badges

2 Comments

T.Trassoudaine Over a year ago

A dictionary would be easier and more clear. With your solution, you need to create one variable for each CIIrating<year>. The colors don't need to change depending on year but on rating which does not need to be dynamically assigned.

Urasquirrel Over a year ago

Does this not work for many elements? It only seems to solve for one element which is alot of code for less value.

Collectives™ on Stack Overflow

Blazor - Change Color of text based on condition

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related