Как изменить классы элемента div с помощью Blazor

Question

У меня есть типичный элемент div на странице cshtml в форме:

<div id="loginErrors" class="alert alert-danger hide-errors">@(ErrorMessage)</div>

pre Blazor, я бы обычно использовал jQuery для добавления или удаления класса hide-errors из div. Тем не менее, Blazor пытается устранить необходимость в JavaScript, и я стараюсь использовать как можно меньше JSInterop. Есть ли способ в Blazor сделать это?

так что в Блазоре я мог сделать:

 @if (!string.IsNullOrEmpty(ErrorMessage))
 {
     <div id="loginErrors" class="alert alert-danger">@(ErrorMessage)</div>
 }
 else
 {
     <div id="loginErrors" class="alert alert-danger hide-errors">@(ErrorMessage)</div>
 }

или используя JSinterop:

Звонок на удаление:

await JSRuntime.Current.InvokeAsync<object>("blazorExtensions.RemoveClass", "loginErrors", "hide-errors");

где функция, как правило, будет:

RemoveClass: function (id, classname) {
    var tt = '#' + id;
    $(tt).removeClass(classname);
}

с аналогами для добавления класса. Обе вышеперечисленные работы, но, как уже упоминалось. Я пытаюсь избежать маршрута JSInterop, и мне не нравится, когда элемент div объявляется дважды, хотя в DOM попадет только один.

Answer 1

Это очень просто, так как вы можете динамически изменять любую часть html-элемента в Blazor без , используя Javascript. Признаюсь, что после стольких лет мне потребовалось немного времени, чтобы избавиться от старого мышления Javascript, но как только вы это сделаете, Blazor раскачивается!

В вашем html-файле используйте переменную для имени класса (или других атрибутов) любого html-элемента, в который вы хотите внести изменения в динамический стиль (или другие).

    <img class="@myImageClass" src="@myImg" />

В @functions объявляйте любые переменные, которые вы создали ...

    @functions {
    string myImageClass { get; set; }
    string myImg { get; set; } // Swap out the image as well if you want. 

, если вы хотите установить элементы для чего-либо, сначала используйте OnInit ()

     protected override void OnInit()
     {
     myImageClass = "myImageVisible";
     myImg = "https://www.somesite.com/ImageToStartWith.png"

     }

Где-то в функции измените на нужный класс на то, что вы предварительно определили в разделе стиля.

    private async Task DoSomething()
    {
      myImageClass = "myImageHidden";
      myImg = "https://www.somesite.com/NewImageToSwapIn.png"
      //Not sure what the point of swapping an image on a hidden element is 
      //but you get the idea. You can change anything you want anytime. 
    }

Не забудьте заранее определить некоторые стили, которые вы хотите использовать.

     <style>
     .myImageVisible {
      display: block;
      }

     .myImageHidden{
      display: none;
      }
      </style>

Наслаждайтесь. :)

Answer 2

Точно так же, как в обычной бритве:

@if (price>30)
{
    <p>The price is too high.</p>
}

EDIT Для обновленного вопроса, я думаю, вы хотите это:

<div class="@((string.IsNullOrEmpty(ErrorMessage)? "hide-errors" : ""))">