显示数量来自数据库和用户输入价格的每一行的总价

Question

我的 Blazor Asp.Net 5 应用程序中有一个 table，有 4 列：

标题
数量
价格
总计

每次用户在第 3 列中输入价格时，我希望第 4 列单元格在他键入的行中按 3x2（数量 X 价格）实时更新。我怎样才能做到这一点？

可能有很多行，数据来自数据库。

数据显示给用户并允许他为每个产品行输入价格，同时数量已经填充：

@for (var i = 0; i < advert.Products.Count; i++)
{
    var index = i;
    var item = advert.Products[i];
    <tr>
    <th scope="row">@index</th>
    <td>@item.Title</td>
    <td>@item.Qty</td>
    <td><input /></td>
    <td>Sum here</td>
    </tr>
}
@code {
    [Parameter] public int AdvertId { get; set; }
    public Advert advert;

    protected override async Task OnInitializedAsync()
    {
        advert = await adRepo.GetAdvert(AdvertId);
    }
}

Answer 1

这是一个像下面这样的工作演示：

型号：

public class Advert
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Product> Products { get; set; }
}
public class Product
{
    public string Title { get; set; }
    public int Qty { get; set; }
    public int Price { get; set; }
}

Index.razor:

@for (var i = 0; i < advert.Products.Count; i++)
{
    var index = i;
    var item = advert.Products[i];
    <tr>
        <th scope="row">@index</th>
        <td>@item.Title</td>
        <td>@item.Qty</td>
        <td><input @bind="@item.Price" /></td>
        <td>@{
            var total = item.Price * item.Qty;
        }
        @total</td>
    </tr>
}
@code {
    [Parameter] public int AdvertId { get; set; }
    public Advert advert;
    protected override async Task OnInitializedAsync()
    {
        advert = await adRepo.GetAdvert(AdvertId);

    }
}

结果：

显示数量来自数据库和用户输入价格的每一行的总价

Display total price for each row where quantity comes from database and price is entered by user

c#

asp.net-core

blazor

.net-5