使用 Blazor 在 ASP.NET CORE 中更新数据库后如何刷新网页

Question

我正在制作一个小房间预订网络应用程序，我希望在给定的时间间隔内刷新网页；即给定的分钟或对数据库进行更改时。我发现StateHasChanged();但我真的不知道如何实现它（这里是新手 One Kenobi！）我试图将它放在向日程表中添加约会的函数中：

var result = Service.CreateSchedule(nextSchedule);
    if (result)
    {
        StateHasChanged();
        NavigationManager.NavigateTo("/roomzfront/1");
    }

但我可能需要更多的东西，或者在代码的其他地方。

Answer 1

实际上，您无需刷新页面即可获得较新版本的数据库内容。

相反，我们需要做的就是从您的数据库中重新获取数据，因为浏览器中显示的内容与您在页面首次加载时获取的数据绑定。

例如，如果您有一个页面List.razor显示您的数据，您也可以在那里创建新的数据行。所以你可能有这些代码：

@page "/list"
@inject DbService DbService

<h2>All Data Lines<h2>
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Content</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var line in dataLines)
        {
            <tr>
                <td>@line.Title</td>
                <td>@line.Content</td>
            </tr>
        }
    </tbody>
</table>

<h2>Add A New Data Line</h2>
<input type="text" placeholder="Title" @bind="newLine.Title"/>
<input type="text" placeholder="Content" @bind="newLine.Content"/>
<button @onclick="AddNewLine">Add</button>

@code 
{
    List<DataLine> dataLines = new List<DataLine>();
    protected override void OnInitialized()
    {
        dataLines = DbService.GetAllData();
    }

    DataLine newLine = new DataLine();
    void AddNewLine()
    {
        DbService.CreateLine(newLine);
    }
}

为了帮助您理解它的外观，让我们在脑海中运行代码；这是您的浏览器如下：

 (<-)  (->)  (https://contoso.com/list                           )

所有数据线

|---------------------|------------------|
|        Title        |      Content     |
|=====================|==================|
|        Data1        |      Content1    |
|---------------------|------------------|
|        Data2        |      Content2    |
|---------------------|------------------|

添加新的数据线

[          Title          ]
[         Content         ]
(Add)

================浏览器结束==================

现在，让我们在一些类型Title和Content然后单击Add。您的网站现在开始向您的数据库提交“添加”请求。之后，在刷新之前，您将看不到上表中的任何更改。这是因为当前显示在表中的数据是在页面首次加载时获取的。当您刷新页面时，它将再次获取数据。但是，如果您不这样做，数据已过时，但我们需要做的就是在您的网站对数据库进行一些更改时手动更新（获取）数据。这意味着您可以简单地dataLines = DbService.GetAllData();在函数末尾添加一行，void AddNewLine()如下所示：

void AddNewLine()
{
    DbService.CreateLine(newLine);
    DbService.GetAllData();
}

现在，由于数据已被重新获取，您的表现在正在显示数据库的最新数据。

希望能帮到你，如果有什么不妥，请随时告诉我！