\

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

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

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

ゴール

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// <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()

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/// <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ファイルのフルパスが格納されているものとします。

1
using(LiteDatabase litedb = new LiteDatabase(liteDBPath))

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

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

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

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

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

1
return result;

razorページ

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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の中は以下のようにコーディングします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@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データベースの内容が表示されます。

About Me

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