Blazor 问题
Issue with Blazor
我正在创建一个 Blazor 网络应用程序,在这个应用程序内部我有一个 API、c# classes、接口、控制器等。当我 运行 应用程序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>
我的剃须刀 class 有这个代码:
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);
}
}
还有一个class
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");
}
}
}
Startup.cs
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响应。
我已经检查了代码,但我遗漏了一些东西,我没有报告任何错误或警告。
感谢所有帮助。
我能够解决这个问题,这是一个小问题,但很重要的细节。
基本上,razor 页面期望在运行时具有值,但由于异步方法,当我启动应用程序时它们不存在。
解决方案是在剃须刀页面添加条件:
@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>
}
谢谢大家的帮助。
我正在创建一个 Blazor 网络应用程序,在这个应用程序内部我有一个 API、c# classes、接口、控制器等。当我 运行 应用程序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>
我的剃须刀 class 有这个代码:
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);
}
}
还有一个class
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");
}
}
}
Startup.cs
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响应。
我已经检查了代码,但我遗漏了一些东西,我没有报告任何错误或警告。 感谢所有帮助。
我能够解决这个问题,这是一个小问题,但很重要的细节。 基本上,razor 页面期望在运行时具有值,但由于异步方法,当我启动应用程序时它们不存在。
解决方案是在剃须刀页面添加条件:
@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>
}
谢谢大家的帮助。