Blazor开发：如何避免Razor页面加载时的界面阻塞？

问题分析 #

你当前在OnInitializedAsync中同步调用DrugService.GetDrugs()，由于该方法耗时5秒以上，而Blazor采用单线程模型，同步操作会占用主线程，导致UI完全阻塞无法响应任何交互。

核心修复步骤 #

1. 将服务方法改为异步实现
   必须先把DrugService中的同步查询改成异步版本，利用EF Core的异步数据库方法释放主线程：

   // 修改后的DrugService异步方法
   public async Task<List<Drug>> GetDrugsAsync()
   {
       using var dbContext = new YourDbContext();
       // 用ToListAsync替代ToList，避免同步阻塞
       return await dbContext.Drugs.ToListAsync();
   }
   

2. 异步调用服务方法
   在Razor页面的OnInitializedAsync中使用await调用异步方法，让主线程在等待时可以处理UI渲染和用户操作：

   protected List<Drug> drugs;
   
   protected override async Task OnInitializedAsync()
   {
       // 用await等待异步任务完成，不会阻塞UI
       drugs = await DrugService.GetDrugsAsync();
   }
   

3. 添加加载状态提示
   为了提升用户体验，在数据加载完成前显示加载提示：

   @* Razor页面模板 *@
   @if (drugs == null)
   {
       <div class="loading">正在加载药品列表，请稍候...</div>
   }
   else
   {
       <table>
           @foreach (var drug in drugs)
           {
               <tr>
                   <td>@drug.Id</td>
                   <td>@drug.Name</td>
               </tr>
           }
       </table>
   }
   

关键说明 #

• Blazor的组件生命周期方法支持异步，使用await后，主线程会被释放去处理UI更新，直到异步任务完成才会继续执行后续代码。
• 必须确保数据库查询使用异步方法（如EF Core的ToListAsync、FirstOrDefaultAsync等），如果服务层还是同步调用数据库，即使在组件里用await也无法真正解决阻塞问题。

内容的提问来源于stack exchange，提问作者Joe