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

Posted 2023-02-19

【中文标题】Blazor - 如何使用 ICommand 在按钮单击中执行表单提交

【英文标题】：Blazor - How to execute the form submit in Button click using ICommand

【发布时间】：2021-03-08 08:34:48

【问题描述】：

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

如何在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);
    

【问题讨论】：

您是否有特殊原因要从 ICommand 触发表单提交？做一个普通的<button type="submit">，然后设置你要提交的表单的OnValidSubmit，会不会容易很多？

我的要求如何在 ICommand.exceute 中传递参数。

【参考方案1】：

据我所知，这是不可能的，因为 System.Windows.Input（例如 ICommand）适用于 WPF 而不是 Blazor。

【讨论】：

据我所知，处理按钮点击事件的唯一选项是 OnClick 事件，它是一个 EventCallback 绑定。如果绑定也可用于 ICommand 类型的命令，那就太好了。布雷泽

我对 WPF 所做的不多（据我所知，主要使用 ICommand），但据我所知，您传递 ICommand 的原因确实是因为您想绑定对事件的命令。在 Blazor 中，您根本不需要这样做。 buttonClick 方法已经是您在 WPF 中考虑的 ICommand 了。现在，如果您想将一个（或多个）参数传递给该方法，您可以使用@onclick=@(()=>buttonClick(parameter))。

【参考方案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;
            
        
    

【讨论】：

这个 lambda 只是请求被提取到一个单独的方法中。

所以有可能。你没有得到 ICommand 的所有好处和所有缺点。