无需刷新页面，如何加载数据至MVC视图并自动更新Angular数据表？

我帮你梳理下这个场景的具体实现思路，刚好之前做过类似的MVC结合Angular的项目，分后端和前端两部分给你落地方案：

一、后端：搞定定时缓存更新与数据接口 #

首先，后端要保证每5分钟从自定义Data Service拉取最新数据并缓存，同时要给前端提供获取最新数据的入口：

1. 用托管服务实现可靠的定时任务
   别用手动写的间隔逻辑了，.NET的IHostedService是官方推荐的定时任务实现方式，稳定且符合DI规范：

   public class DataRefreshBackgroundService : IHostedService, IDisposable
   {
       private readonly IServiceScopeFactory _scopeFactory;
       private Timer _refreshTimer;
       private const int RefreshIntervalMinutes = 5;
   
       public DataRefreshBackgroundService(IServiceScopeFactory scopeFactory)
       {
           _scopeFactory = scopeFactory;
       }
   
       public Task StartAsync(CancellationToken cancellationToken)
       {
           // 启动时立即刷新一次，之后每5分钟执行
           _refreshTimer = new Timer(RefreshDataCache, null, TimeSpan.Zero, TimeSpan.FromMinutes(RefreshIntervalMinutes));
           return Task.CompletedTask;
       }
   
       private async void RefreshDataCache(object state)
       {
           using var serviceScope = _scopeFactory.CreateScope();
           var dataService = serviceScope.ServiceProvider.GetRequiredService<ICustomDataService>();
           var memoryCache = serviceScope.ServiceProvider.GetRequiredService<IMemoryCache>();
   
           // 拉取最新数据并更新缓存，缓存时间设得比刷新间隔长一点，避免空窗
           var freshViewModelList = await dataService.GetLatestDataAsync();
           memoryCache.Set("CachedViewModelList", freshViewModelList, TimeSpan.FromMinutes(6));
       }
   
       public Task StopAsync(CancellationToken cancellationToken)
       {
           _refreshTimer?.Change(Timeout.Infinite, 0);
           return Task.CompletedTask;
       }
   
       public void Dispose()
       {
           _refreshTimer?.Dispose();
       }
   }
   

   记得在Program.cs里注册这个服务和内存缓存：

   builder.Services.AddHostedService<DataRefreshBackgroundService>();
   builder.Services.AddMemoryCache();
   

2. 提供API接口给前端拉取最新数据
   除了初始视图传数据，还要写个API让前端能主动获取缓存的最新数据：

   [ApiController]
   [Route("api/data")]
   public class DataApiController : ControllerBase
   {
       private readonly IMemoryCache _cache;
       private readonly ICustomDataService _dataService;
   
       public DataApiController(IMemoryCache cache, ICustomDataService dataService)
       {
           _cache = cache;
           _dataService = dataService;
       }
   
       [HttpGet("latest")]
       public async Task<IActionResult> GetLatestViewModelData()
       {
           if (_cache.TryGetValue("CachedViewModelList", out List<YourViewModel> cachedData))
           {
               return Ok(cachedData);
           }
   
           // 如果缓存为空（比如刚启动），临时拉取一次并缓存
           var freshData = await _dataService.GetLatestDataAsync();
           _cache.Set("CachedViewModelList", freshData, TimeSpan.FromMinutes(6));
           return Ok(freshData);
       }
   }
   

二、前端：Angular自动更新表格 #

这里给你两种方案，按需选择：

方案1：定时拉取（简单直接，适合5分钟间隔场景） #

这种方案不用复杂的推送，前端每隔5分钟主动请求一次最新数据，实现成本极低：

1. 组件里实现定时刷新逻辑
   假设你的表格组件叫DataTableComponent，代码大概是这样：

   import { Component, OnInit, OnDestroy, Input } from '@angular/core';
   import { DataApiService } from '../services/data-api.service';
   import { YourViewModel } from '../models/your-view-model.model';
   import { Subscription, interval } from 'rxjs';
   
   @Component({
     selector: 'app-data-table',
     templateUrl: './data-table.component.cshtml',
     styleUrls: ['./data-table.component.css']
   })
   export class DataTableComponent implements OnInit, OnDestroy {
     @Input() initialData: YourViewModel[] = []; // 接收MVC视图传的初始数据
     tableData: YourViewModel[] = [];
     private refreshSub?: Subscription;
     private readonly refreshIntervalMs = 5 * 60 * 1000; // 5分钟转毫秒
   
     constructor(private dataApiService: DataApiService) { }
   
     ngOnInit(): void {
       // 先加载初始数据
       this.tableData = this.initialData;
       // 设置定时刷新
       this.refreshSub = interval(this.refreshIntervalMs).subscribe(() => {
         this.loadLatestData();
       });
     }
   
     private loadLatestData(): void {
       this.dataApiService.getLatestData().subscribe({
         next: (data) => {
           this.tableData = data; // 数据绑定自动更新表格
         },
         error: (err) => console.error('加载最新数据失败:', err)
       });
     }
   
     ngOnDestroy(): void {
       // 组件销毁时取消订阅，防止内存泄漏
       this.refreshSub?.unsubscribe();
     }
   }
   

2. 封装API请求的服务

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { YourViewModel } from '../models/your-view-model.model';
   
   @Injectable({ providedIn: 'root' })
   export class DataApiService {
     private apiUrl = '/api/data/latest';
   
     constructor(private http: HttpClient) { }
   
     getLatestData(): Observable<YourViewModel[]> {
       return this.http.get<YourViewModel[]>(this.apiUrl);
     }
   }
   

方案2：SignalR实时推送（进阶，数据更新立即同步） #

如果不想等5分钟，希望后端数据一更新就推给前端，用SignalR是最佳选择：

1. 后端添加SignalR Hub

   public class DataUpdateHub : Hub { }
   

   注册SignalR：

   builder.Services.AddSignalR();
   // 中间件里添加路由
   app.MapHub<DataUpdateHub>("/dataUpdateHub");
   

   然后在之前的RefreshDataCache方法里，更新缓存后推送给所有客户端：

   private async void RefreshDataCache(object state)
   {
       // ... 前面的缓存更新逻辑
       var hubContext = serviceScope.ServiceProvider.GetRequiredService<IHubContext<DataUpdateHub>>();
       await hubContext.Clients.All.SendAsync("ReceiveDataUpdate", freshViewModelList);
   }
   

2. 前端集成SignalR
   先安装依赖：npm install @microsoft/signalr，然后修改组件代码：

   import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
   
   // 组件内添加
   private hubConnection?: HubConnection;
   
   ngOnInit(): void {
     this.tableData = this.initialData;
     // 初始化SignalR连接
     this.hubConnection = new HubConnectionBuilder()
       .withUrl('/dataUpdateHub')
       .build();
   
     this.hubConnection.start().catch(err => console.error('SignalR连接失败:', err));
   
     // 监听后端推送的数据更新
     this.hubConnection.on('ReceiveDataUpdate', (data: YourViewModel[]) => {
       this.tableData = data;
     });
   }
   
   ngOnDestroy(): void {
     this.hubConnection?.stop();
   }
   

三、MVC视图传递初始数据 #

最后，在你的MVC Action里把初始缓存数据传给cshtml视图：

public async Task<IActionResult> Index()
{
    List<YourViewModel> initialData;
    if (!_cache.TryGetValue("CachedViewModelList", out initialData))
    {
        initialData = await _dataService.GetLatestDataAsync();
        _cache.Set("CachedViewModelList", initialData, TimeSpan.FromMinutes(6));
    }
    return View(initialData);
}

然后在cshtml里把数据传给Angular组件：

<app-data-table [initialData]="Model"></app-data-table>

这样一套下来，就能完美实现你要的：后端定时刷新数据，前端Angular表格自动更新的需求。

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