How to change classes of a div element using Blazor

Question

I have a typical div element in a cshtml page in the form:

@(ErrorMessage)


        

Answer 1

Just like you would in regular Razor:

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

EDIT For updated question, I guess you want this:

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

Answer 2

For complete freaks (me) create a razor component (xaml lover dream):

Example usage

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

 <img src="@myImg" />

</ContentView>

Result: divs with an appropriate class applied, class='size-small' for Size="Small".

You can add whatever parameter to such component and change classes inside upon your logic, keeping your main page clean.

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
    }

}

Answer 3

This is very easy as you can change any part of an html element dynamically in Blazor without using Javascript. After so many years I admit, it took me a little while to get out of the old Javascript mindset, but once you do, Blazor rocks!

In your html somewhere use a variable for the class name (or other attributes) of any html element you want to make dynamic style (or other) modifications to.

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

In @functions declare any variables you created...

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

if you want to set items to something initially use OnInit()

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

     }

Somewhere in a function change to the desired class to something you pre-defined in the style section.

    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. 
    }

Don't forget to define some styles you want to use beforehand.

     <style>
     .myImageVisible {
      display: block;
      }

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

Enjoy. :)