如何向IEnumerable添加数据——MudBlazor关联数据表格

1. 添加更多行数据 #

在组件中定义数据源集合，通过初始化批量添加或动态触发方法插入数据即可：

@code {
    private List<Person> People = new List<Person>();

    protected override void OnInitialized()
    {
        // 初始化基础数据
        People.AddRange(new List<Person>
        {
            new Person { Id = 1, Name = "Harry Potter", Age = 11 },
            new Person { Id = 2, Name = "Hermione Granger", Age = 11 },
            new Person { Id = 3, Name = "Ron Weasley", Age = 11 }
        });
        // 批量添加更多行
        for (int i = 4; i <= 20; i++)
        {
            People.Add(new Person { Id = i, Name = $"Student {i}", Age = 11 + (i % 3) });
        }
    }

    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

如果需要动态加载（比如点击按钮追加），可以添加按钮和对应方法：

<MudButton OnClick="LoadMoreRows" Variant="Variant.Outlined">加载更多</MudButton>

@code {
    private void LoadMoreRows()
    {
        var nextId = People.Count + 1;
        for (int i = nextId; i < nextId + 10; i++)
        {
            People.Add(new Person { Id = i, Name = $"Student {i}", Age = 11 + (i % 3) });
        }
        StateHasChanged();
    }
}

2. 实现文本框过滤功能 #

绑定输入框值，对数据源进行实时过滤，将过滤后的集合作为表格数据源：

<MudTextField @bind-Value="FilterText" Placeholder="输入名称过滤" DebounceInterval="300" Variant="Variant.Outlined" Margin="Margin.Dense" />

<MudTable Items="@FilteredPeople" Hover="true" Striped="true">
    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>姓名</MudTh>
        <MudTh>年龄</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Id</MudTd>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.Age</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private string FilterText { get; set; }
    private List<Person> People { get; set; }

    // 过滤后的动态数据源
    private IEnumerable<Person> FilteredPeople => string.IsNullOrWhiteSpace(FilterText)
        ? People
        : People.Where(p => p.Name.Contains(FilterText, StringComparison.OrdinalIgnoreCase));

    // 初始化数据（同上）
    protected override void OnInitialized()
    {
        People = new List<Person>
        {
            new Person { Id = 1, Name = "Harry Potter", Age = 11 },
            new Person { Id = 2, Name = "Hermione Granger", Age = 11 },
            new Person { Id = 3, Name = "Ron Weasley", Age = 11 },
            new Person { Id = 4, Name = "Harry Osborn", Age = 16 }
        };
    }

    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

关键说明： #

• DebounceInterval设置输入防抖，避免频繁触发过滤逻辑
• StringComparison.OrdinalIgnoreCase实现大小写不敏感的模糊匹配
• FilteredPeople作为表格Items源，会随FilterText变化自动更新UI

内容的提问来源于stack exchange，提问作者Lisa