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

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

Example usage

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)
    {
    
 @ChildContent
    }

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

}