Blazor无ICommand的替代方案及自定义指令实现问询

针对你提到的Blazor中无ICommand、需重复定义按钮状态属性、前端可篡改disabled属性的问题，这里提供一套轻量替代方案，无需依赖MVVM或封装大量HTML组件：

1. 实现自定义Command类（模拟ICommand核心功能） #

创建通用的BlazorCommand类，封装Execute、CanExecute逻辑及执行状态管理，自动触发组件UI更新：

public class BlazorCommand
{
    private readonly Func<Task> _executeAction;
    private readonly Func<bool>? _canExecuteFunc;
    private bool _isExecuting;

    // 执行状态，用于控制按钮文本/禁用状态
    public bool IsExecuting
    {
        get => _isExecuting;
        private set
        {
            _isExecuting = value;
            StateHasChanged?.Invoke();
        }
    }

    // 综合判断是否可执行：未在执行 + 满足自定义可执行条件
    public bool CanExecute => !IsExecuting && (_canExecuteFunc?.Invoke() ?? true);

    // 绑定组件的状态更新方法
    public event Action? StateHasChanged;

    public BlazorCommand(Func<Task> executeAction, Func<bool>? canExecuteFunc = null)
    {
        _executeAction = executeAction ?? throw new ArgumentNullException(nameof(executeAction));
        _canExecuteFunc = canExecuteFunc;
    }

    // 执行逻辑，自带状态锁和可执行校验
    public async Task ExecuteAsync()
    {
        if (!CanExecute) return;

        IsExecuting = true;
        try
        {
            await _executeAction();
        }
        finally
        {
            IsExecuting = false;
        }
    }
}

2. 在组件中使用自定义Command #

在Blazor组件里实例化BlazorCommand，绑定组件的状态更新方法：

@code {
    private string? _inputText;
    public BlazorCommand SubmitCommand { get; private set; }

    protected override void OnInitialized()
    {
        SubmitCommand = new BlazorCommand(
            // 点击执行的异步逻辑
            executeAction: async () =>
            {
                await Task.Delay(2000); // 模拟异步操作
                Console.WriteLine($"提交内容：{_inputText}");
            },
            // 自定义可执行条件（例：输入框不为空）
            canExecuteFunc: () => !string.IsNullOrWhiteSpace(_inputText)
        );
        // 绑定组件的StateHasChanged，让Command状态变化时自动刷新UI
        SubmitCommand.StateHasChanged = StateHasChanged;
    }
}

3. 实现类似@command的简洁绑定 #

无需封装组件，直接在原生HTML按钮上绑定命令的执行方法和禁用状态，写法接近你想要的@command效果：

<input type="text" @bind="_inputText" />

<button 
    @onclick="SubmitCommand.ExecuteAsync"
    disabled="@(!SubmitCommand.CanExecute)"
>
    @(SubmitCommand.IsExecuting ? "提交中..." : "提交")
</button>

4. 解决前端篡改disabled的安全问题 #

前端disabled属性可通过开发者工具修改，但BlazorCommand在ExecuteAsync方法开头会再次校验CanExecute条件，即使前端移除了禁用状态，点击后后端也会拦截非法执行，从根源上避免风险。

额外优化：通用扩展方法 #

若想进一步简化绑定写法，可创建扩展方法让按钮绑定更简洁：

public static class BlazorCommandExtensions
{
    public static RenderFragment BindCommand(this BlazorCommand command, string text, string executingText = "执行中...")
    {
        return builder =>
        {
            builder.OpenElement(0, "button");
            builder.AddAttribute(1, "disabled", !command.CanExecute);
            builder.AddAttribute(2, "onclick", EventCallback.Factory.CreateAsync(null, command.ExecuteAsync));
            builder.AddContent(3, command.IsExecuting ? executingText : text);
            builder.CloseElement();
        };
    }
}

使用时只需一行代码：

@SubmitCommand.BindCommand("提交", "提交中...")

这套方案既不用封装大量HTML组件，又能实现类似ICommand的简洁逻辑管理。

内容的提问来源于stack exchange，提问作者Taunter exd