Blazor组件按钮OnClick事件绑定失效问题求助

问题根源 #

你的两种写法都存在Blazor事件绑定的误区：

• 第一种@onclick="SelectProduct(product.Id)"：直接调用方法而非绑定事件，且方法返回值不符合Blazor事件处理要求（需为void或Task），导致点击无响应。
• 第二种onclick="@SelectProduct(product.Id)"：混合原生HTML事件与Blazor表达式，渲染时立即执行方法，点击时实际执行的是方法返回值（无效JS代码），无法触发点击逻辑。

正确实现步骤 #

1. 修正点击事件绑定：使用Lambda表达式包裹方法调用，确保点击时才执行逻辑：

<button @onclick="() => SelectProduct(product.Id)"
        data-bs-toggle="modal" 
        data-bs-target="#productModal" 
        class="btn btn-primary">
    More Info
</button>

2. 调整事件处理方法返回值：Blazor点击事件处理方法需为void（同步场景）或Task（异步场景），修改SelectProduct方法：

void SelectProduct(uint Id)
{
    selectedProduct = ProductService.GetProducts().FirstOrDefault(x => x.Id == Id);
}

完整修正后代码 #

@using Models.Entity
@using InventoryApplication.WebSite.Services
@inject JsonProductService ProductService

@{var products = ProductService.GetProducts();}

<div class="card-columns">
    @foreach (var product in products)
    {
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">@product.DisplayName</h5>
            </div>
            <div class="card-footer">
                    <button @onclick="() => SelectProduct(product.Id)"
                        data-bs-toggle="modal" 
                        data-bs-target="#productModal" 
                        class="btn btn-primary">
                        More Info
                    </button>
            </div>
        </div>
    }
</div>

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productTitle">@selectedProduct?.DisplayName</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if (selectedProduct != null)
                {
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">Category:  @selectedProduct.Category</p>
                            <p class="card-text">Quantity:  @selectedProduct.Quantity</p>
                            <p class="card-text">Price:    $@(selectedProduct.Price.HasValue ? selectedProduct.Price.Value.ToString("F2") : "N/A")</p>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@code {
    Product? selectedProduct;

    void SelectProduct(uint Id)
    {
        selectedProduct = ProductService.GetProducts().FirstOrDefault(x => x.Id == Id);
    }
}

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