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データベースの内容が表示されます。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱