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.

My problem is that I didn't find any resource to answer my question. At least give me some hint. Thanks — Ebrahim Mehri, Feb 27 '21 at 07:43
https://stackoverflow.com/questions/60416018/how-to-bind-to-element-from-collection-list-in-blazor — Caius Jard, Feb 27 '21 at 08:27

yasseros · Answer 1 · 2021-02-27T14:29:32.373

2

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

edited Feb 27 '21 at 14:29

answered Feb 27 '21 at 07:59

yasseros

841
9
16

1

You van use LINQ extension methods: `ValueList.Sum()` – Roy Cohen Feb 27 '21 at 10:22
This is bad you need to make a copy of the `i` variable as Enet has suggested. Or use a foreach loop. – Brian Parker Feb 27 '21 at 10:39
@BrianParker Can you explain why its bad ? – yasseros Feb 27 '21 at 10:44
You will get the wrong value for i. It is a known problem with for loops not just in Blazor – Brian Parker Feb 27 '21 at 10:45
@BrianParker I did not know that any resources to read about this problem ? – yasseros Feb 27 '21 at 10:51
https://stackoverflow.com/questions/271440/captured-variable-in-a-loop-in-c-sharp Personally I avoid for loops like the plague its very "just out of school to me". Use `@foreach` avoid the problem. – Brian Parker Feb 27 '21 at 10:54
As @RoyCohen suggested use `int sum => ValueList.Sum();` and drop the loop in the `@code` block as well. – Brian Parker Feb 27 '21 at 11:07

enet · Answer 2 · 2021-02-27T11:14:14.723

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

score -3 · Accepted Answer · answered Feb 27 '21 at 16:05

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

Blazor: calculate the sum of multiple textboxes

3 Answers3