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

Question

I am using the out of the box fetch data example (updated it to lists rather than arrays though) and I want to be able to filter the data in the table in place based on a value selected in a drop-down but I am struggling to figure it out.

Here is my page code

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

And here is my WeatherForecastService which I had changed

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

Can anyone help suggest how I filter a table in place in Blazor Server-Side

Answer 1

1) Create a separate, original forecasts field:

@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) Create a method that will handle the "onchange" event of the dropdown:

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) Hook the method up with the dropdown:

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