在Blazor中，如何使用下拉值過濾HTML

Question

我正在使用開箱即用的獲取數據示例（雖然將其更新為列表而不是數組），但我希望能夠基於下拉列表中選擇的值在適當的位置過濾表中的數據，但我正在努力弄明白。

這是我的頁面代碼

@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 Server-Side中過濾表

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">