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.