如何将数据库数据从 C# .NET Core 后端传递到 Typescript Angular 前端？

Question

我通过 Visual Studio 创建新项目功能创建了一个带有 Angular 前端的 ASP.NET 核心 Web 应用程序。我还创建了一个 SQL 服务器实例。

我能够通过 getData() 方法将我的 C# 代码中的数据从数据库中获取到数据类型中，并且我在 Angular 中创建了一个匹配的数据类型并创建了示例数据来填充它。我有 html 页来在图表中显示此示例数据。然而，我苦恼的是如何调用我的 C# 方法来获取我的数据库数据。

根据我的研究，我不能只从 js/Angular 调用我的 getData() C# 方法。我假设这个过程是 Angular typescript 代码向服务器发送一个 http 请求，服务器调用获取数据库数据的 C# 方法，然后服务器将它发送回 Angular。

我感到困惑的是 Angular 将代码发送到什么以及如何调用 C# getData() 方法，而不仅仅是“服务器”的一般概念？

感谢您的帮助和时间。

Answer 1

在像您这样的场景中，我使用 Web Api 后端策略。在您的后端，您需要一个控制器来处理您的前端 (angular) 发送和发回数据的请求。

namespace yourproject.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class backendController : ControllerBase
    {            
    [HttpGet]
        public ActionResult<IQueryable<yourType>> GetData()
        {
          List<yourType> data = your getdata-Method in the backend
          return new ActionResult<IQueryable<yourType>>(result.AsQueryable());
            
        }
    }
}

在 Angular 中，您现在可以“使用”此 Web API 端点来获取数据。在 ts-file:

的构造函数中添加 HttpClient

  constructor(private http: HttpClient)

并使用它的通用 get 方法获取您的数据：

 this.http.get<yourType[]>(url + '/GetData/')
    .subscribe(data => this.yourDataInAngular = data)

要获得网络，您还需要做一些其他事情 api 运行，但这对于这个答案来说已经够多了。这是它的微软教程： Create a web api with ASP.net core

如何将数据库数据从 C# .NET Core 后端传递到 Typescript Angular 前端？

How to pass database data from C# .NET Core backend to Typescript Angular frontend?

c#

angular

typescript

asp.net-core

conceptual