如何在Blazor中的绑定变量更新上更新类

Question

我的一个对象属性上有一个绑定的跨度值

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

我希望能够根据其内容(绑定变量(更新我的span类

我能想到的唯一方法是将变量第二次绑定到span的属性中，并相应地声明我的css类

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

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

这种方法的问题在于

• 当我的css框架中已经有可以使用的类时，它需要我为每个值重新定义自定义类
• 它只能应用于预定义值的有限列表
• 我不能用对我的值进行更全面的分析来描述要应用哪个类(比如用正则表达式检查值(

由于我对MVVM和数据绑定有点陌生，有"正确"的方法吗？

Answer 1

您可以像下面这样做，并且可以添加任意多的属性，每个属性代表不同的CSS类。

@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";
}
}

希望这能帮助。。。

根据建议更新：

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

我希望这就是你想要的。我的第一个答案只是为了演示如何绑定到span的class属性，而您对此一无所知。至于其他的，你可以做任何你想做的事情来实现你的目标。。。

Answer 2

以上答案中的属性方法有点有限：实际上，每个要着色的属性都必须有一个statusColor属性。实际上，你可以绑定一个函数：

<span class="badge badge-primary @(statusColor(myObject?.MyProperty))">@myObject?.MyProperty</span>
@code
{
private string statusColor(MyClass myProperty) =>
myProperty switch
{
"something" => "blue",
"somethingelse" => "red",
_ => "black"
}
}

如果你的类选择逻辑不是太复杂，你甚至可以使用lambda:

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