Comment changer de classe d'un élément div en utilisant blazor

Question

J'ai un élément divisé typique dans une page CSHTML sous la forme:

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

pré-blazor, j'utiliserais généralement JQuery pour ajouter ou supprimer le hide-errors classe de la div. Cependant, Blazor tente de supprimer le besoin de JavaScript et j'essaie d'utiliser aussi peu de Jsterop que possible. Y a-t-il un moyen de faire cela?

donc, dans Blazor, je pouvais faire:

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

ou utiliser jsterop:

l'appel à supprimer:

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

où la fonction serait généralement:

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

avec des semblables pour ajouter une classe. Les deux oeuvents ci-dessus, mais comme mentionné. J'essaie d'éviter la route JSinterOP et je n'aime pas que l'élément DIV soit déclaré deux fois, même si vous seul entrera dans le DOM.

Answer 1

Pour des freaks complets (moi) Créez un composant de rasoir (XAML Lover Dream):

Exemple d'utilisation

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

 <img src="@myImg" />

</ContentView>

Résultat: DIVS avec une classe appropriée appliquée, class='size-small' pour Size="Small".

Vous pouvez ajouter n'importe quel paramètre à un tel composant et modifier des classes à l'intérieur de votre logique, en gardant votre page principale propre.

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
    }

}