Blazor组件变量作用域问题：Modal中Product参数值异常

当这个组件在循环中复用（比如展示多个产品卡片）时，所有模态框的id都是request-purchase-card，Bootstrap通过ID定位模态框时只会找到第一个匹配的DOM元素，所以弹窗始终显示第一条产品的数据。

给每个组件实例的模态框生成唯一ID，绑定到当前Product的唯一标识上，确保按钮和对应模态框一一对应：

修改步骤 #

• 利用Product的唯一标识（比如Id字段）生成专属的模态框ID
• 同步修改按钮的data-bs-target属性，指向当前组件的模态框
• 确保模态框的id与按钮目标一致

修改后的完整代码 #

@using InventoryWebApp.Models.Entity
@rendermode InteractiveServer

<div class="card">
    <div class="card-body">
        @if (Product != null)
        {
            <p class="card-text">Category:  @Product.Category</p>
            <p class="card-text">Quantity:  @Product.Quantity</p>
            <p class="card-text">Price:    $@(Product.Price.HasValue ? Product.Price.Value.ToString("F2") : "N/A")</p>
        }
    </div>
    <div class="card-footer">
        <button class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#@($"request-purchase-card-{Product?.Id}")">
            Request Purchase
        </button>
    </div>
</div>

<!-- Modal -->
@if (Product != null)
{
    <div class="modal fade" tabindex="-1" role="dialog" id="@($"request-purchase-card-{Product.Id}")">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">@Product.DisplayName</div>
                <div class="modal-body form-group">
                    <div class="d-flex align-items-center">
                        <label for="quantity-@Product.Id" class="mx-2">Quantity</label>
                        <button @onclick="() => QuantityToOrder--" class="btn btn-outline-primary" id="subtract-@Product.Id">-</button>
                        <input type="number" class="form-control mx-2" id="quantity-@Product.Id" style="width: 4rem;" value="@QuantityToOrder">
                        <button @onclick="() => QuantityToOrder++" class="btn btn-outline-primary" id="add-@Product.Id">+</button>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn btn-primary">Request Item</button></div>
                       </div>
        </div>
    </div>
}

@code {
    [Parameter]
    public Product? Product { get; set; }

    private int quantityToOrder = 1;
    public int QuantityToOrder
    {
        get => quantityToOrder;
        set => quantityToOrder = Math.Clamp(value, 0, 100);
    }
}

额外说明 #

如果你的Product没有Id字段，也可以在组件内部生成一个唯一标识：

private readonly Guid _modalUniqueId = Guid.NewGuid();

然后把模态框ID改成$"request-purchase-card-{_modalUniqueId}"，按钮的data-bs-target对应修改即可。

另外，也可以完全用Blazor的方式控制模态框显示（不依赖Bootstrap的data属性），通过布尔变量控制Modal的显示状态，更贴合Blazor的组件交互逻辑：

<button class="btn btn-primary" @onclick="() => ShowModal = true">
    Request Purchase
</button>

<!-- Modal -->
<div class="modal @(ShowModal ? "show d-block" : "fade")" tabindex="-1" role="dialog" style="background-color: rgba(0,0,0,0.5)">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>@Product?.DisplayName</h5>
                <button type="button" class="btn-close" @onclick="() => ShowModal = false"></button>
            </div>
            <div class="modal-body form-group">
                <div class="d-flex align-items-center">
                    <label class="mx-2">Quantity</label>
                    <button @onclick="() => QuantityToOrder--" class="btn btn-outline-primary">-</button>
                    <input type="number" class="form-control mx-2" style="width: 4rem;" value="@QuantityToOrder">
                    <button @onclick="() => QuantityToOrder++" class="btn btn-outline-primary">+</button>
                </div>
            </div>
            <div class="modal-footer"><button class="btn btn-primary">Request Item</button></div>
        </div>
    </div>
</div>

@code {
    private bool ShowModal { get; set; }
}

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