四、添加HttpClient实现Blazor Server与Web Api之间的通信

Kevinxxxxx

已于 2024-08-06 14:31:32 修改

阅读量476

点赞数 5

分类专栏： C# ASP.NET Cool Blazor 文章标签：前端 vscode macos .netcore asp.net

于 2024-07-30 11:48:44 首次发布

本文链接：https://blog.csdn.net/Kevinxxxxx/article/details/140793003

版权

C# 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

ASP.NET

7 篇文章 0 订阅

订阅专栏

Cool Blazor

7 篇文章 0 订阅

订阅专栏

四、添加HttpClient实现Blazor Server与Web Api之间的通信

以下代码及配置均在Blazor Server应用项目中添加：

添加WebApi环境信息到appsetting.Development.json；

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "WebApi":{
    "Name":"TeachingWebApi",
    "Url":"http://localhost:",
    "Port":"5211"
  }
}

添加以下代码到Program.cs文件；

builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri(builder.Configuration["WebApi"] ?? "http://localhost:5211")
    });

添加一个HealthCheckManager，负责调用API的处理；

namespace TeachingBlazorApp.Infrastructure.Managers
{
    public class HealthCheckManager
    {
        private readonly HttpClient _httpClient;

        public HealthCheckManager(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }
        public async Task<string> GetDataAsync()
        {
            var response = await _httpClient.GetAsync("api/healthcheck");
            return response.Content.ToString();
        }
    }
}

添加HealthCheckManager的实例到_Imports.razor，以向razor页面提供实例；

@using TeachingBlazorApp.Infrastructure.Managers

@inject HealthCheckManager _healthCheckManager;

如果出现该错误：InvalidOperationException: Cannot provide a value for property ‘_healthCheckManager’ on type ‘TeachingBlazorApp.App’. There is no registered service of type ‘TeachingBlazorApp.Infrastructure.Managers.HealthCheckManager’.

则需要在Program.cs里加入以下代码：
```
// Register Services
builder.Services.AddScoped<HealthCheckManager>();
```

修改index.razor

@page "/"

<h1>@response</h1>

@code {
    private string response;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await GetAsync();
            StateHasChanged();
        }
    }
    private async Task GetAsync()
    {
        response = await _healthCheckManager.GetDataAsync();
    }
}