Blazor: disabling Save button without StateHasChanged()?

[michaelcsikos]

The usual way to enable or disable the Save button is setting disabled = "@(!VM.Model.IsSavable)" on the Button and then when ModelPropertyChanged fires call await InvokeAsync(() => StateHasChanged());

If the root object has children, grandchildren, etc, every descendant has to trigger StateHasChanged() just to get the Save to enable. This causes everything to re-render, from the root razor component all the way down. If you try to avoid the StateHasChanged() call and modify the disabled property in code, you get a warning: BL0005: Component parameter should not be set outside of its component (and it doesn't work).

With a complex object this can become very slow. I'm facing a scenario now where modifying any property takes over 450 ms. Is there any other way to approach this, apart from breaking up the UI with Modal or Drawer components?

[rockfordlhotka]

In CSLA 6 we changed the property changed behavior to match the Windows Forms model, where events are minimized. The goal being that a PropertyChanged event is raised one time for a series of changes, rather than for each change.

I take it that this isn't matching the requirement here?

[michaelcsikos]

The PropertyChanged event is only firing once. The problem is StateHasChanged() re-renders every tab that has been initialised, so as you view more tabs the time taken for each subsequent PropertyChanged grows. It just seems silly to have to re-render a hundred components just to enable one button. In my scenario, with only the first tab selected it takes about 45 ms to await InvokeAsync(() => StateHasChanged()). By the time 10 different tabs have been viewed, it's over 400 ms.

[saulyt]

It may help to put the save button into a child component. This way calling StateHas Changed() in the child should only rerender itself.

…

On Thu, May 26, 2022, 7:37 PM michaelcsikos ***@***.***> wrote: The PropertyChanged event is only firing once. The problem is StateHasChanged() re-renders every tab that has been initialised, so as you view more tabs the time taken for each subsequent PropertyChanged grows. It just seems silly to have to re-render a hundred components just to enable one button. In my scenario, with only the first tab selected it takes about 45 ms to await InvokeAsync(() => StateHasChanged()). By the time 10 different tabs have been viewed, it's over 400 ms. — Reply to this email directly, view it on GitHub <#2956 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJLAXOYDKLUHMCBN7NNHA3DVMADKFANCNFSM5W772EEA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[michaelcsikos]

@saulyt Now we're getting somewhere!

BtnSave.razor:

<Button Type     = "primary"
        HtmlType = "submit"
        Disabled = "@(Disabled)">
        Save
</Button>

@code
{
    [Parameter]
    public bool Disabled { get; set; }

    public async Task InvokeStateHasChangedAsync(bool disabled)
    {
        Disabled = disabled;

        await InvokeAsync(() => StateHasChanged());
    }
}

And then in the form:

<BtnSave Disabled = "@(!VM.Model.IsSavable)" @ref = "btnSave" />

@code
{
    BtnSave btnSave;

    private async void OnChildPropertyChanged(object? sender, PropertyChangedEventArgs e)
    {
        await btnSave.InvokeStateHasChangedAsync(!VM.Model.IsSavable);
    }
}