この記事では、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 は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。
電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。
章 | 内容 |
---|---|
第1章 | Blazorの仕組み |
第2章 | 開発環境 |
第3章 | 最初のBlazorアプリ |
第4章 | コンポーネント |
第5章 | データバインディング |
第6章 | イベント処理 |
第7章 | Razor記法 |
第8章 | フォームと検証 |
第9章 | データベースアクセス |
第10章 | Web APIの活用 |
第11章 | SVGの活用 |
第12章 | JavaScriptとの連携 |
コメント