Blazor - 如何使用 ICommand 在按钮单击中执行表单提交

Question

如何使用 ICommand 在 Button 单击中执行表单提交

如何在ICommand执行中传递参数

@using System.Windows.Input

<button @onclick="buttonClick"> Blazor Button</button>

@code {

    private ICommand _command;
    public ICommand Command
    {
        get => _command;
        set => _command = value;
    }

    private void buttonClick()
    {
        this.Command?.Execute(null);
    }
}

Answer 1

据我所知，这是不可能的，因为

System.Windows.Input

（例如 ICommand）适用于 WPF 而不是 Blazor。

Answer 2

终于，我得到了答案，请参考以下链接。

https://github.com/virzak/blazor-wasm/commit/6b15c5f5dc61e333c3dbfec41fd09dd40cd5302f

<button @onclick="@(() => Model.DecrementCommand.Execute(true))"> Blazor Button</button>

@code {

    CommandModel Model = new CommandModel();
}

public class CommandModel
    {
        public ICommand DecrementCommand;
        public int age = 30;
        public CommandModel()
        {
            DecrementCommand = new RelayCommand<bool>(DecrementExecute);
        }

        public void DecrementExecute(bool decrement)
        {
            if (decrement)
            {
                age -= 1;
            }
            else
            {
                age += 1;
            }
        }
    }

Answer 3

看看 blazorise 和reactiveui.blazor。

Blazise 按钮支持 icommand。

Answer 4

我的理解是，在 Blazor 中使用 ICommand 的根本问题是 ICommand.Execute 返回 void，因此是一劳永逸。 这在 WPF/Maui/UWP 中是可以的，因为发生的任何状态更改都会通过绑定（特别是 INotifyPropertyChanged.PropertyChanged 事件）传达给视图。 但是，Blazor 不使用 INotifyPropertyChanged，而是依赖于 Blazor 特定的重新渲染逻辑（请参阅：ComponentBase 的渲染约定）。在按钮点击场景中，具体是：

收到事件通知并调用其自己的事件处理程序之一后。

如果您的命令不执行任何异步工作，它将按照调用事件处理程序的通知进行工作，并且所有内容都会同步处理，因此在事件处理程序完成后，所有内容都会完成。

但是如果您的 ICommand 执行任何异步操作（现在可能会执行），ICommand.Execute 会立即返回，并且 Blazor 会重新渲染周期。 Command.Execute 下的异步代码仍在运行，执行一些工作并更改一些属性。 Blazor 永远不会收到任何这些 INotifyPropertyChanged 事件的通知，因此永远不会刷新。

对于简单的场景，您可以通过自己监视 PropertyChanged 事件、添加处理程序并调用 StateHasChanged() 来解决此问题，但添加然后删除所有可能的 PropertyChanged 源需要大量工作。