master - .Net5 version

master_net31 - 3.x version

DnetIndexedDb

This is a Blazor library to work with IndexedDB DOM API. It allows query multiple IndexedDb databases simultaneously

The actual API expose the following methods:

• Open and upgrade an instance of IndexedDB
• Close an instance of IndexedDB
• Delete an instance of IndexedDB
• Add an item to a given store
• Update an item in a given store
• Delete an item from a store by key
• Delete all items from a store
• Retrieve all items from a given store
• Retrieve an items by index
• Retrieve a range of items by key
• Retrieve a range of items by index
• Retrieve max key value
• Retrieve max index value
• Retrieve minimum key value
• Retrieve minimum index value

Compatibility *Server-side Blazor and client-side Blazor

Using the library

Installation

1. Install the Nuget package DnetIndexedDb
2. Add the following script reference to your Index.html after the blazor.webassembly.js or blazor.server.js reference:

<script src="_content/DnetIndexedDb/rxjs.min.js"></script>
<script src="_content/DnetIndexedDb/dnet-indexeddb.js"></script>

3. Create a derived class from IndexedDbInterop.
   a. This is the class you will use to interact with IndexedDb JavaScript for this database

  public class GridColumnDataIndexedDb : IndexedDbInterop
  {
    public GridColumnDataIndexedDb(IJSRuntime jsRuntime, IndexedDbOptions<GridColumnDataIndexedDb> options) 
    :base(jsRuntime, options)
    {
    }
  }

5. Create a new instance of IndexedDbDatabaseModel.
   Configure this using one of the options in the next section.
6. Register your derived class in ConfiguredServices in Startup.cs.
   When registering, use options to add the IndexedDbDatabaseModel instance.

  services.AddIndexedDbDatabase<GridColumnDataIndexedDb>(options =>
  {
    options.UseDatabase(GetGridColumnDatabaseModel());
  });

6. Inject the created instance of your derived class into the component or page.

Detailed configuration and use

Step 1 - Create the database model

To configure the database model, use the following classes. You can find more info about the IndexedDB database here: https://www.w3.org/TR/IndexedDB-2/#database-construct

IndexedDbDatabaseModel IndexedDbStore IndexedDbIndex IndexedDbStoreParameter

    public class IndexedDbDatabaseModel
    {      
        public string Name { get; set; }     
        public int Version { get; set; }      
        public List<IndexedDbStore> Stores { get; set; } = new List<IndexedDbStore>();
        public int DbModelId { get; set; }
    }

Manual Configuration

 var indexedDbDatabaseModel = new IndexedDbDatabaseModel
            {
                Name = "GridColumnData",
                Version = 1,
                Stores = new List<IndexedDbStore>
                {
                new IndexedDbStore
                {
                    Name = "tableField",
                    Key = new IndexedDbStoreParameter
                    {
                        KeyPath = "tableFieldId",
                        AutoIncrement = true
                    },
                    Indexes = new List<IndexedDbIndex>
                    {
                        new IndexedDbIndex
                        {
                            Name = "tableFieldId",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = true
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "attachedProperty",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "fieldVisualName",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        }, new IndexedDbIndex
                        {
                            Name = "hide",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "isLink",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "memberOf",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "tableName",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "textAlignClass",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "type",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        },
                        new IndexedDbIndex
                        {
                            Name = "width",
                            Definition = new IndexedDbIndexParameter
                            {
                                Unique = false
                            }
                        }
                    }
                }
            },
                DbModelId = 0
            };

Fluent Manual Configuration

Fluent-based Extension methods to make the configuration of the database simplier. It will create the same model as manual configuration but in a more concise syntax.

using DnetIndexedDb.Fluent;
...
    services.AddIndexedDbDatabase<SecuritySuiteDataIndexedDb>(options =>
    {
        var model = new IndexedDbDatabaseModel()
            .WithName("Security")
            .WithVersion(1)
            .WithModelId(0);

        model.AddStore("tableFieldDtos")
            .WithAutoIncrementingKey("tableFieldId")
            .AddUniqueIndex("tableFieldId")
            .AddIndex("attachedProperty")
            .AddIndex("fieldVisualName")
            .AddIndex("hide")
            .AddIndex("isLink")
            .AddIndex("memberOf")
            .AddIndex("tableName")
            .AddIndex("textAlignClass")
            .AddIndex("type")
            .AddIndex("width");

        options.UseDatabase(model);
    });

Configure From Class Attributes by @Kylar182

[IndexDbKey] and [IndexDbIndex] Property Attributes can be used to configure the database based on the given class.
A DataStore will be created matching the name of the class.

    public class TableFieldDto
    {
        [IndexDbKey(AutoIncrement = true)]
        public int? TableFieldId { get; set; }
        [IndexDbIndex]
        public string TableName { get; set; }
        [IndexDbIndex]
        public string FieldVisualName { get; set; }
        [IndexDbIndex]
        public string AttachedProperty { get; set; }
        [IndexDbIndex]
        public bool IsLink { get; set; }
        [IndexDbIndex]
        public int MemberOf { get; set; }
        [IndexDbIndex]
        public int Width { get; set; }
        [IndexDbIndex]
        public string TextAlignClass { get; set; }
        [IndexDbIndex]
        public bool Hide { get; set; }
        [IndexDbIndex]
        public string Type { get; set; }
    }

...

    var indexedDbDatabaseModel = new IndexedDbDatabaseModel()
        .WithName("TestAttributes")
        .WithVersion(1);

    indexedDbDatabaseModel.AddStore<TableFieldDto>();

Step 2 - Creating a service

You can create a service for any indexedDB's database that you want to use in your application. Use the base class IndexedDbInterop to create your derived class. See code below.

  public class GridColumnDataIndexedDb : IndexedDbInterop
  {
    public GridColumnDataIndexedDb(IJSRuntime jsRuntime, IndexedDbOptions<GridColumnDataIndexedDb> options) 
    :base(jsRuntime, options)
    {
    }
  }

This follows a similar pattern to what you do when you create a new DbContext in EF core.

Step 3 - Registering a service

You can use the AddIndexedDbDatabase extension method to register your service in ConfiguredServices on Startup.cs. Use the options builder to add the service Database. See code below.

  services.AddIndexedDbDatabase<GridColumnDataIndexedDb>(options =>
  {
    options.UseDatabase(GetGridColumnDatabaseModel());
  });

GetGridColumnDatabaseModel() return an instance of IndexedDbDatabaseModel

You can also use multiple database, declaring as many service as you want.

   services.AddIndexedDbDatabase<SecuritySuiteDataIndexedDb>(options =>
   {
     options.UseDatabase(GetSecurityDatabaseModel());
   });

Using the service in your app