如何解决显示数量来自数据库且价格由用户输入的每一行的总价
我的 Blazor Asp.Net 5 应用程序中有一个包含 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);
}
}
解决方法
这是一个工作演示,如下所示:
型号:
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);
}
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。