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

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

我试图定义一个 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();


}

解决方法

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

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

查看

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