Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amuste/DnetIndexedDb
Blazor Library for IndexedDB DOM API
https://github.com/amuste/DnetIndexedDb
Last synced: 3 months ago
JSON representation
Blazor Library for IndexedDB DOM API
- Host: GitHub
- URL: https://github.com/amuste/DnetIndexedDb
- Owner: amuste
- License: mit
- Created: 2020-04-07T12:39:15.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-16T00:49:59.000Z (almost 2 years ago)
- Last Synced: 2024-03-27T20:07:48.985Z (3 months ago)
- Language: JavaScript
- Size: 2.9 MB
- Stars: 99
- Watchers: 11
- Forks: 27
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-blazor - DnetIndexedDb -  Blazor Library for IndexedDB DOM API. (Libraries & Extensions / Tools & Utilities)
- awesome-blazor - DnetIndexedDb -  Blazor Library for IndexedDB DOM API. (Libraries & Extensions / Tools & Utilities)
- blazor-awesome - DnetIndexedDb -  Blazor Library for IndexedDB DOM API. (Libraries & Extensions / Tools & Utilities)
README
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:
```Html
```
3. Create a derived class from ```IndexedDbInterop```.
a. This is the class you will use to interact with IndexedDb JavaScript for this database
```CSharp
public class GridColumnDataIndexedDb : IndexedDbInterop
{
public GridColumnDataIndexedDb(IJSRuntime jsRuntime, IndexedDbOptions options)
:base(jsRuntime, options)
{
}
}
```
5. Create a new instance of ```IndexedDbDatabaseModel```.
Configure this using one of the options in the next section.
4. Register your derived class in ```ConfiguredServices``` in ```Startup.cs```.
When registering, use options to add the `IndexedDbDatabaseModel` instance.
```CSharp
services.AddIndexedDbDatabase(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```
```CSharp
public class IndexedDbDatabaseModel
{
public string Name { get; set; }
public int Version { get; set; }
public List Stores { get; set; } = new List();
public int DbModelId { get; set; }
}
```
##### Manual Configuration
```CSharp
var indexedDbDatabaseModel = new IndexedDbDatabaseModel
{
Name = "GridColumnData",
Version = 1,
Stores = new List
{
new IndexedDbStore
{
Name = "tableField",
Key = new IndexedDbStoreParameter
{
KeyPath = "tableFieldId",
AutoIncrement = true
},
Indexes = new List
{
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.
```CSharp
using DnetIndexedDb.Fluent;
...
services.AddIndexedDbDatabase(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.
```CSharp
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();
```
#### 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.
```CSharp
public class GridColumnDataIndexedDb : IndexedDbInterop
{
public GridColumnDataIndexedDb(IJSRuntime jsRuntime, IndexedDbOptions 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.
```CSharp
services.AddIndexedDbDatabase(options =>
{
options.UseDatabase(GetGridColumnDatabaseModel());
});
```
```GetGridColumnDatabaseModel()``` return an instance of ```IndexedDbDatabaseModel```
You can also use multiple database, declaring as many service as you want.
```CSharp
services.AddIndexedDbDatabase(options =>
{
options.UseDatabase(GetSecurityDatabaseModel());
});
```
## Using the service in your application
To use IndexedDB service in a component or page first inject the IndexedDB servicer instance.
```CSharp
@inject GridColumnDataIndexedDb GridColumnDataIndexedDb
```
IndexedDB store are the equivalent of table in SQL Database. For the API demostrations will use the following class as our store model.
```CSharp
public class TableFieldDto
{
public int TableFieldId { get; set; }
public string TableName { get; set; }
public string FieldVisualName { get; set; }
public string AttachedProperty { get; set; }
public bool IsLink { get; set; }
public int MemberOf { get; set; }
public int Width { get; set; }
public string TextAlignClass { get; set; }
public bool Hide { get; set; }
public string Type { get; set; }
}
```
## API examples
The following examples have two overloads of each DataStore level function.
The first is used when you need to manually specify the DataStore name and the store name does not match the Class Name.
The second is used when the Class name and DataStore name match, such as when using the Class Attribute based configuration.
### Open and upgrade an instance of IndexedDB
```ValueTask OpenIndexedDb()```
```CSharp
var result = await GridColumnDataIndexedDb.OpenIndexedDb();
```
### Add an items to a given store
```ValueTask AddItems(string objectStoreName, List items)```
```ValueTask AddItems(List items)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.AddItems("tableField", items);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.AddItems(items);
```
### Retrieve an item by key
```ValueTask GetByKey(string objectStoreName, TKey key)```
```ValueTask GetByKey(TKey key)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetByKey("tableField", 11);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetByKey(11);
```
### Delete an item from a store by key
```ValueTask DeleteByKey(string objectStoreName, TKey key)```
```ValueTask DeleteByKey(TKey key)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.DeleteByKey("tableField", 11);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.DeleteByKey(11);
```
### Retrieve all items from a given store
```ValueTask> GetAll(string objectStoreName)```
```ValueTask> GetAll()```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetAll("tableField");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetAll();
```
### Retrieve a range of items by key
```ValueTask> GetRange(string objectStoreName, TKey lowerBound, TKey upperBound)```
```ValueTask> GetRange(TKey lowerBound, TKey upperBound)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetRange("tableField", 15, 20);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetRange(15, 20);
```
### Retrieve a range of items by index
```ValueTask> GetByIndex(string objectStoreName, TKey lowerBound, TKey upperBound, string dbIndex, bool isRange)```
```ValueTask> GetByIndex(TKey lowerBound, TKey upperBound, string dbIndex, bool isRange)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetByIndex("tableField", "Name", null, "fieldVisualName", false);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetByIndex("Name", null, "fieldVisualName", false);
```
### Retrieve Max Key
```ValueTask GetMaxKey(string objectStoreName)```
```ValueTask GetMaxKey()```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetMaxKey("tableField");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetMaxKey();
```
### Retrieve Minimum Key
```ValueTask GetMinKey(string objectStoreName)```
```ValueTask GetMinKey()```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetMinKey("tableField");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetMinKey();
```
### Retrieve Max value by index
```ValueTask GetMaxIndex(string objectStoreName, string dbIndex)```
```ValueTask GetMaxIndex(string dbIndex)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetMaxIndex("tableField", "fieldVisualName");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetMaxIndex("fieldVisualName");
```
### Retrieve Minimum value by index
```ValueTask GetMinIndex(string objectStoreName, string dbIndex)```
```ValueTask GetMinIndex(string dbIndex)```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.GetMinIndex("tableField", "fieldVisualName");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.GetMinIndex("fieldVisualName");
```
### Update items in a given store
```ValueTask UpdateItems(string objectStoreName, List items)```
```ValueTask UpdateItems(List items)```
```CSharp
foreach (var item in items)
{
item.FieldVisualName = item.FieldVisualName + "Updated";
}
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.UpdateItems("tableField", items);
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.UpdateItems(items);
```
### Delete all items from a store
```ValueTask DeleteAll(string objectStoreName)```
```ValueTask DeleteAll()```
```CSharp
// Manually set DataStore name
var result = await GridColumnDataIndexedDb.DeleteAll("tableField");
OR
// DataStore name inferred from class
var result = await GridColumnDataIndexedDb.DeleteAll();
```
### Delete an instance of IndexedDB
```ValueTask DeleteIndexedDb()```
```CSharp
var result = await GridColumnDataIndexedDb.DeleteIndexedDb();
```