Blazor - Bind each element in @foreach loop to corresponding Array index

Question

I have a @foreach loop in my Blazor page which iterates through a list of type UserInput (var userInput in UserInput).

If userInput.IsInput is false, then I will display a

with contents userInput.Text.

If userInput.IsInput is true, I will display an field and store its contents in userInputBind[index].

Below is the code I have tried:

@foreach (var userInput in myList)
{
    if (userInput.IsInput)
    {
        <input @bind="userInputBind[index]"/>
        if (index < 6) index++;
    }
    else
    {
        <p>@item.Text</p>
    }
}

@code {
    public List<UserInput> myList = new List<UserInput>
    {
        new UserInput { IsInput = false, Text = "One" },
        new UserInput { IsInput = false, Text = "Two" },
        new UserInput { IsInput = true, Text = "" },
        new UserInput { IsInput = false, Text = "Four" },
        new UserInput { IsInput = true, Text = "" },
        new UserInput { IsInput = false, Text = "Six" }
    };
    public List<string> userInputBind = new List<string> { "", "" };
    public int index;

    public class UserInput
    {
        public bool IsInput { get; set; }
        public string Text { get; set; }
    }
}

When I input "string1" into the first input field and "string2" into the second field, I expect the list to contain { "string1", "string2" }. Instead, both of the strings are "string2". How can I fix this issue? Any help is appreciated!

I suspect the global index field is the problem, and all bindings resolve to userInputBind[6]. Could you try with a for instead of foreach, and with a local variable instead of instance? — Jakub Fojtik
– Jakub Fojtik, Commented Apr 9, 2022 at 11:45
I recommend looking at @enet 's answer. It's one thing to figure how to do this, but the other issue is SHOULD you do it? I use this technique constantly in Blazor-- making a class with some data and a bool for Selected status. — Bennyboy1973
– Bennyboy1973, Commented Apr 9, 2022 at 22:16

MrC aka Shaun Curtis · Accepted Answer · 2022-04-11 20:39:05Z

6

Revised Answer

I think what you're trying to do is this:

@page "/"

@{index = 0;}
@foreach (var userInput in myList)
{
    int loopindex = index;

    if (userInput.IsInput)
    {
        <input @bind="myList[loopindex].Text"/>
    }
    else
    {
        <p>@userInput.Text</p>
    }
    index++;
}

@foreach (var userInput in myList)
{
    <div class="m-2 p-2">
        Value: @userInput.Text
    </div>
}

@code {
    public List<UserInput> myList = new List<UserInput>
    {
        new UserInput { IsInput = false, Text = "One" },
        new UserInput { IsInput = false, Text = "Two" },
        new UserInput { IsInput = true, Text = "" },
        new UserInput { IsInput = false, Text = "Four" },
        new UserInput { IsInput = true, Text = "" },
        new UserInput { IsInput = false, Text = "Six" }
    };
    public int index;

    public class UserInput
    {
        public bool IsInput { get; set; }
        public string Text { get; set; }
    }
}

I don't get the purpose of:

public List<string> userInputBind = new List<string> { "", "" };

Original Answer

This works. It uses a local loop variable to capture the "index" for each loop iteration, and resets index for each render.

It may not be the solution to your problem, but it answers the question posed.

@page "/"

@{index = 0;}
@foreach (bool item in myList)
{
    if (item)
    {
        int loopindex = index;
        <div>
        <input @bind="userInputBind[loopindex]"/>
        </div>
        index++;
    }
}

@foreach(var value in userInputBind)
{
    <div class="p-2">
        Value = @value
    </div>
}

@code {
    public List<bool> myList = new List<bool> { false, false, true, false, true, false };
    public List<string> userInputBind = new List<string> { "One", "Two" };
    public int index;
}

edited Apr 11, 2022 at 20:39

answered Apr 9, 2022 at 15:47

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ronaksse Over a year ago

Thanks for your reply. My issue with this code is that the Input and Text are not always separately shown (e.g. Input Input Input Text Text Text). They may be interlaced (e.g. Input Text Text Input Text Input). It seems like your code does not do that.

Ronaksse Over a year ago

Hello, I have edited my question again, thanks!

MrC aka Shaun Curtis Over a year ago

See revised answer.

Collectives™ on Stack Overflow

Blazor - Bind each element in @foreach loop to corresponding Array index

1 Answer 1

Revised Answer

Original Answer

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Revised Answer

Original Answer

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related