在 Blazor 中单击按钮时获取 table 行中输入字段的值

Question

我在一系列产品上呈现 table，每行都有一个带有点击事件的按钮以传递该行的产品。行得通。

我想要完成的是通过同一个按钮单击该行的输入字段的值：

<tbody>
    @foreach (var product in products)
    {
        <tr>
            <td>@product.Day</td>
            <td>@product.Name</td>
            <td>@product.Price</td>
            <td>
                <img src="images/@(product.Name).jpg" alt="" style="width:100px;" />
            </td>
            <td>
                <input type="text" id="amount" />
            </td>
            <td><button @onclick="(() => Add(product))" >Add</button></td>
        </tr>
    }
</tbody>

在后面的代码中，我有以下方法（仅在放入产品时有效）：

protected async Task Add(Product product)
{

}

如何更改输入字段（或在编辑表单中将其替换为每一行的 InputText？）并将其传递给 Add 方法，例如

protected async Task Add(Product product, int amount)
{

}

Answer 1

只需将您输入的值绑定到一个字段或属性。然后你可以在你的方法中使用它：

<input type="text" id="amount" @bind-value="@_amount" />

@code {
    private int _amount = 0;
    
    protected async Task Add(Product product)
    {
        if (_amount > 0)
                ...
    }
}

Answer 2

我尝试了一种不同的方法，并在 Product class:

中添加了一个金额属性

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    public DayOfWeek Day { get; set; }
    public int Amount { get; set; }
}

在我的页面中，我将其设置为：

@foreach (var product in products)
{
    <tr>
        <td>@product.Day</td>
        <td>@product.Name</td>
        <td>@product.Price</td>
        <td>
            <img src="images/@(product.Name).jpg" alt="" style="width:100px;" />
        </td>
        <td>            
            <input type="text" @bind-value="@product.Amount" />
        </td>
        <td><button @onclick="(() => Add(product))" >Add</button></td>
    </tr>
}

在我的函数中，我获取了输入字段的值，并在处理完金额后将其设置回 0：

protected async Task Add(Product product)
{
    // do something useful with the amount and set it back to 0
    product.Amount = 0;
}

不过，如果有另一种将其作为参数传递的解决方案，我想知道。

在 Blazor 中单击按钮时获取 table 行中输入字段的值

Get value of input field in table row on button click in Blazor

blazor

blazor-webassembly