点击Blazor中的按钮，获取表格行中输入字段的值

Question

我在产品数组上呈现一个表，每行都有一个带有单击事件的按钮来传递该行的产品。这很管用。

我试图完成的是在同一个按钮上点击该行的输入字段的值：

<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类中添加了一个Amount属性：

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;
}

尽管如此，如果还有另一种解决方案将其作为参数传递，我想知道。