Blazor 数据绑定动态生成的元素

Question

我想从我的 Blazor 网页上的“AdditionalFields”列表动态创建和绑定一些 select 元素。

我需要将每个元素绑定到 CheckoutData 变量。

但我不知道如何创建变量/数组或类似的东西，通过绑定值正确更新。

详情可以看我的附件(Image)和这个源码：

@if (StoreData.StoreContainer?.AdditionalFields != null)
    @foreach (var additionalField in     StoreData.StoreContainer.AdditionalFields)
    {
        <div class="col-sm-6">
            <div class="page_input">
                <label> @additionalField.Caption </label>
                <InputSelect class="checkout-control pristine untouched" @bind-Value="@CheckoutData.OrderTimeType">
                    @foreach (var keyValue in additionalField.ValueList)
                    {
                        <option value="@keyValue.Sort" selected="@(keyValue == additionalField.ValueList[0] ? "selected" : "")">@keyValue.SelectionText</option>
                    }
                </InputSelect>
            </div>
        </div>
    }

Answer 1

我创建了一个示例 BlazorFiddle，它展示了如何处理 AdditionalFields 列表中的 select 个元素，大致按照您在问题中的示例。

为了显示 selection，我在 AdditionalField class 中添加了 .Selected 属性，但您可能将其存储在别处。

注意要点：

    int count = additionalFields.Count;
    for (var i=0; i < count; i++)
    {
        int current = i; // don't use loop variable in binding
        var additionalField = additionalFields[current];

我使用 for 循环遍历 AdditionalFields 并在循环中保存当前索引 - 这对于确保不在 [=17 中传递循环变量很重要=] 事件处理程序。我在这里没有使用 bind，所以很容易看出会发生什么。

                <select class="checkout-control pristine untouched" @onchange="((e) => HandleSelect(e, current))" >

我使用了 HTML select 而不是 InputSelect，并处理了 @onchange 事件：这传递了事件参数 e 和当前HandleSelect 方法的索引

您可能需要采用这种方法，但它展示了一种可以在 Blazor 中动态绑定的方法。

重要说明：代码将第二个字段的 Selected 值设置为第二个排序值，以证明 selected 属性正常工作。

但是，请注意第一个字段将 "sort 1" 显示为 selected 但不会触发事件 - 这是 HTML auto -selecting select 列表中的第一个元素，因此第一个元素的 Selected 属性仍然为空。要么确保 Selected 在开始时设置，例如到第一个值，或者有一个空白 <option value="">[select a sort]</option> 作为将绑定到空白 select.

的第一个项目

Blazor 数据绑定动态生成的元素

Blazor data-bind dynamically generated elements

blazor

注意要点：