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

就像在普通剃须刀中一样:

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

编辑 对于更新的问题,我想您希望这样:

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

没有 使用Javascript。我承认,在这么多年之后,我花了一点时间才摆脱旧的Javascript思维模式,但一旦你这样做了,Blazor摇滚!

在html中,使用变量作为要对其进行动态样式(或其他)修改的任何html元素的类名(或其他属性)。

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

    @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>

享受。:)

对于完全的怪物(我)创建一个剃须刀组件(xaml lover dream):

示例用法

<ContentView Size="Small" IsVisible="@IsOnline">

 <img src="@myImg" />

</ContentView>

结果:应用了适当类别的DIV, class='size-small' 对于 Size="Small" .

您可以向这样的组件添加任何参数,并根据您的逻辑更改内部的类,从而保持主页的整洁。

ContentView.razor

@if (IsVisible)
    {
    <div class="@sizeClass"> @ChildContent</div>
    }

@code {


    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public bool IsVisible { get; set; } = true;

    [Parameter]
    public string Size {
        get
        {
            return _size.ToString();
        }
        set
        {
            _size = Enum.Parse<MySize>(value);
            switch (_size)
            {
                case MySize.Big:
                    sizeClass = "size-big";
                    break;
                case MySize.Small:
                    sizeClass = "size-small";
                    break;
                default:
                    sizeClass = "";
                    break;
            }
        }
    }

    private MySize _size;

    private string sizeClass;

    public enum MySize
    {
        Default,
        Small,
        Big
    }

}

这是我在控制特定元素的UI(比如突出显示单击的元素)时问自己的一个问题,以防有很多元素,比如列表。

两种常见的方法(如其他人所述)是:

1. 绑定页/组件字符串属性 在元素中 属性,可用于设置多个类(因为它只是一个字符串)或添加多个此类属性(用于更精细的条件控件)。
2. ,具有绑定类或CSS值所需的所有属性。

但我想我找到了第三种方法,有点“中间”技术,它提供了一个非常强大的UI控件,带有对象绑定(甚至是双向绑定),而不需要处理单独的组件。因为有时需要触发父组件 StateHasChanged() 手动操作,就像当父组件和子组件之间存在各种依赖关系时,可视化状态机制不会自动刷新。

只需创建一个包装器类,用您想要控制的CSS值作为其属性来表示该项。在同一页面/组件上 @代码 节或某个共享文件夹。

例如,我有一份 滑动 对象,通过 卡片 对象,用户可以单击该对象进行选择和编辑。

项目模型:

public class Slide {
   public int SlideId { get; set; }
   public string Title { get; set; }
   public string Description { get; set; }
   public int SortIndex{ get; set; }
}

项目包装器模型:

public class Card {
   Slide Slide { get; set; }
   public string SelectedCssClass { get; set; }
   public string SomeOtherCssClass { get; set; }
   
   public void Reset() {
      SelectedCssClass = "";
   {
}

单数化() 方法(或 OnInitializedAsync() @foreach(){} 循环,列出包装的项目,我附加一个 @onclick 事件处理程序传递到每个div/card,并传递该card对象的引用:

@foreach (Card card in Cards)
{
   <div class="card @card.SelectedCssClass" @onclick="@(e => setSlideToEdit(card))"
}

在里面 setSlideToEdit(卡){} 函数I只需调用 方法并让绑定完成工作,然后使用新的绑定并设置 card.SelectedCssClass 属性(或添加另一个专用方法来设置预定义的方法)。