Radzen Datagrid 似乎加载了两次

Question

我在 Blazor Server 端应用程序上有一个 radzen 数据网格，它似乎加载了两次，这是，当第一次打开页面时所有数据闪烁半秒（我截图了，数据显示，而不是空白网格）然后它切换到加载 a 它需要大约 2 秒，然后显示网格的内容。

根据 radzen 示例，我一直在使用“IsLoading”属性来填充数据，我将放置一个删节版的数据网格和我的代码来展示我所拥有的。

剃须刀部分：

@page "/projectlist"
@page "/"



@inject ISqlData _db
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager navigationManager

@if (IsDetail == true)
{
    <ProjectDetail OnDetailShown="UpdateDetailView" CalendarPeriod="CalendarPeriod" Project="Project"></ProjectDetail>
}
else
{
    <h3><p class="text-center ">Project List</p></h3>

    <RadzenPanel Style="width: calc(100vw - 80px)">
        <RadzenDataGrid style="height: calc(100vh - 175px)" AllowPaging="true" AllowColumnResize="true" PageSize="20"  IsLoading="IsLoading" AllowSorting="true" ShowPagingSummary="true" AllowColumnReorder="true"  AllowMultiColumnSorting="true"  AllowFiltering="true" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@Projects" TItem="Project" >
            <Columns>
                <RadzenDataGridColumn TItem="Project" Property="ProjectNumber" Title="Project Number" Sortable="false" FilterOperator="FilterOperator.Contains"  Width="130px" Pickable="false" Frozen="true"  >
                    <Template Context="data"><RadzenButton Click=@(args => OnClick(data.ProjectId, data.ProjectStatus)) Shade="Shade.Dark" Text="@data.ProjectNumber" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Success" /></Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="Project" Property="Name" Title="Project Name" MinWidth="300px"  />
                <RadzenDataGridColumn TItem="Project" Property="ContractType" Title="Contract Type"  MinWidth="300px" />
                <RadzenDataGridColumn TItem="Project" Property="PtdUnbilled" Title="Beginning WIP Balance" FormatString="{0:0,0.00}"  TextAlign="TextAlign.Right" MinWidth="210px"   Width="210px"  />
            </Columns>
        </RadzenDataGrid>
    </RadzenPanel>
}

和代码部分：

    public IEnumerable<Project> Projects;
    private Employee Employee { get; set; } = null!;
    private string PersonnelNo { get; set; } = null!;
    public string EmployeeAdName { get; set; }
    public CalendarPeriod CalendarPeriod { get; set; } = null!;
    public IEnumerable<ProjectWip> ProjectWipCalculations { get; set; }
    public bool IsDetail { get; set; }
    public Project Project { get; set; }
    public bool IsLoading { get; set; }
    
    
    protected override async Task  OnParametersSetAsync()
    {

    }

    
    protected override async Task OnInitializedAsync()
    {

        IsLoading = true;


        EmployeeAdName = (await AuthenticationStateProvider.GetAuthenticationStateAsync()).User.Identity!.Name!;
        CalendarPeriod = await _db.GetCalendarPeriodAsync();
        
        Employee = await _db.GetEmployeeDataAsync(EmployeeAdName);

        PersonnelNo = Employee.PersonnelNumber;

        Projects = await _db.GetProjectsAsync(PersonnelNo);

        var enumerable = Projects.ToList();
        var projectList = enumerable.Select(x => x.ProjectId).ToArray();

        ProjectWipCalculations = await _db.GetCurrentMonthWIPData(projectList, CalendarPeriod.PeriodFrom);

        foreach (var project in enumerable)
        {
            var projectWip = ProjectWipCalculations.FirstOrDefault(p => p.ProjectId == project.ProjectId);
            if (projectWip != null)
            {
                project.CurrMonthInvoiceTotal = projectWip.CurrMonthInvoiceTotal;
            }
        }
        IsLoading = false;
    }

    private void OnClick(int projectId, string projectStatus)
    {
        IsDetail = true;
        Project = Projects.First(x => x.ProjectId == projectId);
        Project.ProjectStatus = projectStatus;
    }

    private void UpdateDetailView()
    {
        IsDetail = false;
    }

如果我删除“IsLoading”属性，唯一的区别是网格不闪烁半秒钟全部填充，然后它空白约 2 秒并显示，“IsLoading”只是在中间呈现动画一点。

我不完全明白发生了什么，如果可能正在填充网格然后再次调用以填充它？ （我有所有代码在OnInitializedAsync

我在下面添加了一个小 gif 来显示我的意思

Answer 1

那不是 radzen 的事。 是因为 blazor，加载了两次。 这是因为 Blazor 首先预呈现页面以显示给用户，然后加载整个页面。 如果你想禁用它，你可以禁用 blazor 应用程序的预渲染。

How to disable Blazor server side pre-render?

另一种解决方案是默认将 onload 网格属性设置为 true ，然后在 onAfterRender 方法中如果是第一次渲染将加载设置为 false 。

Answer 2

也许使用 OnAfterRenderAsync()

protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender == true)
        {
            ReloadChart();
        }
        return base.OnAfterRenderAsync(firstRender);
    }

Answer 3

通常尝试使用字段而不是属性以避免触发参数集事件。

此外，我在项目中使用的一个技巧是使用 ??= 初始化任务字段，然后等待它们。这可以防止该方法触发两次。

编辑：添加代码示例

private Task? _doSomethingTask;
protected override async Task OnInitializedAsync()
{
    _doSomethingTask ??= DoSomethingAsync(_arg);
    await _doSomethingTask;
}