QuickGridについて

> dotnet add package Microsoft.AspNetCore.Components.QuickGrid

> dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
namespace Bl8Zoo.Common;
/// <summary>
/// Animal
/// </summary>
public class Animal
{
    // 名称
    public string Name { get; set; } = null!;
    // イメージ
    public byte[] Picture { get; set; } = null!;
}
/// <summary>
/// MongoDBストア形式
/// </summary>
public class AnimalDb {
    // ID
    [BsonId]
    public BsonObjectId _id { get; set;} = null!;
    // 名称
    public string Name { get; set; } = null!;
    // GridFS上のファイルId
    public BsonObjectId ImageId { get; set; } = null!;
    // メモ
    public string? Memo { get; set; }
}

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid
@using Bl8Zoo.Common
@using MongoDB.Driver
@using MongoDB.Driver.GridFS

<h2>Zoo</h2>
<br/>
<div style="display:flex;justify-content: center;flex-direction: column;">
    <!-- 
        QunickGridの実装例
        ItemsにIQueryable<T>を指定する。
        Paginationによって、ページング単位を指定できる
    -->
    <QuickGrid Items="@Animals" Pagination="@pagination">
        <!-- 
            PropertyColumnはAnimalsの各要素を直接描画したり、書式化出力するのに使用する
            Sortable="true"とすることで、ソートが可能となる
        -->
        <PropertyColumn Property="@(c=>c.Name)" Sortable="true"/>
        <!-- TemplateColumnを使用して、イメージを表示 -->
        <TemplateColumn Title="Image">
            <!-- 
                contextはAnimalsの各要素として使用できる
                ここでは、Picture(バイト配列)をDataURLとしてイメージを表示している
            -->
            <img src="data:image/jpeg;base64,@Convert.ToBase64String(context.Picture)"/>
        </TemplateColumn>
    </QuickGrid>
    <!-- Paginatorによって、ページの切替が可能 -->
    <Paginator State="@pagination" />
</div>
@code {
    // Pagination設定(1ページ2項目)
    protected PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
    // Items
    protected IQueryable<Animal> Animals = null!;
    /// <summary>
    /// 初期化処理
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync() {
        // MongoDBからデータ取得
        var cli = new MongoClient();
        var db = cli.GetDatabase("AnimalDb");
        var col = db.GetCollection<AnimalDb>("Animals");
        var fnd = col.AsQueryable<AnimalDb>();
        List<Animal> animals = new();
        GridFSBucket bkt = new GridFSBucket(db);
        foreach(var itm in fnd) {
            Animal ani = new Animal() { Name = itm.Name};
            // GridFSからイメージのダウンロード
            ani.Picture = await bkt.DownloadAsBytesAsync(itm.ImageId);
            animals.Add(ani);
        }
        Animals = animals.AsQueryable();
    }
}