Blazor项目中从URL获取数据后变量未赋值问题求助

我遇到这个问题已经有一段时间了，于是创建了一个新的Blazor项目来复现错误，以下是项目中的相关文件，核心问题是页面中的@TestSuitesResult.count始终为null并抛出空引用错误。

index.razor 文件代码 #

@using BlazorApp1.Models.TestSuiteModel; 
@inject BlazorApp1.Services.TestSuiteService TestSuiteServ; 
@page "/"

<b> 
    @TestSuitesResult.count; 
</b>

@code {
    protected override async Task OnInitializedAsync()
    {
        this.GetTestSuites(); 
    }

    TestSuiteModel TestSuitesResult;
    protected async Task GetTestSuites()
    {
        TestSuiteServ.url = "https://dev.azure.com/****/_apis/test/Plans/12/suites?api-version=5.0";
        TestSuiteServ.PersonalAccessToken = "****";
        TestSuitesResult = await TestSuiteServ.GetTestSuites();
        await base.OnInitializedAsync();
    }
}

TestSuiteModel 模型代码 #

namespace BlazorApp1.Models.TestSuiteModel
{
    public class TestSuiteModel
    {
        public List<Value> value { get; set; }
        public int count { get; set; }
    }
 // .. 其他模型类
}

TestSuiteService 服务代码 #

using BlazorApp1.Models.TestSuiteModel;
using Newtonsoft.Json;
using System.Net.Http.Headers;

namespace BlazorApp1.Services
{
    public class TestSuiteService
    {
        public string url { get; set; }
        public string PersonalAccessToken { get; set; }
        TestSuiteModel result;

        public async Task<TestSuiteModel> GetTestSuites()
        {
            using (HttpClient client = new HttpClient())
            {
                // 接受JSON格式响应
                client.DefaultRequestHeaders.Accept.Add(
                    new MediaTypeWithQualityHeaderValue("application/json")
                );

                // 将DevOps令牌添加到HTTP请求头
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(
                    "Basic", Convert.ToBase64String(
                        System.Text.Encoding.ASCII.GetBytes(
                            string.Format("{0}:{1}", "", PersonalAccessToken)
                        )
                    )
                );

                HttpResponseMessage response = await client.GetAsync(url);
                response.EnsureSuccessStatusCode();
                string responseData = await response.Content.ReadAsStringAsync();
                return JsonConvert.DeserializeObject<TestSuiteModel>(responseData);
            }
        }
    }
}

Program.cs 服务注册配置 #

// 注册服务到容器
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddSingleton<TestSuiteService>(); <!-- 我的自定义服务 -->

var app = builder.Build();

问题解决思路 #

1. 修复页面渲染时的空引用问题 #

页面初始化时TestSuitesResult还未完成异步加载，直接访问count会触发空引用错误。可以添加空值检查：

<b> 
    @(TestSuitesResult?.count ?? 0)
</b>

2. 修正异步方法调用逻辑 #

OnInitializedAsync中调用GetTestSuites()时没有使用await，导致页面在数据返回前就完成渲染。修改为：

protected override async Task OnInitializedAsync()
{
    await this.GetTestSuites(); 
}

3. 确保JSON序列化字段匹配 #

Azure DevOps API返回的JSON字段可能存在大小写差异，建议显式指定JsonProperty特性确保匹配：

public class TestSuiteModel
{
    public List<Value> value { get; set; }
    [JsonProperty("count")]
    public int count { get; set; }
}

同时可以在GetTestSuites方法中输出responseData，查看API实际返回的JSON结构是否与模型一致。

4. 调整服务生命周期 #

当前TestSuiteService注册为单例，但服务中包含url和PersonalAccessToken这类实例属性，多场景调用时容易出现数据冲突。建议改为瞬态或作用域服务：

builder.Services.AddTransient<TestSuiteService>();
// 或者
builder.Services.AddScoped<TestSuiteService>();

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