.NET8 Blazor交互式自动模板：客户端调用服务端Controller方法及引用配置

一、正确添加项目引用（共享模型用） #

如果客户端需要用到服务端的Models，按以下步骤操作：

• 右键Blazor客户端项目（myClientProject.Client）→ 「添加」→ 「项目引用」
• 在弹窗中找到服务端项目（myServerProject.Server），勾选后点击「确定」
• 若添加失败，先检查两个项目的目标框架是否均为.NET8，不行就右键解决方案→「清理解决方案」→「重建解决方案」后重试

二、服务端Controller示例 #

在服务端的Controllers文件夹中新建测试用Controller，比如WeatherForecastController.cs：

using Microsoft.AspNetCore.Mvc;
using myServerProject.Server.Models;

namespace myServerProject.Server.Controllers;

[ApiController]
[Route("api/[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToArray();
    }
}

对应的Models/WeatherForecast.cs：

namespace myServerProject.Server.Models;

public class WeatherForecast
{
    public DateOnly Date { get; set; }
    public int TemperatureC { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    public string? Summary { get; set; }
}

三、客户端配置与API调用实现 #

1. 注册HttpClient #

打开客户端项目的Program.cs，注册HttpClient：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// 注册HttpClient，指定服务端API基地址
builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

await builder.Build().RunAsync();

若服务端与客户端不在同一端口，直接将BaseAddress替换为服务端实际地址，比如new Uri("https://localhost:5001/")

2. 在组件中调用API #

以客户端Pages/FetchData.razor为例，注入HttpClient并调用接口：

@page "/fetchdata"
@inject HttpClient Http
@using myServerProject.Server.Models

<h3>Weather forecast</h3>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private IEnumerable<WeatherForecast>? forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<IEnumerable<WeatherForecast>>("api/weatherforecast");
        }
        catch (Exception ex)
        {
            // 可添加错误提示逻辑，比如弹窗显示
            Console.WriteLine($"API调用失败: {ex.Message}");
        }
    }
}

四、常见问题解决 #

• 引用添加失败：确认两个项目均为.NET8框架，清理并重建解决方案后重试
• API调用失败：先检查服务端是否启动、Controller路由是否正确；若跨域（客户端与服务端端口不同），需在服务端添加CORS配置：
  在服务端Program.cs中添加：

  var builder = WebApplication.CreateBuilder(args);
  
  // 添加CORS策略
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowBlazorClient",
          policy => policy.WithOrigins("https://localhost:5002") // 替换为你的客户端地址
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  
  // ...其他服务注册
  
  var app = builder.Build();
  
  // 启用CORS，需放在UseRouting之后、UseAuthorization之前
  app.UseCors("AllowBlazorClient");
  
  // ...其他中间件配置
  

内容的提问来源于stack exchange，提问作者Prefetcher Shatnawi