Blazor WASM添加控制器做数据库统计出现空引用和解析错误如何解决

问题原因 #

两个报错的根因分别是：

• 前端页面初始化时接口请求未完成，result为null就直接访问属性触发空引用异常
• 后端接口返回值类型和前端预期的Stats类型不匹配，同时请求地址、控制器配置存在多处错误，导致反序列化失败

解决步骤 #

1. 修正服务端控制器代码 #

首先控制器要加上[ApiController]特性，继承ControllerBase（API控制器不需要继承带视图支持的Controller），同时修改返回值为Stats类型，不用手动序列化，ASP.NET Core会自动处理JSON序列化：

using System.Linq;
using Microsoft.AspNetCore.Mvc;
using WebApp3.Server.Data;
using WebApp3.Pages; // 引用Stats类所在的命名空间，建议把Stats放到Shared项目方便前后端共用

namespace WebApp3.Server.Controllers
{
    [ApiController] // 新增API控制器特性
    [Route("api/[controller]/[action]")]
    public class ServerMethodsController : ControllerBase // 改继承ControllerBase
    {
         private readonly ApplicationDBContext context;
         
         public ServerMethodsController(ApplicationDBContext context)
        {
            this.context = context;
        }
    
        public IActionResult MonthlyStats()
        {                      
           var NombreECR = context.Developers.Count();
           // 直接返回Stats对象，不要手动序列化单个int
           return Ok(new Stats {
               NombreECR = NombreECR,
               ratio = 0 // 按业务需求赋值即可
           });
        }
    }
}

同时检查服务端Program.cs，确保开启了控制器支持：

// 服务注册部分添加
builder.Services.AddControllers();

// 中间件配置部分添加，注意要放在app.MapFallbackToFile("index.html");之前
app.MapControllers();

2. 修正前端请求代码 #

控制器类名的Controller后缀会被ASP.NET Core路由自动省略，所以正确的接口地址是api/ServerMethods/MonthlyStats，建议直接用相对地址，不需要手动拼接BaseUri：

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Radzen;

namespace WebApp3.Pages
{
    public partial class IndicateurComponent
    {
         [Inject]
         HttpClient Http { get; set; }

         public async Task<Stats> MonthlyStats()
         {
            // 直接用相对地址即可，HttpClient默认BaseUri已经指向服务端
            var response = await Http.SendAsync(new HttpRequestMessage(HttpMethod.Get, "api/ServerMethods/MonthlyStats"));
            return await response.ReadAsync<Stats>();
         }
    }

    public class Stats
    {
        public int NombreECR { get; set; }
        public int ratio { get; set; }
    }
}

3. 修复空引用异常 #

修改Indicateur.razor页面，二选一即可：

方案1：初始化时给默认值

@code {
     private Stats result = new Stats(); // 初始化默认对象避免空引用
    
     protected override async Task OnInitializedAsync()
     {
      result = await MonthlyStats();
     }
}

方案2：渲染时做空判断加加载提示

<RadzenImage Path="images/bateau.png" Style="width:20px" />
<h3>@(result?.NombreECR.ToString() ?? "加载中...")</h3>
<hr />

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