c# - 使用 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();
    }

祝你好运