Blazor 定时刷新Table功能

最新推荐文章于 2025-05-14 15:15:17 发布

原创最新推荐文章于 2025-05-14 15:15:17 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #服务器

C# 同时被 2 个专栏收录

43 篇文章

订阅专栏

Blazor

15 篇文章

订阅专栏

本文介绍了如何在Blazor应用中使用SynTable组件，展示了一个动态加载10000条数据的表格，并通过定时器每秒从数据库模拟获取10条数据，实时更新用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@page "/synTable"
@using BlazorApp.Data

<h3>SynTable</h3>

<Table TItem="Foo" Height="300" Items="Items" IsBordered="true" IsStriped="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
    </TableColumns>
</Table>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;
using BlazorApp;
using BlazorApp.Shared;
using BootstrapBlazor.Components;
using BlazorApp.Data;
using System.Diagnostics.CodeAnalysis;


namespace BlazorApp.Pages
{
    public partial class SynTable
    {
        [NotNull]
        private List<Foo>? DBList { get; set; }

        [NotNull]
        private List<Foo>? Items { get; set; }

        private System.Threading.Timer timer { get; set; }

        private int index = 1;

        /// <summary>
        /// OnInitialized
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();
            //模拟数据库
            DBList = Foo.GenerateFoo(10000);

            //初始化
            Items = Foo.GenerateFoo(10);

            //定时器
            timer = new System.Threading.Timer((args) =>
            {
                index++;

                //从数据库获取数据
                var list = DBList.Skip((index - 1) * 10).Take(10).ToList();
                // 得到的数据未0，代表数据加载完了
                if (list.Count == 0)
                {
                    timer.Dispose(); // 停止并释放定时器资源

                    return;//不执行后面的代码
                }
                foreach (var foo in list) {
                    Items.Add(foo);
                }

                // 通知Blazor更新UI
                InvokeAsync(() => { StateHasChanged(); });

            }, null, TimeSpan.Zero, TimeSpan.FromSeconds(1));//1秒执行一次


        }


    }
}