Blazor: calculate the sum of multiple textboxes

Question

I make textboxes like this:

@for(int i = 0; i <= 10; i++)
{
    <input type="text" id="f-@i">
}
The sum is: @sum
@code{
    int sum = 0;
    for(@*some code*@)
    {
       sum += @*some code*@
    }
}

I want to calculate the sum the numbers in textboxes.

Answer 1

You can bind values to a List something like this:

@for(int i = 0; i <= ValuesList.count; i++)
{
    var j = i ; 
    <input  @bind="@ValuesList[j]" type="number" id="f-@i">
}
The sum is: @sum
@code{
    var ValuesList = new List<int>{1,2,4,5,6}; //<-- 
    int sum =0;
    // put the code bellow in the method that calculate the sum
     sum = ValueList.Sum();
}

Answer 2

I think I understand what's the issue.

First off, you want to bind a variable to each of the input text element created dynamically. The easiest way to do so is to define a collection object and bound each element of the collection with an input text element, so that when you, say, click on a button, the event handler for the button is called, perform the calculation, and print the result.

Here's a code sample to do that...copy, run and test:

@for (int i = 0; i < values.Count; i++)
{
    var local = i;
    <input @bind="@values[local]" type="number" id="f-@i">
}


The sum is: @sum

<button @onclick="Calculate">Calculate</button>

@code{
    List<int> values = Enumerable.Range(1, 10).ToList();
    int sum = 0;

    private void Calculate()
    {
        sum = 0;

        sum = values.Sum();

       //for (int i = 0; i < values.Count; i++)
       //{
            // sum += values[i];
        //}
     }

}   

Now, you can edit the text boxes and press the Calculate button for the new values.

NOTE: I know what is the issue, and why you ask this question... It is related to your previous question. Understand this: You must use a local variable in your for loop...see above. See this also See this also

Answer 3

Thank you all. I found the solution:

<EditForm Model="@data1">
    @for (int i = 0; i < data1.Count; i++)
    {
        int j = i;
        <InputText @bind-Value="@data1[j].number" />
        <br><br>
    }
</EditForm>
<br />
<button @onclick="addKon" class="btn btn-success">+++</button> ===
<button @onclick="delKon" class="btn btn-danger">---</button>
<br />
<button @onclick="sum1">Calculate</button>
<br />
@Sum2
@code{
    public class salam
    {
        public string number;
    }
    public List<salam> data1;
    void addKon()
    {
        data1.Add(new salam { number = "0" });
    }
    void delKon()
    {
        data1.RemoveAt(data1.Count - 1);
    }
    protected override void OnInitialized()
    {
        data1 = new List<salam>
        {
            new salam{ number="1"},
            new salam{ number="2"},
            new salam{ number="3"},
            new salam{ number="4"}
        };
    }
    void sum1()
    {
        int u = 0;
        foreach (var ss in data1)
            u += int.Parse(ss.number);
        Sum2 = u;
        StateHasChanged();
    }
}