如何在Blazor Server中实现下拉列表过滤数据行？

1. 定义组件变量 #

在组件的@code块中添加必要变量，用于存储选中状态和过滤后的数据：

@code {
    // 原始用户数据集（替换为你的实际数据来源）
    private List<User> Users { get; set; } = new List<User>();

    // 存储选中的用户ID，null表示未选择任何用户
    private int? SelectedUserId { get; set; }

    // 动态计算过滤后的用户列表
    private IEnumerable<User> FilteredUsers => SelectedUserId.HasValue
        ? Users.Where(u => u.UserID == SelectedUserId.Value)
        : Users;

    // 组件初始化时加载数据（示例逻辑）
    protected override void OnInitialized()
    {
        // 这里替换为你的数据加载逻辑，比如从服务获取
        Users = new List<User>
        {
            new User { UserID = 1, UserName = "jdoe", FirstName = "John", LastName = "Doe" },
            new User { UserID = 2, UserName = "asmith", FirstName = "Alice", LastName = "Smith" }
        };
    }

    // 你的User模型类（根据实际结构调整）
    public class User
    {
        public int UserID { get; set; }
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

2. 修改下拉列表代码 #

将原生<select>改为Blazor双向绑定形式，修正语法错误：

<span>User: </span>
<select @bind-Value="SelectedUserId" class="form-control"> 
    <option value="">--- Select User---</option>
    @foreach (var user in Users)
    {
        <option value="@user.UserID">@user.UserName</option>
    }
</select>

• 用@bind-Value实现选中值与SelectedUserId的双向绑定，选项变化时自动更新变量
• 默认选项设置空value，对应未选择状态的null值
• 修正原代码中userin的语法错误，改为user in

3. 修改表格渲染逻辑 #

让表格遍历过滤后的用户列表：

<table class="table table-striped">
    <thead>
        <tr>
            <th>User ID</th>
            <th>User Name</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in FilteredUsers)
        {
            <tr>
                <td>@user.UserID</td>
                <td>@user.UserName</td>
                <td>@user.FirstName</td>
                <td>@user.LastName</td>
            </tr>
        }
    </tbody>
</table>

实现逻辑 #

• 用户选择下拉选项时，SelectedUserId自动更新
• FilteredUsers作为动态计算属性，根据选中状态过滤数据：
  • 未选择用户时返回全部数据
  • 选中特定用户时，仅返回对应用户的行数据

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