blazor

How to change classes of a div element using Blazor


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

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

pre Blazor, I'd typically use jQuery to add or remove the hide-errors class from the div. However, Blazor is trying to remove the need for JavaScript and I'm trying to use as little JSInterop as possible. Is there a way in Blazor to do this?

so in Blazor I could do:

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

or using JSinterop :

the Call for removing:

await JSRuntime.Current.InvokeAsync<object>("blazorExtensions.RemoveClass", "loginErrors", "hide-errors");

where the function would typically be :

RemoveClass: function (id, classname) {
    var tt = '#' + id;
    $(tt).removeClass(classname);
}

with similar for adding a class. Both of the above work, but as mentioned. I'm trying to avoid the JSInterop route and I don't like the div element being declared twice even though only one will get into the DOM.


Solution

  • 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" : "")">