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

Question

我正在使用开箱即用的获取数据示例（尽管已将其更新为列表而不是数组）并且我希望能够根据所选的值就地过滤 table 中的数据在下拉列表中，但我正在努力弄清楚。

这是我的页面代码

@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();
    }
}

这是我更改过的 WeatherForecastService

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());
        }
    }
}

任何人都可以帮助建议我如何在 Blazor 服务器端过滤 table

Answer 1

1) 创建一个单独的原始预测字段：

@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();
}

2) 创建一个方法来处理下拉列表的 "onchange" 事件：

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();
    }
}

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

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

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

In Blazor how can I filter an HTML using a drop-down value

c#

blazor-server-side