如何在Blazor Server项目的Razor.cs文件中调用同方案Web API接口？

步骤1：配置HttpClient #

在Blazor Server项目的Program.cs中注册HttpClient服务，针对同解决方案的API，可通过配置指定基地址：

builder.Services.AddHttpClient("MediaApi", client =>
{
    // 可从配置文件读取API基地址，本地调试时可直接写API的启动地址
    client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"] ?? "https://localhost:5001/");
    client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
});

步骤2：修改Razor.cs文件 #

更新你的MediaBase类，注入HttpClient相关服务，将同步逻辑改为异步，并实现API调用：

using Core.Models;
using Microsoft.AspNetCore.Components;
using System.Net.Http.Json;

namespace AdminReview.Pages.Media
{
    public class MediaBase : ComponentBase
    {
        protected int PageSize = 10;
        protected int PageNumber = 1;
        protected int TotalPages = 0;
        protected IList<MediaModel> MediaList = new List<MediaModel>();
        [Inject] protected NavigationManager NavigationManager { get; set; }
        [Inject] protected IHttpClientFactory HttpClientFactory { get; set; }
        private HttpClient _httpClient;

        protected override async Task OnInitializedAsync()
        {
            _httpClient = HttpClientFactory.CreateClient("MediaApi");
            try
            {
                await LoadData(PageSize, PageNumber);
            }
            catch (Exception ex)
            {
                // 替换为实际的错误处理逻辑，比如记录日志或显示UI提示
                Console.WriteLine($"加载媒体数据失败: {ex.Message}");
            }
        }

        async Task LoadData(int pageSize, int pageNumber)
        {
            // 假设API接口地址为/api/media，接收分页参数
            var response = await _httpClient.GetFromJsonAsync<MediaPagedResult>($"api/media?pageSize={pageSize}&pageNumber={pageNumber}");
            if (response != null)
            {
                MediaList = response.Items.ToList();
                TotalPages = response.TotalPages;
                StateHasChanged(); // 通知Blazor更新UI
            }
        }

        public void AddMedia(int id)
        {
            NavigationManager.NavigateTo($"/mediadetails?id={id}");
        }
    }

    // 定义与API返回结构匹配的模型类
    public class MediaPagedResult
    {
        public IList<MediaModel> Items { get; set; }
        public int TotalPages { get; set; }
    }
}

关键说明 #

• 异步改造：HTTP调用必须用异步方法，因此将OnInitialized改为OnInitializedAsync，LoadData改为异步任务，避免阻塞UI线程。
• HttpClient管理：使用IHttpClientFactory创建HttpClient，能自动处理连接池、DNS刷新等问题，比直接注入单个HttpClient更稳定。
• 模型匹配：确保MediaPagedResult类的属性与Web API返回的JSON结构完全一致，否则反序列化会失败。
• UI更新：异步加载数据后，调用StateHasChanged通知Blazor重新渲染组件。

内容的提问来源于stack exchange，提问作者Owais Ashraf Mir