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

Question

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

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

我希望能够根据其内容（绑定变量）更新我的跨度 classes

我能想到的唯一方法是在跨度的属性内再次绑定变量并相应地声明我的 css classes

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

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

这个方法的问题是

当我的 css 框架中已有 classes 时，我需要为每个值重新定义自定义 classes
它只能应用于预定义值的有限列表
我无法对我的值进行更全面的分析来决定应用哪个 class（例如使用正则表达式检查值）

由于我对 MVVM 和数据绑定有点陌生，有没有 "right" 方法可以做到这一点？

Answer 1

您可以像下面这样操作，并且可以添加任意数量的属性，每个代表一个不同的 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";
     }
 }

希望这对您有所帮助...

根据建议更新：

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

希望这就是您要找的。我的第一个答案只是为了演示如何绑定到跨度的 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"
        }
}

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

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

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

How to update classes on binded variable update in Blazor

c#

asp.net

blazor

blazor-client-side

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

How to update classes on binded variable update in Blazor

c#

asp.net

blazor

blazor-client-side

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