如何在ASP.NET Core中用Blazor实现数据库更新后网页刷新

问题描述

我正在制作一个小房间预订Web应用程序，我希望在给定的时间间隔(即，给定的分钟或数据库发生更改时)刷新网页。我找到了StateHasChanged();，但我真的不知道如何实现它(这里是新手Kenobi！)我尝试将其放在将约会添加到日程安排的函数中：

var result = Service.CreateSchedule(nextSchedule);
    if (result)
    {
        StateHasChanged();
        NavigationManager.NavigateTo("/roomzfront/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。您的网站现在开始向您的数据库提交添加请求。在此之后，在刷新之前，您无法看到上表中的任何更改。这是因为当前显示在表中的数据是在第一次加载页面时提取的。当您刷新页面时，它将再次提取数据。但是，如果您不这样做，数据就会过时，但当您的网站对数据库进行了一些更改时，我们需要做的就是手动更新(获取)数据。这意味着您只需在函数void AddNewLine()的末尾添加一行dataLines = DbService.GetAllData();，如下所示：

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

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

我希望这对您有帮助，如果有什么问题，请随时告诉我！

这篇关于如何在ASP.NET Core中用Blazor实现数据库更新后网页刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！