Blazor 使用 MatBlazor 绑定多个 NumericUpDownField答案

【问题标题】：Blazor multiple NumericUpDownField binding using MatBlazorBlazor 使用 MatBlazor 绑定多个 NumericUpDownField
【发布时间】：2021-03-16 15:46:25
【问题描述】：

我是 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 绑定到每张卡片，但我需要为每张卡片分开。

【问题讨论】：

标签： .net blazor matblazor

【解决方案1】：

一种解决方案是将绑定变量 (testingNullableDecimal) 放入您的 Product 模型中。

然后你像这样更改代码：

<MatNumericUpDownField Label="Quantity"
                       @bind-Value=@p.testingNullableDecimal2
                       DecimalPlaces=0
                       Minimum=0 Maximum=null>
</MatNumericUpDownField>

顺便说一句，我不熟悉 MatBlazor 工具，但设置 max value=null 看起来很可疑。这是正确的语法吗？

【讨论】：

【解决方案2】：

Jason D 的选择很好。我经常使用的一种技术是传递接口列表而不是实现。然后，您可以拥有一个公开显示内容的扩展：计数器、是否选择内容的布尔值等等。

【讨论】：