C# 在Blazor中，如何使用下拉值过滤HTML

我正在使用开箱即用的获取数据示例（虽然已将其更新为列表而不是数组），我希望能够根据在下拉列表中选择的值对表中的数据进行适当的筛选，但我正在努力解决这个问题

这是我的页面代码

@page "/fetchdata"

@using BlazorExamples.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">Summaries</label>
        </div>
        <select class="custom-select">
            <option>All</option>
            @foreach (var item in summaries)
            {
                <option value="@item">@item</option>
            }
        </select>
    </div>
    <br />
    <br />
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private List<WeatherForecast> forecasts;

    List<string> summaries;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(2000);
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
        summaries = forecasts.Select(e => e.Summary).Distinct().ToList();
    }
}

@page”/fetchdata
@使用BlazoreSamples.Data
@注入天气预报服务预报服务
天气预报
此组件演示如何从服务获取数据

@如果（预测==null）
{
加载

}
其他的
{
摘要
全部的
@foreach（汇总中的var项目）
{
@项目
}




日期
温度（C）
温度（F）
总结
@foreach（预测中的var预测）
{
@forecast.Date.ToShortDateString（）的
@预测温度
@预测温度
@预测.摘要
}
}
@代码{
私人名单预测；
清单摘要；
受保护的重写异步任务OnInitializedAsync（）
{
等待任务。延迟（2000）；
Forecast=await ForecastService.GetForecastSync（DateTime.Now）；
摘要=预测。选择（e=>e.Summary）.Distinct（）.ToList（）；
}
}

这是我改变的天气预报服务

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorExamples.Data
{
    public class WeatherForecastService
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        public Task<List<WeatherForecast>> GetForecastAsync(DateTime startDate)
        {
            var rng = new Random();
            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            }).ToList());
        }
    }
}

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Threading.Tasks；
命名空间BlazorExamples.Data
{
公营天气预报服务
{
私有静态只读字符串[]摘要=新[]
{
“冻结”、“支撑”、“寒冷”、“凉爽”、“温和”、“温暖”、“温和”、“炎热”、“闷热”、“灼热”
};
公共任务GetForecastSync（日期时间开始日期）
{
var rng=新随机数（）；
返回Task.FromResult（可枚举的.Range（1，5）。选择（index=>newweatherforecast
{
日期=开始日期。添加天数（索引），
温度c=下一个温度（-20,55），
摘要=摘要[rng.Next（摘要长度）]
}).ToList（））；
}
}
}

有人能建议我如何在Blazor服务器端过滤一个表吗？创建一个单独的原始预测字段：

@code {
private List<WeatherForecast> origForecasts; // this
private List<WeatherForecast> forecasts;

protected override async Task OnInitializedAsync()
{
    await Task.Delay(2000);
    origForecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    forecasts = origForecasts;
    summaries = forecasts.Select(e => e.Summary).Distinct().ToList();
}

3） 将该方法与下拉列表挂钩：

protected void SummarySelected(UIChangeEventArgs e)
{
    var currSummary = e.Value.ToString();
    if (currSummary.Equals("All"))
    {
        forecasts = origForecasts;
    }
    else
    {
        forecasts = origForecasts.Where(f => f.Summary.Equals(currSummary)).ToList();
    }
}

<select @onchange="SummarySelected" class="custom-select">

谢谢@GonnaGetGet。我曾想过要有一个重复的列表，但我试图避免这种情况，并正在寻找一种简单的方法，只需一次列表，我就可以在客户端UI上添加一个过滤器的？@PascalR。它来自OP的代码-它模拟了2秒的延迟。哦，我没有注意到它已经在OP的代码中了。我只是看不出有什么理由在该方法中设置延迟。它是

ChangeEventArgs

而不是

UIChangeEventArgs

。