Blazor调用Controller获取List数据不渲染、列表计数始终为0问题求助

问题根因及解决方案 #

1. 控制器路由配置不匹配

你的TodoItemsController未添加Web API必备的特性标记，导致前端请求的api/TodoItems路径无法匹配到对应的GetItems方法，请求失败后未捕获异常，todos始终为初始化的空列表，所以页面计数为0、无内容渲染。你直接浏览器访问链接能返回数据，大概率是你测试时用的路径包含Action名、或者本地有其他路由规则适配，和Blazor前端的请求路径不一致。

解决方法：给控制器添加路由和ApiController特性：

[ApiController]
[Route("api/[controller]")]
public class TodoItemsController : ControllerBase
{
    // 保留原有代码不变
}

添加后[HttpGet]标记的GetItems方法的默认访问路径就是api/TodoItems，和前端请求地址完全匹配。

2. 异常捕获范围不全，无法感知请求错误

现有代码仅捕获了AccessTokenNotAvailableException，请求404、反序列化失败、网络错误等其他异常都没有处理，请求失败后你无法感知问题，页面直接用初始空列表渲染。
解决方法：补充异常捕获和空值判断：

protected override async Task OnInitializedAsync()
{
    try
    {
        var result = await http.GetFromJsonAsync<List<TodoItem>>("api/TodoItems");
        // 防止接口返回null覆盖列表
        if(result != null)
        {
            todos = result;
        }
    }
    catch (AccessTokenNotAvailableException exception)
    {
        exception.Redirect();
    }
    catch(Exception ex)
    {
        // 开发阶段可输出到控制台排查问题
        Console.WriteLine($"待办列表请求失败: {ex.Message}");
    }
}

3. 可选优化点

• 将页面中@todos.Count()改为@todos.Count，List<T>自带Count属性，无需调用LINQ扩展方法，性能更优。
• 确认控制器是否需要加[Authorize]特性：你的服务端已配置JWT认证，如果你要求接口必须登录才能访问，就给控制器添加[Authorize]特性，当前你直接浏览器能访问说明接口是匿名可访问的，注意根据业务需求调整。
• 确认AzureAD配置的scope是否正确：前端配置的api://api.id.uri/access_as_user需要和Azure后台注册的API暴露的scope一致，否则会出现获取token失败的问题。

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