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

Question

我在表单中的 cshtml 页面中有一个典型的 div 元素：

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

在 Blazor 之前，我通常使用 jQueryhide-errors在 div 中添加或删除类。但是，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" : ""))">

Answer 2

这非常简单，因为您可以在 Blazor 中动态更改 html 元素的任何部分，而无需使用 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>

享受。:)