如何绑定Blazor中集合/列表中的元素?

时间:2020-02-26 14:22:48

标签: c# html razor blazor asp.net-core-3.0

我想在循环中将值绑定到列表中的元素,但找不到合适的解决方案。

<EditForm Model="@dailyReport" OnValidSubmit="@SubmitDailyReport">
        <p>
            <label>Count: </label>
            <InputNumber min="1" id="numberOfEffects" @bind-Value="numberOfEffects" />
        </p>
        @{
            for (int i = 1; i <= numberOfEffects; i++)
            {
                if (effects.Count < i)
                {
                    effects.Add("");
                }

                if (effects.Count > i)
                {
                    effects.RemoveAt(effects.Count - 1);
                }

                string concatId = "effect" + i.ToString();

                <p>
                    <label for="@concatId">@i</label>
                    <InputText id="@concatId" @bind-Value="effects.ElementAt(i-1)" />
                </p>
            }
         }
//rest code
 </EditForm>

当我尝试将值绑定到列表中的元素时,出现错误:

  1. 错误CS0131:作业的左侧必须为 变量,属性或索引器错误
  2. 错误CS1662:无法转换lambda 表达式为预期的委托类型,因为某些返回 块中的类型不能隐式转换为委托 返回类型

我想知道是否有任何可能的方法将数据绑定到集合。我需要它,因为我的模型具有类型为List的属性。在我的输入表单中,我希望允许添加用户所需的任意多个字符串。

编辑:

@code
{
    private DailyReport dailyReport = new DailyReport();
    private List<string> effects = new List<string>();
}

我也尝试在foreach循环中执行此操作,但显示另一个错误: 无法分配给“效果”,因为它是“ foreach迭代变量”

foreach (var effect in effects)
            {
                index++;
                Console.WriteLine(index);

                string concatId = "effect" + index.ToString();

                <p>
                    <label for="@concatId">@index</label>
                    <InputText id="@concatId" @bind-Value="effect" />
                </p>
            }

1 个答案:

答案 0 :(得分:7)

绑定不起作用:当输入文本的值更改时,您要修改列表,而不是元素本身。

相反,您必须在两个方向上“拆分”绑定的作用:

  • 根据模型的值设置输入字段的值
  • 在输入字段的值更改时设置模型

下面的代码显示了如何解决主要问题,然后必须根据需要进行调整。

@foreach (var element in effects.Select((e, i) => new { Effect = e, Index = i}))
{
    <p>
        <label for="@($"effect{element.Index}")">@element.Index</label>
        <input id="@($"effect{element.Index}")" value="@element.Effect"
               @onchange="@(e => effects[element.Index] = e.Value.ToString())" />
    </p>
}

@code {

    private List<string> effects = new List<string>() { "a", "b", "c" };

}

第一行达到了目的:将列表转换为可枚举,其中每个元素都是一个新对象,该对象封装了effects列表中的索引和值。您需要索引主要是因为@onchange事件,该事件必须知道应在原始列表中的哪个位置更新值。

如果您愿意,可以使用for循环:

@for (int i = 0; i < effects.Count; i++)
{
    // see https://stackoverflow.com/a/56426146/323447
    var iCopy = i;

    <p>
        <label for="@($"effect{i}")">@i</label>
        <input id="@($"effect{i}")" value="@effects[i]"
               @onchange="@(e => effects[iCopy] = e.Value.ToString())" />
    </p>
}

@code {

    private List<string> effects = new List<string>() { "a", "b", "c" };

}