1. はじめに

Fluent UI Blazorのデータグリッドでデータの追加・削除・編集、まとめて操作を行う方法をご紹介します。

2. 使用コンポーネント

本記事ではMicrosoft.FluentUI.AspNetCore.Componentsを使用します。

上記の記事の導入方法で指定するコンポーネント名をMicrosoft.FluentUI.AspNetCore.Componentsに変更し実施いただくことで利用できます。

3. ソースコード

本ソースコードは、プロジェクトテンプレートBlazor Web Appに含まれるServerProject\Components\Pages\Weather.razorの実装を元にしています。

@page "/weather"
@rendermode CustomRenderingMode.InteractiveServerWithoutPrerendering
 @using Microsoft.FluentUI.AspNetCore.Components

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<FluentStack Orientation="Orientation.Horizontal" Width="1600px">
    <FluentNumberField Min="-20" Max="50" @bind-Value="@(temperatureCNum)" Style="width:100px" />℃

    <FluentButton Appearance="Appearance.Accent" OnClick="Create">
        追加
    </FluentButton>

    <FluentButton Appearance="Appearance.Accent" OnClick="@(x => Update(forecasts!.Where(x => x.Selected).ToList()))" Disabled="@(forecasts!.Where(x => x.Selected).ToList().Count == 0)">
        更新
    </FluentButton>

    <FluentButton Appearance="Appearance.Accent" OnClick="@(x => Delete(forecasts!.Where(x => x.Selected).ToList()))" Disabled="@(forecasts!.Where(x => x.Selected).ToList().Count == 0)">
        削除
    </FluentButton>
</FluentStack>
<FluentStack Orientation="Orientation.Horizontal" Width="1200px">
    <div style="overflow-x: auto;">
        <FluentDataGrid Style="height: 700px;width:1200px;overflow:auto;" TGridItem="WeatherRecord" Items="@forecasts?.OrderBy(x => x.weather.Date).AsQueryable()" GenerateHeader="GenerateHeaderOption.Sticky">
            <ChildContent>
                <SelectColumn TGridItem="WeatherRecord"
							SelectMode="DataGridSelectMode.Multiple"
							SelectFromEntireRow="true"
							Property="@(e => e.Selected)"
							OnSelect="@(e => e.Item.Selected = e.Selected)"
							SelectAll="@(forecasts?.All(p => p.Selected))"
							SelectAllChanged="@(all => forecasts?.ToList().ForEach(p => p.Selected = (all == true)))" />
                <PropertyColumn Title="Date" Property="@(c => DateTimeToString(c.weather.Date.ToLocalTime()))" Align="Align.Start"/>
                <PropertyColumn Title="℃" Property="@(c => c.weather.TemperatureC)" Align="Align.Start" />
                <PropertyColumn Title="℉" Property="@(c => c.weather.TemperatureF)" Align="Align.Start"/>
                <PropertyColumn Title="Summary" Property="@(c => GetSummariesStr(c.weather.Summary))" Align="Align.Start" />

            </ChildContent>
            <EmptyContent>
                <FluentLabel>&nbsp; 該当データがありません。</FluentLabel>
            </EmptyContent>
            <LoadingContent>
                <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
                    <FluentProgressRing Width="120px" />
                </FluentStack>
            </LoadingContent>
        </FluentDataGrid>
    </div>
</FluentStack>

@code {
    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => (32 + (int)(TemperatureC / 0.5556));
        public int Summary => GetSummaries(TemperatureC);
    }

    public record WeatherRecord
    {
        public WeatherForecast? weather { get; set; }
        public bool Selected { get; set; } = false;
    }

    public enum summariesEnum : uint
    {
        Freezing = 1,
        Bracing,
        Chilly,
        Cool,
        Mild,
        Warm,
        Balmy,
        Hot,
        Sweltering,
        Scorching,
        Unknown = 100,
    }

    List<WeatherRecord>? forecasts = new List<WeatherRecord>();
    int temperatureCNum { get; set; } = 0;
    //表示用データを生成する
    protected override async Task OnInitializedAsync()
    {
        if (!forecasts.Any())
        {
            for (int i = 0; i < 10; i++)
            {
                WeatherForecast tempWeather = new WeatherForecast()
                    {
                        Date = DateTime.UtcNow.AddDays(i),
                        TemperatureC = Random.Shared.Next(-20, 55),
                    };
                WeatherRecord temp = new WeatherRecord() { weather = tempWeather, Selected = false };
                forecasts.Add(temp);
            }
        }
    }

    //Summary判定用関数
    public static int GetSummaries(int temperatureC)
    {
        if (-20 <= temperatureC && temperatureC <= -1)
        {
            //Freezing
            return 1;
        }

        if (0 <= temperatureC && temperatureC <= 5)
        {
            //Bracing
            return 2;
        }

        if (6 <= temperatureC && temperatureC <= 10)
        {
            //Chilly
            return 3;
        }

        if (11 <= temperatureC && temperatureC <= 15)
        {
            //Cool
            return 4;
        }

        if (16 <= temperatureC && temperatureC <= 20)
        {
            //Mild
            return 5;
        }

        if (21 <= temperatureC && temperatureC <= 25)
        {
            //Warm
            return 6;
        }

        if (26 <= temperatureC && temperatureC <= 30)
        {
            //Balmy
            return 7;
        }

        if (31 <= temperatureC && temperatureC <= 35)
        {
            //Hot
            return 8;
        }

        if (36 <= temperatureC && temperatureC <= 45)
        {
            //Sweltering
            return 9;
        }

        if (46 <= temperatureC && temperatureC <= 55)
        {
            //Scorching
            return 10;
        }
        //Unknown
        return 100;
    }

    //Summary表示用関数
    string GetSummariesStr(int summary)
    {
        switch (summary)
        {
            case 1:
                return "Freezing";
            case 2:
                return "Bracing";
            case 3:
                return "Chilly";
            case 4:
                return "Cool";
            case 5:
                return "Mild";
            case 6:
                return "Warm";
            case 7:
                return "Balmy";
            case 8:
                return "Hot";
            case 9:
                return "Sweltering";
            case 10:
                return "Scorching";
            default:
                return "Unknown";
        }
    }

    //Dateのフォーマット用関数
    string DateTimeToString(DateTime? dateTime)
    {
        if (dateTime == null || dateTime == DateTime.MinValue || dateTime == DateTime.MinValue.ToLocalTime())
        {
            return string.Empty;
        }
        return dateTime?.ToString("yyyy-MM-dd") ?? string.Empty;
    }

    //追加処理
    async Task Create()
    {
        WeatherForecast tempWeather = new WeatherForecast()
            {
                Date = DateTime.UtcNow,
                TemperatureC = (int)temperatureCNum,
            };
        WeatherRecord temp = new WeatherRecord() { weather = tempWeather, Selected = false };
        forecasts.Add(temp);
    }

    //編集処理
    async Task Update(List<WeatherRecord> weathers)
    {
        foreach (var weather in weathers)
        {
            forecasts.Remove(weather);
            WeatherForecast tempWeather = new WeatherForecast()
                {
                    Date = weather.weather.Date,
                    TemperatureC = (int)temperatureCNum,
                };
            WeatherRecord temp = new WeatherRecord() { weather = tempWeather, Selected = false };
            forecasts.Add(temp);
        }
    }

    //削除処理
    async Task Delete(List<WeatherRecord> weathers)
    {
        foreach (var weather in weathers)
        {
            forecasts.Remove(weather);
        }
    }
}

4. 解説

4.1 複数操作

                <SelectColumn TGridItem="WeatherRecord"
							SelectMode="DataGridSelectMode.Multiple"
							SelectFromEntireRow="true"
							Property="@(e => e.Selected)"
							OnSelect="@(e => e.Item.Selected = e.Selected)"
							SelectAll="@(forecasts?.All(p => p.Selected))"

SelectColumnでチェックボックスの表示・選択状態の取得を行っています。
全選択用チェックボックスはヘッダーに生成されます。

プロパティ	説明
TGridItem	SelectColumnが扱う型を指定する
SelectMode	チェックボックスが単一選択か複数選択かを指定する
SelectFromEntireRow	チェックボックスの全選択に対応するかを指定する
Property	選択状態を指定された値にバインドする
OnSelect	チェックされたときの動作を指定する
SelectAll	全選択が行われているかをチェックする

4.2 追加

↓

    <FluentButton Appearance="Appearance.Accent" OnClick="Create">
        追加
    </FluentButton>
    
    <FluentNumberField Min="-20" Max="50" @bind-Value="@(temperatureCNum)" Style="width:100px"/>℃

    async Task Create()
    {
        WeatherForecast tempWeather = new WeatherForecast()
            {
                Date = DateTime.UtcNow,
                TemperatureC = (int)temperatureCNum,
            };
        WeatherRecord temp = new WeatherRecord() { weather = tempWeather, Selected = false };
        forecasts.Add(temp);
    }

FluentNumberFieldで指定したTemperatureC(℃)を実行時の日時で登録します。
TemperatureF(℉)・SummaryはTemperatureC(℃)を元に算出します。

4.3 更新

↓

    <FluentButton Appearance="Appearance.Accent" OnClick="@(x => Update(forecasts!.Where(x => x.Selected).ToList()))" Disabled="@(forecasts!.Where(x => x.Selected).ToList().Count == 0)">
        更新
    </FluentButton>

    <FluentNumberField Min="-20" Max="50" @bind-Value="@(temperatureCNum)" Style="width:100px"/>℃

    async Task Update(List<WeatherRecord> weathers)
    {
        foreach (var weather in weathers)
        {
            forecasts.Remove(weather);
            WeatherForecast tempWeather = new WeatherForecast()
                {
                    Date = weather.weather.Date,
                    TemperatureC = (int)temperatureCNum,
                };
            WeatherRecord temp = new WeatherRecord() { weather = tempWeather, Selected = false };
            forecasts.Add(temp);
        }
    }

チェックボックスで選択した項目をFluentNumberFieldで指定したTemperatureC(℃)を元に更新します。
チェックボックスでなにも選択していない場合は、Disabledによって更新ボタンが無効になります。

4.4 削除

↓

    <FluentButton Appearance="Appearance.Accent" OnClick="@(x => Delete(forecasts!.Where(x => x.Selected).ToList()))" Disabled="@(forecasts!.Where(x => x.Selected).ToList().Count == 0)">

    async Task Delete(List<WeatherRecord> weathers)
    {
        foreach (var weather in weathers)
        {
            forecasts.Remove(weather);
        }
    }

チェックボックスで選択した項目を削除します。
チェックボックスでなにも選択していない場合は、Disabledによって削除ボタンが無効になります。

5. おわりに

Fluent UI Blazorを使用することで、様々なデータの操作を行うことができるデータグリッドを簡単に実装することができました。
Fluent UI Blazorに関する以下の記事も見ていただけると嬉しいです！

6. 参考