blazor - 如何使用 Blazor 更改 div 元素的类

Question

我在 cshtml 页面中有一个典型的 div 元素，格式为:

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

在 Blazor 之前，我通常使用 jQuery 在 div 中添加或删除 hide-errors 类。然而，Blazor 正在尝试消除对 JavaScript 的需求，而我正在尝试使用尽可能少的 JSInterop。 Blazor 有办法做到这一点吗？

所以在 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

就像使用普通 Razor 一样:

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

编辑对于更新的问题，我猜你想要这个:

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