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

【问题标题】：Blazor data-bind dynamically generated elementsBlazor 数据绑定动态生成的元素
【发布时间】：2019-11-25 22:54:14
【问题描述】：

我想从我的 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>
    }

【问题讨论】：

你能澄清问题是什么吗？您是想说CheckoutData.OrderTimeType 没有更新为下拉列表中当前选择的值吗？
不，那个变量是错误的（被复制粘贴）只是想在结帐类中有变量，它将被正确填充/绑定到附加字段列表并且不知道该怎么做现在和这里...
您能说明一下 AdditionalFields 属性是什么类型吗？
AdditionalFields 是简单类的列表，带有 Caption（字符串）和 ValueList（带有 Sort 和 SelectionText 的 AdditionalField 的 ValueMembers 列表）。

标签： blazor

【解决方案1】：

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

为了显示选择，我在 AdditionalField 类中添加了一个 .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 并将当前索引保存在循环中 - 这对于确保您不会在@onchanged 事件处理程序中传递循环变量很重要。我在这里没有使用bind，所以很容易看到会发生什么。

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

我使用 HTML 选择而不是 InputSelect，并处理 @onchange 事件：这会将事件参数 e 和当前索引传递给 HandleSelect 方法

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

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

然而，请注意第一个字段显示“排序 1”为选中但不会触发事件 - 这是 HTML 自动选择选择列表中的第一个元素，所以第一个元素的 @ 987654337@ 属性仍然为空。要么确保 Selected 在开始时设置，例如到第一个值，或者将空白 <option value="">[select a sort]</option> 作为第一项绑定到空白选择。

【讨论】：