Blazor - How to dynamically create inputs and then read their values

Question

I have a form on a blazor website that I am trying to define. The user selects how many textboxes to create. Based on that number, they are created. I need to then total the number typed into these textboxes.

I can create the desired number of text boxes, but where I'm struggling is dynamically binding a value to it so that I can create a function to total the numbers typed in. I've done some research, and see I can bind them to a collection.

This is what I'm trying... But it is not working, any help would be great.

  <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();


}

Take a look at this; https://stackoverflow.com/questions/60232952/blazor-select-bind-to-a-value-in-a-list. — Nick, Feb 08 '21 at 15:50

score 9 · Accepted Answer · answered Feb 08 '21 at 16:43

This small code snipped will helps you to understand how to dynamically create inputs:

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);
    }
}

Check it out at https://blazorrepl.com/repl/cPOQEsvK41rqDkvC44

The code is self-explanatory, but, if you need some clarifications don't hesitate to let a comment.

`var ii = i` -- I believe [that is not necessary since C# 5](https://learn.microsoft.com/en-us/archive/blogs/ericlippert/closing-over-the-loop-variable-considered-harmful). — Kirk Woll, Feb 08 '21 at 16:47
Wow @KirkWoll, I should to read release notes again :) Thanks <3 — dani herrera, Feb 08 '21 at 16:55
Thank you for this very detailed example @daniherrera , I have learned so much from this! This has helped me solve the issue; Thank you so much again! — Arkayik, Feb 08 '21 at 18:47

Blazor - How to dynamically create inputs and then read their values

1 Answers1