Как обновить классы при обновлении связанных переменных в Blazor - PullRequest
Новая
       17

Как обновить классы при обновлении связанных переменных в Blazor

0 голосов
/ 20 апреля 2020

У меня есть значение диапазона в связанном виде для одного из моих свойств объекта 

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

Я хочу иметь возможность обновлять классы диапазонов в соответствии с его содержимым (переменная в связанном виде)

Единственный способ, о котором я могу думать, - это связать переменную во второй раз внутри атрибута span и объявить мои css классы соответственно 

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

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

Проблема с этим подходом заключается в том, что

  • Это требует от меня переопределения пользовательских классов для каждого значения, когда у меня уже есть классы в моей css инфраструктуре, которую я мог бы использовать
  • Это может быть применено только к конечному списку предопределенных значение
  • Я не могу использовать более полный анализ своего значения, чтобы определить, какой класс применять (например, проверить значение с помощью регулярного выражения для примера)

Поскольку я немного нового в MVVM и привязке данных, есть ли «правильный» способ сделать это?

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Подход свойства из приведенного выше ответа немного ограничен: у вас должно быть свойство 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"
        }
}

Если ваши логи выбора классов c не слишком сложны, вы можете даже использовать лямбду: 

<span class="badge badge-primary @(()=> myObject?.MyProperty == "something" ? "blue" : "black")">@myObject?.MyProperty</span>
1 голос
/ 20 апреля 2020

Вы можете сделать это, как показано ниже, и вы можете добавить столько свойств, сколько хотите, каждое из которых представляет отдельный класс 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, о котором вы не знали. В остальном вы можете делать все, что хотите для достижения своих целей ...

...