[英]How to use Blazor Serverside with Blazor WebAssembly?
[英]How to connect Blazor WebAssembly to DataBase
我最近開始開發 Blazor WebAssembly 應用程序,現在我正在解決數據庫連接問題。
所有課程和說明都說您需要在 Startup.cs 文件和 appsettings.json 中輸入信息,但這些文件不在項目中。
我不明白。 在 Blazor WebAssembly 中,有沒有辦法連接到數據庫?
不直接。 Blazor WebAssembly 是一個前端框架。 您需要創建一個 API 控制器來包裝您的數據庫連接並使用 HttpClient 來調用 api。 一個直接的方法是使用包裝實體框架核心數據庫上下文的 asp.net 核心 web api 控制器。
@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 的更多信息。 在https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio上的 asp.net 核心 Web API 上。
如果您指的是本地存儲(瀏覽器存儲),那么Chris Sainty 的這個組件可以幫助您。
但是,如果您正在尋找與 SQL Server 等數據庫或 Mongo 等文檔存儲的連接,則無法直接完成。
Blazor Wasm 用於前端開發。 您將需要調用連接到存儲在服務器上的數據庫的 Web API。
現在是 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:索引數據庫。 通過js互操作,可以使用瀏覽器中的IndexDb。 大量的數據可以存儲在這個 Db 中,並且顧名思義,它是被索引的。 由於這可能會被意外清除,因此它在 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。 這實際上是我讓它工作所必需的。 我認為我的序列化程序可能設置為 camelCase 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.