Blazor - 如何动态创建输入然后读取它们的值

Question

我在 blazor 网站上有一个表格，我正在尝试定义它。用户选择要创建的文本框数量。根据该数字，它们被创建。然后我需要计算这些文本框中输入的数字的总数。

我可以创建所需数量的文本框，但我正在努力将一个值动态绑定到它，以便我可以创建一个函数来计算输入的数字的总和。我已经做了一些研究，看看我可以绑定它们到一个集合。

这就是我正在尝试的...但它不起作用，任何帮助都会很棒。

  <td>EE Only</td>
                        @{
                            for (int i = 0; i < AppData.PlanOption; i++)
                            {
                                <td>
                                    <input @bind="eevalue.Vals" @bind:event="oninput" @onchange="() => IncrementEETotal()" />
                                </td>
                            }
                        }
<td style="background-color: rgb(192, 206, 219);"><input class="field" readonly @bind="eeTotal" /></td>

@code {


    private void IncrementEETotal()
    {
        eeTotal = eevalue.Vals.Sum();
    }

    public class EEVals
    {
        public List<int> Vals { get; set; } = new List<int>();
    }


    public class EEItem
    {
        public int val { get; set; }
        public string name { get; set; }
    }
    public EEVals eevalue { get; set; } = new EEVals();


}

Answer 1

这段小代码片段将帮助您了解如何动态创建输入：

Num items: <input type="number" value="@N" @oninput="onchange_n"> Sum: @total <br>

@foreach (var i in Enumerable.Range(0,N))
{
    var ii = i;
    <input type="number" value="@MyList[ii]" 
           @oninput="(e) => resum(ii, e)"><br>
}

@code
{
    private int N = 0, total = 0;
    private List<int> MyList = new List<int>();
    private void onchange_n(ChangeEventArgs e)
    {
        N = 0;
        if (Int32.TryParse(e.Value.ToString(), out int n)) N = n;
        MyList.Clear();
        MyList.AddRange(Enumerable.Range(0,N).Select(_=>0));
        StateHasChanged();
    }
    private void resum(int i, ChangeEventArgs e)
    {
        var n = 0;
        if (Int32.TryParse(e.Value.ToString(), out int auxn)) n = auxn;
        MyList[i] = n;
        total = MyList.Sum(x=>x);
    }
}

请访问https://blazorrepl.com/repl/cPOQEsvK41rqDkvC44查看

该代码是不言自明的，但是，如果您需要一些说明，请随时发表评论。