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

在这种情况下，我有一个for循环，它从从SQLServerExpress获取数据的datamodel创建html表。我想知道是否有可能创建一个自动刷新方法，其中只刷新表数据而不刷新整个页面，如果没有，那么可能有一个方法，OnClick按钮将从datamodel检索最新数据并相应地更新表

我是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();
    }

}

@page”/employees
@使用数据库；
@注入IEmployeeData\u db
@if（雇员为空）
{
加载

}
其他的
{
参赛日期
雇员
@foreach（员工中的var员工）
{
@employee.EntryDate
@employee.POI
}
}
@代码{
私人名单雇员；
受保护的重写异步任务OnInitializedAsync（）
{
employees=await_db.GetEmployee（）；
}
}

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

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

---

谢谢。

不确定这是你的目标，但你可以试试

@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();
    }

@injectiemployeedata\u db
@if（雇员为空）
{
加载

}
其他的
{
参赛日期
雇员
@foreach（员工中的var员工）
{
@employee.EntryDate
@employee.POI
}
刷新员工列表
}
@代码{
私人名单雇员；
受保护的重写异步任务OnInitializedAsync（）
{
GetEmployees（）
}
私有异步void GetEmployees（）
{
雇员；
employees=await_db.GetEmployee（）；
StateHasChanged（）；
}

---

祝您好运，

如果您的目标只是定期刷新数据，那么您可以使用Blazor支持的Javascript互操作。设置文档可在本文档中找到

正如在这个解决方案中所说的，您需要一个按钮才能工作

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

下面是您需要进行的更改，以使其正常工作

代码隐藏

使用它，您可以调用JavaScript方法

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

在组件完成渲染后调用OnAfterRender和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

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

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

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

_Host.cshtml

在此处注册此脚本文件

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

雇员详情

刷新员工列表

---

将其添加到表标记下方。如果您不希望此按钮对最终用户可见，请添加样式属性并将其设置为

display:none

您可以在服务器上创建一个信号器集线器。将集线器注入api控制器，使用它向客户端发送信号，告知api中的数据已发生更新。

希亚斯Z

我不明白为什么这个答案不被认为是好的，但对我来说，这就是我想要的，StateHasChanged（）；因为我仍然不使用JavaScript

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

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

---

另外，请看这里：如果按定时计划刷新就足够了，您可以。该示例提供了一个导航，但您可以只刷新数据而不是导航。如果您需要在数据库更新时立即刷新数据，那么这将更加复杂，但也有可能。@Paedo此问题与链接问题不同。Blazor的工作方式与答案中建议的完全不同。请您重新打开此问题，以便我能正确回答它。请重新打开此问题，您提出的答案与OP的问题完全无关。抱歉，我不知道它将立即关闭。我将其标记为可能的副本，仅此而已。

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

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

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