IndexedDB is used for the client-side storage of data and files. Follow these steps to use IndexedDB in Blazor WebAssembly:
Create a Blazor WebAssembly app and install the Reshiru.Blazor.IndexedDB.Framework NuGet package using the NuGet package manager.
Set up the IIndexedDbFactory configuration service in your Program.cs file and set it as scoped.
[Program.cs]using Blazor.IndexedDB.Framework;
public class Program
{
public static async Task Main(string[] args)
{
builder.Services.AddScoped<IIndexedDbFactory, IndexedDbFactory>();
}
}Now add the properties inside the class to store and process data in the Data folder.
[IndexDb.cs]using Blazor.IndexedDB.Framework;
using Microsoft.JSInterop;
using System.ComponentModel.DataAnnotations;
namespace {{Your_App_Name}}.Data
{
public class IndexDb : IndexedDb
{
public IndexDb (IJSRuntime JSRuntime, string name, int version) : base(JSRuntime, name, version) { }
public IndexedSet<Employee> Employees { get; set; }
}
public class Employee
{
[Key]
public long Id { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
}
}Add the namespace for the IndexedDB in _Import.razor file.
[_Import.razor]@using Blazor.IndexedDB.Framework
@using {{Your_App_Name}}.DataAdd the Razor component to add and store the data using IndexedDB in the Index.razor file.
[Index.razor]@page "/"
@inject IIndexedDbFactory DbFactory
<h1>Employees</h1>
@if (employ != null)
{
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
@foreach (var employee in employ)
{
<tr>
<td>@employee.Id</td>
<td>@employee.FirstName</td>
<td>@employee.LastName</td>
<td><button @onclick="@(() => DeleteForm(employee))">Delete</button></td>
</tr>
}
</tbody>
</table>
}
<fieldset>
<legend>Add new person</legend>
<EditForm Model="@newEmployee" OnValidSubmit="@SaveForm">
<InputText placeholder="First name" @bind-Value="@newEmployee.FirstName" />
<InputText placeholder="Last name" @bind-Value="@newEmployee.LastName" />
<button type="submit">Add</button>
<p><ValidationSummary /></p>
<DataAnnotationsValidator />
</EditForm>
</fieldset>
@code {
Employee newEmployee = new Employee();
List<Employee> employ;
protected async Task OnInitializedAsync()
{
using var db = await DbFactory.Create<ExampleDb>();
employ = db.Employees.ToList();
}
async Task SaveForm()
{
// Add employee details.
}
async Task DeleteForm(Employee person)
{
// Delete the employee.
}
}
Refer to this blog for more details.
Share with