BlazorでLiteDBのレコードを表示する方法

この記事では、BlazorでLiteDBのレコードを表示する方法を紹介したいと思います。

LiteDBはC#で書かれたポータルNoSQLデータベースです。すべての.NETプラットフォームで使えますので、Blazorでも簡単に扱うことができます。

ゴール

以下のように、BlazorページでLiteDBのレコードを表示する機能を実装します。

データ定義とサンプルデータ

テーブル名をTaskInfoとします。

以下のようなデータクラスを定義します。

    /// <summary>
    /// タスク情報データ
    /// </summary>
    public class Data
    {
        /// <summary>
        /// NoSQL Unique ID (Auto Increase, Can be set null)
        /// </summary>
        public int id { get; set; }

        public string taskID { get; set; }
        public string taskTItle { get; set; }
        public string taskDescription { get; set; }
        public DateTime taskCreationDate { get; set; }
        public string taskCreationUserID { get; set; }
        public DateTime taskUpdateDate { get; set; }
        public string taskUpdateUserID { get; set; }
    }

テストデータとして、以下のデータを格納しました。

LiteDBの基本的な使い方とデータのインサート方法は以下の記事を参照ください。

.NET系言語でポータブルNoSQLデータベースを使うにはLiteDBがおすすめ

全レコードを取得するコード GetAllRecord()

以下のコードで全レコードを取得します。

返り値は、先ほどのデータクラスのリスト型オブジェクトとします。

    /// <summary>
    /// 全レコード取得
    /// </summary>
    /// <returns></returns>
    public static List<TaskInfo.Data> GetAllRecord()
    {
        using(LiteDatabase litedb = new LiteDatabase(liteDBPath))
        {
            var col = litedb.GetCollection<TaskInfo.Data>(taskInfoTableName);
            var result = col.Query()
                .ToList();

            return result;
        }
    }

以下のコードでLiteDBに接続します。 liteDBPathには、LiteDBファイルのフルパスが格納されているものとします。

using(LiteDatabase litedb = new LiteDatabase(liteDBPath))

以下のコードでコレクションオブジェクトを取得します。

var col = litedb.GetCollection<TaskInfo.Data>(TaskInfo);

以下のコードで全レコードを取得し、リスト型に変換します。

var result = col.Query()
    .ToList();

リスト型オブジェクトを返却します。

return result;

razorページ

razorページは以下のように記載します。

<table class="table">
    <thead>
        <tr>
            <td>タスクID</td>
            <td>タスクタイトル</td>
            <td>タスク説明</td>
            <td>タスク作成日</td>
            <td>タスク作成者</td>
            <td>タスク更新日</td>
            <td>タスク更新者</td>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in taskInfoDataList)
        {
            <tr>
                <td>@item.taskID</td>
                <td>@item.taskTItle</td>
                <td>@item.taskDescription</td>
                <td>@item.taskCreationDate.ToString()</td>
                <td>@item.taskCreationUserID</td>
                <td>@item.taskUpdateDate.ToString()</td>
                <td>@item.taskUpdateUserID</td>
                <!--
                <td><button @onclick=@(e => EditTaskData(@item.taskID))>Edit</button></td>
                -->
            </tr>
        }

    </tbody>
</table>

<button @onclick="DisplayTask">Display Task</button>

tbodyタグの中で、razor構文の@foreachを用いてループします。

@codeの中は以下のようにコーディングします。

@code {

    /// <summary>
    /// タスク情報リスト
    /// </summary>
    private List<TaskInfo.Data> taskInfoDataList = new List<TaskInfo.Data>();

    /// <summary>
    /// タスク情報表示
    /// </summary>
    private void DisplayTask()
    {
        taskInfoDataList = new List<TaskInfo.Data>();
        taskInfoDataList = GetAllRecord();

    }
}

foreachで出てきたtaskInfoDataListは、リスト型のオブジェクトです。

DisplayTask関数で、さきほどのGetAllRecord関数を呼び出し、taskInfoDataListにセットします。

これにより、razorページのforeachが処理され、データが表示されます。

動作確認

Blazorを実行してページを開き、Display Taskボタンをクリックすると、NoSQLデータベースの内容が表示されます。

Blazor のおすすめ本

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。