我正在try 开始在我的新项目中使用.NET8Blazor服务器/客户端.
我有一个来自Sync Fusion的模板，并且我已经添加了ASP.NET标识功能.
我正在try 创建一个返回我的服务器日志(log)的Blazor服务器页面.
我登录，然后转到页面，我希望看到加载...当数据加载时.
好的，它似乎显示了装载...在从我的数据库返回之后，然后再次激发数据库调用，最后显示包含数据的网格.
我做错了什么？
我删除了数据库调用，然后执行了Task.Delay(1000)，它也做了同样的事情.
我认为整个要点是，它可以显示加载，直到从数据库中设置了我的对象列表，然后将显示网格？
Seri-Log.Razor page:个
@page "/maintenance/seri-log-server"
@using Microsoft.AspNetCore.Authorization
@using App.Client.Services
@using System.Net.Http.Headers
@using App.Shared.DTOs.SeriLog
@using App.Shared.Interfaces
@using Syncfusion.Blazor.Buttons
@using System.Text.Json
@using Syncfusion.Blazor.Grids
@using System.Net.Http.Json
@inject ILogger<SeriLogsServer> _logger;
@inject IMaintenanceStore maintenanceStore;
@attribute [Authorize]
<PageTitle>Seri Log Maintenance Server</PageTitle>
<h3>Start Local: @CurrenTimeLocalStart</h3>
<hr />
@if (Error != null)
{
<div class="c-error">
<h3>Error</h3>
<h5>@Error</h5>
</div>
}
@if (SeriLogs == null)
{
<span>
Loading Seri Logs......
</span>
}
else
{
<hr />
<h3>End Local: @CurrenTimeLocalEnd</h3>
<SfGrid ID="Grid" DataSource="@SeriLogs" @ref="Grid" AllowPaging="true" AllowFiltering="true" AllowReordering="true" AllowResizing="true" AllowGrouping="true" AllowExcelExport="true" AllowSelection="false">
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>
<GridPageSettings PageSizes="true"></GridPageSettings>
<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
<GridColumns>
<GridColumn Field=@nameof(SeriLogDTO.Id) HeaderText="ID" IsPrimaryKey="true" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.TimeStamp) HeaderText="TimeStamp" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.Message) HeaderText="Message" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="500"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.Exception) HeaderText="Exception" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="200"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.MessageTemplate) HeaderText="MessageTemplate" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="300"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.Level) HeaderText="Level" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="200"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.Properties) HeaderText="Properties" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="200"></GridColumn>
<GridColumn Field=@nameof(SeriLogDTO.LogEvent) HeaderText="LogEvent" IsPrimaryKey="false" TextAlign="TextAlign.Center" Width="200"></GridColumn>
</GridColumns>
</SfGrid>
}
<style>
.c-error {
padding: 5px;
background: #fff0f4;
color: #c51244;
}
</style>
@code {
SfGrid<SeriLogDTO>? Grid;
private DateTime CurrenTimeLocalStart { get; set; }
private DateTime CurrenTimeLocalEnd { get; set; }
public IList<SeriLogDTO>? SeriLogs = null;
public string Error = null;
private bool isInitialized = false;
protected override async Task OnInitializedAsync()
{
CurrenTimeLocalStart = DateTime.UtcNow.ToLocalTime();
// SeriLogs = await maintenanceStore.ListRelated();
await Task.Delay(2000);
CurrenTimeLocalEnd = DateTime.UtcNow.ToLocalTime();
}
}
模板项目中的其他页面加载正常(因为没有异步调用？)
App.Razor个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="App.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
<link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" />
@* <link rel="stylesheet" href="_content/Syncfusion.Blazor.Themes/fluent.css" /> *@
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<script src="js/localStorage.js"></script>
<script src="js/logoutOnly.js"></script>
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js" autostart="true"></script>
@* <script src="js/boot.js"></script> *@
<script>
// Wait until a 'reload' button appears https://stackoverflow.com/questions/59779601/auto-reconnect-blazor-serverside
new MutationObserver((mutations, observer) => {
if (document.querySelector('#components-reconnect-modal h5 a')) {
// Now every 10 seconds, see if the server appears to be back, and if so, reload
async function attemptReload() {
await fetch(''); // Check the server really is back
location.reload();
}
observer.disconnect();
attemptReload();
setInterval(attemptReload, 10000);
}
}).observe(document.body, { childList: true, subtree: true });
</script>
</body>
</html>
<script>
function isDevice() {
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
}
</script>
Route.razor:个
@using App.Components.Layout
@* <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router>
*@
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
<NotAuthorized>
<App.Components.Pages.Account.Login />
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>