foreach 中的多个 Blazored Typeahees

Question

我在我的 Blazor 服务器应用程序中使用 Blazored Typeahead。在我的剃须刀页面中，代码如下

Blazored Typeahead - 在 Foreach 中

    @foreach (var employee in EmployeeList)
    {
        <div class="row">
            <div class="col-3">
                <BlazoredTypeahead SearchMethod="@GetPeopleLocal"
                               @bind-Value="@SelectedPerson"
                               placeholder="Search by first name...">
                    <SelectedTemplate Context="person">
                        @person.Firstname
                    </SelectedTemplate>
                    <ResultTemplate Context="person">
                        @person.Firstname @person.Lastname
                    </ResultTemplate>
                </BlazoredTypeahead>
            </div>
            <div class="col-3">
                <BlazoredTypeahead SearchMethod="@GetRolesLocal"
                               @bind-Value="@SelectedRole"
                               placeholder="Search by role name...">
                    <SelectedTemplate Context="role">
                        @role.Rolename
                    </SelectedTemplate>
                    <ResultTemplate Context="role">
                        @role.Rolename
                    </ResultTemplate>
                </BlazoredTypeahead>
            </div>
            <div class="col-1">
                <a href="javascript:void(0)" class="btn btn-danger" @onclick="@(()=>OnEmployeeDelete(employee))">X</a>
            </div>
        </div>
    }
    
    <div class="form-group">
        <a href="javascript:void(0)" class="btn btn-success" @onclick="@(()=>OnEmployeeAdd())">Add Employee</a>
    </div>
    
    <div class="form-group">
        <a href="javascript:void(0)" class="btn btn-success" @onclick="@(()=>CreateEmployeeList())">Create Employee List</a>
    </div>


@code {
    private List<Employee> EmployeeList = new List<Employee>();
    private Employee employee = new Employee();

    private List<Person> People = new List<Person>();
    private List<Role> Roles = new List<Role>();
    private Person SelectedPerson;
    private Role SelectedRole;

    protected override void OnInitialized()
    {
        People.AddRange(new List<Person>()
            {
                    new Person() { Id = 1, Firstname = "Martelle", Lastname = "Cullon" },
                    new Person() { Id = 2, Firstname = "Zelda", Lastname = "Abrahamsson" },
                    new Person() { Id = 3, Firstname = "Benedetta", Lastname = "Posse" },
                    new Person() { Id = 4, Firstname = "Benoite", Lastname = "Gobel" },
                    new Person() { Id = 5, Firstname = "Charlot", Lastname = "Fullicks" },
                    new Person() { Id = 6, Firstname = "Vinson", Lastname = "Turbat" },
                    new Person() { Id = 7, Firstname = "Lenore", Lastname = "Malam" },
                    new Person() { Id = 8, Firstname = "Emanuele", Lastname = "Kolakovic" }
                });
        Roles.AddRange(new List<Role>()
            {
                    new Role() { Id = 1, Rolename = "Programmer Frontend" },
                    new Role() { Id = 1, Rolename = "Programmer Backend" },
                    new Role() { Id = 2, Rolename = "UX Designer" },
                    new Role() { Id = 3, Rolename = "DBA Developer" }
                });
    }

    private async Task<IEnumerable<Person>> GetPeopleLocal(string searchText)
    {
        return await Task.FromResult(People.Where(x => x.Firstname.ToLower().Contains(searchText.ToLower())).ToList());
    }

    private async Task<IEnumerable<Role>> GetRolesLocal(string searchText)
    {
        return await Task.FromResult(Roles.Where(x => x.Rolename.ToLower().Contains(searchText.ToLower())).ToList());
    }

    public void OnEmployeeDelete(Employee employee)
    {
        EmployeeList.Remove(employee);
    }

    public void OnEmployeeAdd()
    {
        EmployeeList.Add(new Employee());
    }

    private async Task CreateEmployeeList()
    {
        foreach (var employee in EmployeeList)
        {
            var resultPerson = employee.Person;
            var resultRole = employee.Role;
        }
    }
}

我的问题是，当我通过单击“添加员工”添加新行并为名称和角色选择一些值（例如 Samara 和 Developer .NET）时，所有行都获得相同的值。此外，当我单击调用 CreateEmployeeList 方法的“创建员工列表”按钮时，EmployeeList 在所有行中都有空值。

当尝试删除一行时，OnEmployeeDelete 方法会删除最后一行，无论我单击的是哪一行。

员工class

public class Employee
{
    public Employee() { }
    public Employee(Person person, Role role)
    {
        Person = person;
        Role = role;
    }

    public Person Person { get; set; }
    public Role Role { get; set; }
}

作用class

public class Role
{
    public Role() { }
    public Role(int id, string rolename)
    {
        Id = id;
        Rolename = rolename;
    }

    public int Id { get; set; }
    public string Rolename { get; set; }
}

请注意，我正在使用 Blazor Typeahead 的存储库：https://github.com/Blazored/Typeahead 我刚刚创建了一个页面 Foreach.razor 并向其中添加了上面的代码。

Answer 1

从所附代码中，@SelectedPerson 和 @SelectedRole 为 EmployeeList 中的每个元素共享。这就是为什么连续更改 @SelectedPerson 或 @SelectedRole 会反映在其他元素中。

您需要一个变量来保存选定的员工列表。

@foreach (var selectedEmployee in SelectedEmployeeList)
{
    <div class="row">
        <div class="col-3">
            <BlazoredTypeahead SearchMethod="@GetPeopleLocal"
                           @bind-Value="@selectedEmployee.Person"
                           placeholder="Search by first name...">
                <SelectedTemplate Context="person">
                    @person.Firstname
                </SelectedTemplate>
                <ResultTemplate Context="person">
                    @person.Firstname @person.Lastname
                </ResultTemplate>
            </BlazoredTypeahead>
        </div>
        <div class="col-3">
            <BlazoredTypeahead SearchMethod="@GetRolesLocal"
                           @bind-Value="@selectedEmployee.Role"
                           placeholder="Search by role name...">
                <SelectedTemplate Context="role">
                    @role.Rolename
                </SelectedTemplate>
                <ResultTemplate Context="role">
                    @role.Rolename
                </ResultTemplate>
            </BlazoredTypeahead>
        </div>
        <div class="col-1">
            <a href="javascript:void(0)" class="btn btn-danger" @onclick="@(()=>OnEmployeeDelete(selectedEmployee))">X</a>
        </div>
    </div>
}

private List<Employee> SelectedEmployeeList = new List<Employee>();

public void OnEmployeeDelete(Employee employee)
{
    SelectedEmployeeList.Remove(employee);
}

public void OnEmployeeAdd()
{
    SelectedEmployeeList.Add(new Employee());
}

private async Task CreateEmployeeList()
{
    foreach (var employee in EmployeeList)
    {
        SelectedEmployeeList.Add(new Employee { Person = employee.Person, Role = employee.Role });
    }
}

foreach 中的多个 Blazored Typeahees

Multiple Blazored Typeaheads within foreach

c#

blazor-server-side

Blazored Typeahead - 在 Foreach 中