如何将 Blazor WebAssembly 连接到数据库

Posted 2023-02-15

【中文标题】如何将 Blazor WebAssembly 连接到数据库

【英文标题】：How to connect Blazor WebAssembly to DataBase

【发布时间】：2021-01-07 18:51:47

【问题描述】：

我最近开始开发 Blazor WebAssembly 应用程序，现在我正在着手建立数据库连接。

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

我不明白。在 Blazor WebAssembly 中，有没有办法连接到数据库？

【问题讨论】：

当您说数据库时，您是指浏览器中的数据库（本地存储）还是SQL / Mongo等数据库？使用 blazor 时，您只能在本地存储内容，就像在浏览器存储中一样，就像使用 java 脚本一样。它对操作系统的访问权不比 java 脚本更多。

托管或本地服务器上的 mysql 数据库。我认为现在没有区别，因为我不明白如何连接到本地服务器或主机。

【参考方案1】：

不直接。 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 上。

【讨论】：

非常感谢！没想到这么快就有答案！

是否需要为 API 控制器创建单独的解决方案，还是可以在 Blazor WASM 解决方案中创建？

【参考方案2】：

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

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

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

【讨论】：

非常感谢！没想到这么快就有答案！

没问题，@codinbear107 的回答是一个很好的起点。