How to update classes on binded variable update in Blazor

Question

I have a binded span value on one of my object property

<span class="badge badge-primary">@MyObject?.MyProperty</span>

I want to be able to update my span classes in respect to it's content (the binded variable)

The only way I can think of is to bind the variable a second time inside an attribute of the span and declare my css classes accordingly

<span class="badge badge-primary" value="@MyObject?.MyProperty">@MyObject?.MyProperty</span>

.badge[value="myvalue"]{
    background-color:white;
}

The issue with this approch is that

It require me to re-define custom classes for each value when I already have classes in my css framework i could use
It can only be applied to a finite list of predefined value
I can't use a more comple analysis of my value to descide which class to apply (like checking the value with a regex for exemple)

As I'm a bit new to MVVM and data binding, is there a "right" way to do that ?

enet · Accepted Answer · 2020-04-20 15:53:43Z

1

You can do that like the following, and you can add as many properties as you want, each representing a different CSS class.

@page "/"

 <span class="badge badge-primary @myObject?.MyProperty">
                             @myObject?.MyProperty</span>

@code
{
     MyObject myObject = new MyObject();

     public class MyObject
     {
          public string MyProperty { get; set; } = "myvalue";
     }
 }

Hope this helps...

Update per suggestion:

<span class="badge @statusColor">@myObject?.MyProperty</span> 

@code{

private string color = "red";

public string statusColor
{
    get
    {
        if (myObject?.MyProperty == "something")
            color = "blue";

        return color;
    }
}

MyObject myObject = new MyObject();

public class MyObject
{
    public string MyProperty { get; set; }
}
}

I hope this is what you were looking for. My first answer was intended only to demonstrate how you can bind to the span's class attribute, of which you were not aware. As for the rest, you can do whatever you want to achieve your objectives...

edited Apr 20, 2020 at 15:53

answered Apr 19, 2020 at 23:32

enet

46.4k6 gold badges103 silver badges128 bronze badges

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

4 Comments

Remy Grandin Over a year ago

Ho ! I can bid directly into the class, interessting, my only issue is that it doesn't allow me to do some "analysis" on the value (like string operations, regex, etc). Still, thanks for your answer

enet Over a year ago

So my answer didn't help you ?

Remy Grandin Over a year ago

it did a bit, but my main use case is for exemple if(myObject?.MyProperty.Contain("something") && myObject?.MyOtherProperty == false){//make span badge blue} which I currently can't do with your or my method

Remy Grandin Over a year ago

I found out a way to make it work : <span class="badge @statusColor">@myObject?.MyProperty</span> public string statusColor { get { if(myObject?.MyProperty == "something") return "blue"; } } it seem to be refreshed when myObject is updated. If you wish to update your answer to reflect this case, i will mark it as accepted.

Дмитро Іванов · Accepted Answer · 2020-04-20 20:49:24Z

1

The property approach from the above answer is a bit limited: you must actually have a statusColor property for each property you want to colorize. Actually, you can bind a function:

<span class="badge badge-primary @(statusColor(myObject?.MyProperty))">@myObject?.MyProperty</span>

@code
{
    private string statusColor(MyClass myProperty) =>
        myProperty switch
        {
           "something" => "blue",
           "somethingelse" => "red",
           _ => "black"
        }
}

If your class selection logic is not too complicated, you can even use lambda:

<span class="badge badge-primary @(()=> myObject?.MyProperty == "something" ? "blue" : "black")">@myObject?.MyProperty</span>

answered Apr 20, 2020 at 20:49

Дмитро Іванов

1,0316 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to update classes on binded variable update in Blazor

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related