如何解决使用 MatBlazor 对多个 NumericUpDownField 绑定进行 Blazor
我是 Blazor 的新手,通常也是前端开发的新手。
我正在尝试实现网店卡片订购,它代表单个产品。此外,我想在每张卡上都有 MatNumericupdownField,但我不想创建将绑定到一百个 Numericupdown 字段的一百个字段。我需要一些动态解决方案。
这是我的代码:
产品卡片
@page "/productcard"
@inherits ProductCardBase
@if (productsList == null)
{
<div class="spinner"></div>
}
else
{
<div class="card-deck">
@foreach (var p in productsList)
{
<div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
<div class="card-header">
<h3>@p.Caption</h3>
</div>
<div class="card-body text-center">
<h4>Product ID : @p.ProductID</h4>
</div>
<img class="" src="@p.Pictures.FirstOrDefault()" />
@if (p.Pictures.Count > 0)
{
<img class="card-img-top" src="@convertimageTodisplay(p.Pictures.FirstOrDefault().Picturedisplay.ToString())" />
}
<p>
<MatNumericupdownField Label="Quantity"
@bind-Value=@testingNullableDecimal2
DecimalPlaces=0
Minimum=0 Maximum=null>
</MatNumericupdownField>
</p>
<div class="card-footer text-center">
<a href=""
class="btn btn-primary m-1">View</a>
<a href="#" class="btn btn-primary m-1">Edit</a>
<a href="#" class="btn btn-danger m-1">Delete</a>
</div>
</div>
}
</div>
ProductCardBase
public class ProductCardBase : ComponentBase
{
[Inject]
IApiCallService<Product> apiCallService { get; set; }
Product product { get; set; }
public bool Result { get; set; }
public string RecordName { get; set; }
//public string[] Products { get; set; }
public bool IsGridViewFiltered { get; set; }
bool isLoading = true;
public string SelectedBrand { get; set; }
protected decimal? testingNullableDecimal2 = null;
public bool IsVisible { get; set; }
protected List<Product> productsList { get; set; }
protected override async Task OnInitializedAsync()
{
product = new Product();
await LoadProducts();
}
protected void Click(MouseEventArgs e)
{
testingNullableDecimal2 += 100;
}
private async Task LoadProducts()
{
await Task.Delay(500);
productsList = await apiCallService.GetAllAsList("products");
}
protected string convertimageTodisplay(string image)
{
if (image != null)
{
var fs = string.Format("data:image/jpg;base64,{0}",image);
return fs;
}
return "";
}
}
在这个例子中 testingNullableDecimal2 绑定到每张卡片,但我需要为每张卡片将其分开。
解决方法
一种解决方案是将绑定变量 (testingNullableDecimal) 放入您的产品模型中。
然后你把代码改成这样:
<MatNumericUpDownField Label="Quantity"
@bind-Value=@p.testingNullableDecimal2
DecimalPlaces=0
Minimum=0 Maximum=null>
</MatNumericUpDownField>
顺便说一句,我不熟悉 MatBlazor 工具,但是设置 max value=null 看起来很可疑。这是正确的语法吗?
,Jason D 的选择很好。我经常使用的一种技术是传递接口列表而不是实现。然后你可以有一个扩展来公开显示内容:计数器、是否选择了内容的布尔值等等。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。