使用 Blazor 和 C# 刷新 html 表数据

Question

我有一个 for 循环，它从我的数据模型中创建我的 html 表，该表从 SQL server express 获取数据。我想知道是否可以创建一个自动刷新方法，其中表数据只刷新而不是整个页面，如果没有，那么可能是 OnClick 按钮将从数据模型中检索最新数据并相应地更新表的方法。

我是 blazor 和 C# 的新手，因此我们将不胜感激，我当前的页面结构目前如下所示：

@page "/employees"

@using DataLib;

@inject IEmployeeData _db

@if (employees is null)
{
    <p style="color:white;"><em>Loading . . .</em></p>
}
else
{
    <table class="table" id="myTable">
        <thead>
            <tr>
                <th>Entry Date</th>
                <th>Employee</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var employee in employees)
            {
                <tr>
                    <td>@employee.EntryDate</td>
                    <td>@employee.POI</td>
                </tr>
            }
        </tbody>
    </table>
}

@code{
    private List<EmployeeModel> employees;

    protected override async Task OnInitializedAsync()
    {
        employees = await _db.GetEmployee();
    }

}

当我加载此页面和手动刷新时，上述操作非常完美。

你们有什么方法可以帮助我吗？

谢谢。

Answer 1

不确定这是您可以尝试的目标；

@inject IEmployeeData _db

@if (employees is null)
{
    <p style="color:white;"><em>Loading . . .</em></p>
}
else
{
    <table class="table" id="myTable">
        <thead>
            <tr>
                <th>Entry Date</th>
                <th>Employee</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var employee in employees)
            {
                <tr>
                    <td>@employee.EntryDate</td>
                    <td>@employee.POI</td>
                </tr>
            }
        </tbody>
    </table>

    <button @onclick="GetEmployees"> Refresh Employee List</button>
}


@code{
    private List<EmployeeModel> employees;

    protected override async Task OnInitializedAsync()
    {
        GetEmployees()

}

    private async void GetEmployees()
    {
        employees.Clear();

        employees = await _db.GetEmployee();

        StateHasChanged();
    }

祝你好运，

Answer 2

您可以在您的服务器上创建一个 SignalR 集线器。将集线器注入到您的 api 控制器中，使用它来通知客户端 API 数据已发生更新。

Answer 3

马蒂亚斯 Z

我不明白为什么不认为这个答案是好的，但对我来说就是我想要的，StateHasChanged();因为我还没有使用 JavaScript。

    public MyConstructor()
    {
        _My_collection_.CollectionChanged += Change_EventArgs;
    }

    void Change_EventArgs(object sender, EventArgs e) 
    {  
        StateHasChanged();
    } 

Answer 4

如果您的目标只是定期刷新数据，那么您可以使用 Blazor 支持的 Javascript Interop。此link 中提供了设置文档。

就像Mathias Z 在此解决方案中所说，您需要一个按钮才能使其工作。

我可以看到您一直在同一个文件中编写 C# 代码和 HTML，但是我个人更喜欢将它们分开保存。回到解决方案，您可以使用 JavaScript 和 c# 定期刷新您的可显示内容。

以下是您需要进行的更改才能使其正常工作。

代码隐藏

using Microsoft.JSInterop; // import this library

使用它你可以调用 JavaScript 方法。

[Inject]
private IJSRuntime JSRuntime { get; set; }

OnAfterRenderAsync 和 OnAfterRender 在组件完成渲染后调用。此时会填充元素和组件引用。使用此阶段使用呈现的内容执行其他初始化步骤，例如激活对呈现的 DOM 元素进行操作的第三方 JavaScript 库。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync("EmployeeInterop.refreshEmployeeData");
}

// This method will be called on button click.
protected async Task GetEmployees()
{
    employees = await _db.GetEmployee();
}

wwwroot

在这个文件夹中，我们通常保存我们的网络资源，包括 js 库。在这里，创建一个 javascript 文件，例如EmployeeInterop.js 及以下代码。

(function () {
    window.EmployeeInterop = {
        refreshEmployeeData: () => {
            setInterval(() => { 
                document.getElementById("btnGetEmployeeData").click();
            }, 3000);
        }
    };
})();

setInterval() 方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。您可以定义自己的刷新时间。

_Host.cshtml

在此处注册此脚本文件。

<script src="EmployeeInterop.js"></script>

EmployeeDetail.razor

<button id="btnGetEmployeeData" @onclick="GetEmployees"> Refresh Employee List</button>

将此添加到您的表格标记下方。如果您不希望最终用户看到此按钮，请添加样式属性并将其设置为 display:none。