Blazor 的問題

Question

我正在創建一個 Blazor Web 應用程序，在這個應用程序內部我有一個 API、c# 類、接口、控制器等。當我運行該應用程序時，razor 頁面向我拋出一個與空值相關的錯誤。

        NullReferenceException: Object reference not set to an instance of an object.
    Infra.Web.Pages.Subscriptions.BuildRenderTree(RenderTreeBuilder __builder) in Subscriptions.razor, line 15
Infra.Web.Pages.Subscriptions.BuildRenderTree(RenderTreeBuilder __builder) in Subscriptions.razor
-
                <th scope="col">Subscription Id</th>
                <th scope="col">Subscription Name</th>
                <th scope="col">Options</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var sub in Subscriptions) { 
            <tr>
                <th scope="row">@sub.SubId</th>
                <td>@sub.SubscriptionId</td>
                <td>@sub.SubscriptionName</td>
                <td>
                    <a href="#" class="btn btn-primary m-1">Deploy</a>

此錯誤與每個“訂閱”有關：

<tbody>
        @foreach(var sub in Subscriptions) { 
        <tr>
            <th scope="row">@sub.SubId</th>
            <td>@sub.SubscriptionId</td>
            <td>@sub.SubscriptionName</td>
            <td>
                <a href="#" class="btn btn-primary m-1">Deploy</a>
                <a href="#" class="btn btn-danger m-1">Delete</a>                    
            </td>
        </tr>
        }
    </tbody>

我的 Razor 課程有以下代碼：

using Microsoft.AspNetCore.Components;
using Infra.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Infra.Web.Services;
    namespace Infra.Web.Pages
        {
            public class SubscriptionsBase : ComponentBase
            {
                [Inject]
                public ISubscriptionService SubscriptionService { get; set; }
                public IEnumerable<Subscription> Subscriptions { get; set; }
        
                protected  override async Task OnInitializedAsync()
                {
                    Subscriptions = (await SubscriptionService.GetSubscriptions()).ToList();
                }       
            }
        }

我定義了一個接口。

using Infra.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
    namespace Infra.Web.Services
    {
        public interface ISubscriptionService
        {
            Task<IEnumerable<Subscription>> GetSubscriptions();
            Task<Subscription> GetSubscription(int id);
        }
    }

還有另一堂課

using Infra.Models;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
    namespace Infra.Web.Services
    {
        public class SubscriptionService : ISubscriptionService
        {
            private readonly HttpClient httpClient;
    
            public SubscriptionService(HttpClient httpClient)
            {
                this.httpClient = httpClient;
            }
    
            public async Task<Subscription> GetSubscription(int id)
            {
                return await httpClient.GetJsonAsync<Subscription>($"api/subscriptions/{id}");
            }
    
            public async Task<IEnumerable<Subscription>> GetSubscriptions()
            {
               return await httpClient.GetJsonAsync<Subscription[]>("api/subscriptions");
    
            }
        }
    }

啟動文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Infra.Web.Services;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;


namespace Infra.Web
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddHttpClient<ISubscriptionService, SubscriptionService>(client =>
            {
                client.BaseAddress = new Uri("https://localhost:44322/");
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}

API 似乎正在工作，因為我可以執行所有方法，GET、PUT、POST、DELETE，但是當我運行應用程序時，我收到了上面提到的錯誤。

瀏覽器 API 響應。

我已經查看了代碼，但是我遺漏了一些東西，我沒有報告任何錯誤或警告。 感謝所有幫助。

Answer 1

我能夠解決這個問題，這是一個小小的修復，但重要的細節。 基本上，剃刀頁面期望在運行時具有值，並且由於異步方法，當我啟動應用程序時它們不存在。

解決方案是在剃刀頁面添加一個條件：

@if (Subscriptions == null)
{
    <div class="spinner"></div>
}

基本上顯示加載微調器，直到將值添加到“訂閱參數”。

完整的代碼將是：

@page "/"
@inherits SubscriptionsBase
<h3>Subscriptions</h3>
@if (Subscriptions == null)
{
    <div class="spinner"></div>
}
else
{ 

    <div class="table">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Subscription Id</th>
                    <th scope="col">Subscription Name</th>
                    <th scope="col">Options</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var sub in Subscriptions)
                {
                    <tr>
                        <th scope="row">@sub.SubId</th>
                        <td>@sub.SubscriptionId</td>
                        <td>@sub.SubscriptionName</td>
                        <td>
                            <a href="#" class="btn btn-primary m-1">Deploy</a>
                            <a href="#" class="btn btn-danger m-1">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}

謝謝大家的幫助。