如何将 Blazor WebAssembly 连接到数据库

Question

我最近开始开发一个 Blazor WebAssembly 应用程序，现在我决定使用数据库连接。

所有课程和说明都说您需要将信息输入 Startup.cs 文件和 appsettings.json，但这些文件不在项目中。

我不明白。在 Blazor WebAssembly 中，是否无法连接到数据库？

Answer 1

不直接。 Blazor WebAssembly 是一个前端框架。您需要创建一个 API 控制器来包装您的数据库连接并使用 HttpClient 调用 api。一个直接的方法是使用 asp.net 核心网络 api 控制器包装 Entity Framework 核心数据库上下文。

@inject HttpClient Http
<template_html_here/>
    @code 
    {
         protected override async Task OnInitializedAsync()
        {
            products = await Http.GetFromJsonAsync<Product[]>("api/Products");
        }
    }

控制器：

 [ApiController]
 [Route("api/[controller]")]
 public class ProductsController : ControllerBase
    {
       
        private readonly ProductsDbContext _context; // your database context

        public ProductsController(ProductsDbContext context)
        {
            _context = context;
        }

        [HttpGet]
        public IEnumerable<Product> Get()
        {
           return _context.Products.ToList();
        }
    }

您可以在 https://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-3.1 阅读更多关于 blazor 的信息。在 asp.net 核心网站 API 上 https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio。

Answer 2

如果您指的是本地存储（浏览器存储），那么 this component by Chris Sainty 可以帮助您。

但是，如果您正在寻找与数据库（如 SQL 服务器或文档存储（如 Mongo）的连接，则无法直接完成。

Blazor Wasm 用于前端开发。您将需要调用连接到存储在服务器上的数据库的 Web API。

Answer 3

现在是 2022 年。.NET 6 已经发布，Blazor WebAssembly 支持已编译的二进制文件。

这意味着现在可以通过三个选项在 Blazor WebAssembly 应用程序中使用数据库。

#1。创建一个 webApi。正如您在默认示例中看到的那样，从客户端调用 webApi。参见 FetchData.razor

protected override async Task OnInitializedAsync()
{
    forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
}

服务器上的

和 WeatherForecastController.cs。默认解决方案不调用数据库，但您可以轻松地在 Get() 中使用 dbContext 从数据库中提取数据。

#2：由于支持在 Blazor WebAssembly 中编译二进制文件，现在可以在 WebAssembly 中完全托管 Sqlite。

https://github.com/TrevorDArcyEvans/BlazorSQLiteWasm

#3：IndexedDb。通过js interop，可以使用浏览器中的IndexDb。这个Db可以存储大量的数据，顾名思义，它是有索引的。由于这可能会被意外清除，因此它在 PWA 中最有用，而在 PWA 中这更困难。此外，有了这个和 Sqlite，在浏览器中所做的任何事情都是对用户和黑客开放的，这些黑客会危及用户的处理。

我用https://github.com/wtulloch/Blazor.IndexedDB

您在 program.cs 中添加架构：

builder.Services.AddIndexedDB(dbStore =>
{
    dbStore.DbName = "SomeDbName";
    dbStore.Version = 1;
    dbStore.Stores.Add(new StoreSchema
    {
        Name = "People",
        PrimaryKey = new IndexSpec { Name = "id", KeyPath = "id", Auto = false },
        Indexes = new List<IndexSpec>
        {
            new IndexSpec{Name="alias",  KeyPath = "alias", Auto=false},
            new IndexSpec{Name="isAvailable", KeyPath = "isAvailable", Auto=false},
            new IndexSpec{Name="communityId", KeyPath = "communityId", Auto=false},
            new IndexSpec{Name="isFriend", KeyPath = "isFriend", Auto=false},
        }
    });
});

在这段代码中，字段的名称是驼峰式的，而我正在构造的对象是 PascalCase。这实际上是我让它工作所必需的。我认为我的序列化程序可能设置为驼峰式 Json 或其他格式，所以请注意。

然后您使用以下方式添加删除和搜索：

public async Task AddPersonAsync(LocalPerson member)
{
    var newPerson = new StoreRecord<LocalPerson>
    {
        Data = member,
        Storename = PeopleStoreName
    };
    await _dbManager.AddRecord(newPerson);
}
public async Task<LocalPerson> GetPersonByIdAsync(Guid id)
{
    var localPerson = await _dbManager.GetRecordById<Guid, LocalPerson>(PeopleStoreName, id);
    return localPerson;
}
public async Task<List<LocalPerson>> GetPeopleAsync()
{
    var results = await _dbManager.GetRecords<LocalPerson>(PeopleStoreName);
    return results;
}

public async Task<List<LocalPerson>> GetPeopleByCommunityAsync(Guid id)
{
    var indexSearch = new StoreIndexQuery<Guid>
    {
        Storename = PeopleStoreName,
        IndexName = "communityId",
        QueryValue = id,
    };
    var result = await _dbManager.GetAllRecordsByIndex<Guid, LocalPerson>(indexSearch);

    if (result is null)
    {
        return new List<LocalPerson>();
    }

    return (List<LocalPerson>)result;
}

如何将 Blazor WebAssembly 连接到数据库

How to connect Blazor WebAssembly to DataBase

c#

database-connection

blazor-webassembly