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

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.

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.

Enjoy. :)