How to disable a custom button component conditionally in Blazor Server App?

Question

I have created a custom button component in a Blazor Server App as follows:

<button type="button" @attributes="@CustomeAttribute" @onclick="@OnButtonClick" class="styled-btn" style="width: @Width; height: @Height;
                border-radius: @BorderRadius;">
    <i class="@IconClass" style="font-size: @IconSize; color: @IconColor"></i>
</button>

code {
    [Parameter]
    public string Width { get; set; }
    [Parameter]
    public string Height { get; set; }
    [Parameter]
    public string BorderRadius { get; set; }
    [Parameter]
    public string IconColor { get; set; }
    [Parameter]
    public string IconClass { get; set; }
    [Parameter]
    public string IconSize { get; set; }
    [Parameter]
    public bool IsDisabled { get; set; }
    [Parameter]
    public EventCallback<MouseEventArgs> OnButtonClick { get; set; }
    public Dictionary<string, object> CustomeAttribute { get; set; }

I use this component in a parent component:

<StyledButton IsDisabled="EqSelectedRowCount == 0 ? true : false" BorderRadius="10px" Width="40px" Height="40px" IconColor="Black" IconSize="20px" IconClass="fa-solid fa-power-off" OnButtonClick="@ToggleEquipmentStatusWarn"></StyledButton>

IsDisabled value can be changed dynamicall based on some business rules. It can take true or false values. I want my button component add disabled attribute to the button whenever the IsDisabled value changes to true. I studies this post and added the following code to the button component:

 private bool _isDisabled;
    
protected override void OnInitialized()
    {
        _isDisabled = IsDisabled;
    }

    protected override void OnParametersSet()
    {
        if(_isDisabled != IsDisabled)
        {
            _isDisabled = IsDisabled;
            AddDisabledAttribute();
        }
    }

    void AddDisabledAttribute()
    {
        var dic = new Dictionary<string, object>();
        if (_isDisabled)
        {
            dic.Add("disabled", true);
        }
        else if (!_isDisabled && dic.ContainsKey("disabled"))
        {
            dic.Remove("disabled");
        }

        CustomeAttribute = dic;
    }

But It does not work and there should be a better solution. How can disable my button component conditionally?

Have you tried binding to disabled attribute? https://stackoverflow.com/a/55002687/20339875 — maciek, Feb 21 '23 at 16:29
Have you followed the link? disabled="@IsDisabled" is valid. — maciek, Feb 21 '23 at 16:34
Yes, The accepted answer says that I should use `disabled="@IsDisabled"` but I have tested it before. In css, `disabled="false"` and `disabled="true"` both turns the element always disabled. — Alex Wright, Feb 21 '23 at 16:37
The accepted answer in https://stackoverflow.com/questions/55002514/how-to-enable-disable-inputs-in-blazor/55002687#55002687 is not valid for buttons. — Alex Wright, Feb 21 '23 at 16:45
Well you're right here. It seems that as of now it does not work in MudBlazor REPL too. https://try.mudblazor.com/snippet/mEmHuwclUkrfWOai — maciek, Feb 21 '23 at 16:53

score 1 · Accepted Answer · answered Feb 21 '23 at 17:00

1

Try this: https://try.mudblazor.com/snippet/QuwnOQQlUlyNKMAs

It has to be

disabled=@IsDisabled

and IsDisabled has to be bool.

<div>Value1 = @Value1</div>
<button disabled=@Disabled1 onclick="@OnClick1" style="border: 1px solid black;">First</button>
<div>Value2 = @Value2</div>
<button disabled=@Disabled2 onclick="@OnClick2" style="border: 1px solid black;">Second</button>
@code {
    int Value1 = 0;
    int Value2 = 0;

    bool Disabled1 = true;
    bool Disabled2 = false;
    void OnClick1()
    {
        Value1 = 2;
    }

    void OnClick2()
    {
        Value2 = 2;
    }
}

First button is disabled, the sencond one is not.

answered Feb 21 '23 at 17:00

maciek

724
2
4
16

I'm using `.NET 6`. In my project when I set `disabled=false` the button is still disabled. Why this happens? I tried to `rebuild` the project but the result is the same. – Alex Wright Feb 21 '23 at 17:09
1

Probably because you assign a value to an attribute that is not parsed to true or false value of class bool. But yes, it happens. Even when you just declare disabled attribute without a value. At least we have the right way to do it. – maciek Feb 21 '23 at 17:15
I set ` – Alex Wright Feb 21 '23 at 17:17
1

I removed `""` from `IsDisabled=@(EqSelectedRowCount == 0 ? true : false)` and it worked. Thanks. – Alex Wright Feb 21 '23 at 17:31

How to disable a custom button component conditionally in Blazor Server App?

1 Answers1