在内容之前加载页面(来自数据库的数据)

Question

我正在创建我的第一个Blazor web应用程序，用于自我教育。有一个包含数据的简单数据库。数据集目前相当小。然而，当点击页面链接时，加载需要大约1-2秒。只是想知道，如果数据集由大量的项目组成，需要多长时间。有没有一种方法可以先加载页面，然后填充数据？

公共类EmployeesBase:ComponentBase:

[Inject]
protected IRepository Repository { get; set; }
protected List<BlazorCompanyManager.Data.Employee> employees;
protected override void OnInitialized()
{
this.employees = this.Repository.GetEmployees();
}

公共接口IRepository：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorCompanyManager.Data
{
public interface IRepository
{
public List<Employee> GetEmployees();
public Employee GetEmployee(Guid id);
public bool UpdateEmployee(Employee employee);
public void AddEmployee(Employee employee);
public void DeleteEmployee(Guid id);
}
}

公共类存储库：I存储库：

protected readonly ApplicationDbContext dbContext;
public Repository(ApplicationDbContext db)
{
this.dbContext = db;
}
public List<Employee> GetEmployees()
{
return this.dbContext.EmployeeTable.ToList();
}

我曾尝试使它与OnInitializedAsync和其他重写方法一起工作，但到目前为止没有成功。有人能对如何做到这一点给出一些想法吗？

Answer 1

您正在同步运行异步代码块，从而阻塞UI线程。

this.dbContext.EmployeeTable.ToList()

应该是这样的：

public async ValueTask<List<Employee>> GetEmployeesAsync()
{
using var dbContext = this.DBContext.CreateDbContext();
var list = await dbContext
.EmployeeeTable
.ToListAsync() 
?? new List<TRecord>();
return list;
}

为此，您还需要移动到存储库中的IDbContextFactory。您不能再依赖单个DbContext。

protected virtual IDbContextFactory<MyDbContext> DBContext { get; set; } = null;
public xxxxxRepository(IConfiguration configuration, IDbContextFactory<MyDbContext> dbContext)
=> this.DBContext = dbContext;

启动/编程

var dbContext = configuration.GetValue<string>("Configuration:DBContext");
services.AddDbContextFactory<MyDbContext>(options => options.UseSqlServer(dbContext), ServiceLifetime.Singleton);

然后，您的组件初始化看起来是这样的。

protected async override void OnInitializedAsyc()
{
this.employees = await this.Repository.GetEmployeesAsync();
}

数据加载将取决于您的数据服务器，但UI会做出响应。随着数据集的增长，您可能需要考虑分页——您一次只能显示这么多行，为什么要一次获取所有行呢！