Blazor(客户端)StateHasChanged()未更新页面 [英] Blazor (Client-side) StateHasChanged() not updating page

问题描述

我的页面(组件)上有一个按钮，当单击该按钮时会调用Refresh()方法.然后，此方法调用StateHasChanged()，但不会重新加载页面. GetData()正在调用外部API来从数据库加载数据.

I have a button on my page (component) that calls a Refresh() method when clicked. This method then calls the StateHasChanged(), but does not reload the page. The GetData() is calling an external API to load data from a database.

<button class="btn btn-warning" @onclick="Refresh">Refresh</button>

code {

protected override async Task OnInitializedAsync()
    {
        try
        {
            await GetData();
            base.OnInitialized();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }

    }

protected async Task GetData()
    {
        try
        {
            results = await HttpClient.GetJsonAsync<Results[]>(ServiceEndpoints.GET_RESULTS);
        }
        catch (Exception ex)
        {
            Console.WriteLine("Error retrieving data from Oracle.", ex.Message);
        }
    }

public void Refresh()
        {
            StateHasChanged();          
        }

我的页面(组件)还具有一种形式，该形式具有可以更改的预加载输入.我希望用户能够编辑表单，但是能够通过单击按钮以取回原始数据来刷新页面.这是在Blazor的早期版本上进行的工作，是否存在已知问题?

My page (component) also has a form that has preloaded inputs that can be changed. I want the user to be able to edit the form, but be able to refresh the page by clicking the button to get back the original data. This was working on a previous version of Blazor, is there a known issue about this?

@page "/"
@inherits IndexBase

<EditForm Model="@results">
<label><strong>Select a job to view its current parameters</strong></label>
<div class="currentJobForm">

    <InputSelect id="jobSelect" @bind-Value="jobSelected">
        @foreach (var items in results)
        {
            <option value="@items.JOB_NAME">@items.JOB_NAME</option>
        }
    </InputSelect>
    <button class="btn btn-warning" @onclick="SaveChanges" disabled="@IsDisabled">Save</button>
    <button class="btn btn-warning" @onclick="Refresh">Refresh</button>
    <button class="btn btn-danger" @onclick="DeleteJob">Delete Job</button>
</div>    
    <label><strong>Notify Parameters</strong></label>
    <div class="notifyParametersForm">
        @foreach (var item in results.Where(i => i.JOB_NAME == jobSelected))
        {
            <div class="issueDescription">
                <label><strong>Issue Description</strong></label>
                <InputText id="issueDesc" @bind-Value="item.JOB_HEADER" placeholder="Enter New Issue Description" />
            </div>
            <div class="sendSlack">
                <label><strong>Send Slack</strong></label>
                <InputSelect id="sendSlackSelect" @bind-Value="item.SENDSLACK">
                    @foreach (var items in InitializeData.SendSlacks)
                    {
                        <option value="@items.SendSlackName">@items.SendSlackName</option>
                    }                        
                </InputSelect>
            </div>
            <div class="slackUser">
                <label><strong>Slack User</strong></label>
                <InputText id="slackUser" @bind-Value="item.SLACK_USER" placeholder="Enter New Slack User" />
            </div>
            <div class="slackChannel">
                <label><strong>Slack Channel</strong></label>
                <InputSelect id="sendSlackChannel" @bind-Value="item.SLACK_CHANNEL">
                    @foreach (var items in InitializeData.SlackChannels)
                    {
                        <option value="@items.SlackChannelName">@items.SlackChannelName</option>
                    }                        
                </InputSelect>
            </div>
            <div class="slackUrl">
                <label><strong>Slack URL</strong></label>
                <InputText id="slackUrlTextBox" @bind-Value="item.SLACK_URL" placeholder="Enter New Slack Url" />
            </div>
            <div class="sendMail">
                <label><strong>Send Mail</strong></label>
                <InputSelect id="sendMailSelect" @bind-Value="item.SENDMAIL">
                    @foreach (var items in InitializeData.SendMails)
                    {
                        <option value="@items.SendMailName">@items.SendMailName</option>
                    }
                </InputSelect>
            </div>
            <div class="mailFrom">
                <label><strong>From:</strong></label>
                <InputText id="from" @bind-Value="item.MAILFROM" placeholder="Enter New Mail From" />
            </div>
            <div class="mailTo">
                <label><strong>To:</strong></label>
                <InputText id="to" @bind-Value="item.MAILTO" placeholder="Enter New Mail To" />
            </div>
            <div class="subject">
                <label id="subjectLabel"><strong>Subject:</strong></label>
                <InputText id="subject" @bind-Value="item.EMAIL_SUBJECT" placeholder="Enter New Subject" />
            </div>
        }
    </div>
</div>

推荐答案

正如所有其他答案所解释的那样，有多种方法可以正确地重置您的表单，但是除了BrinkDaDrink答案之外，没有其他方法可以告诉您如何按刷新页面一个按钮.

As All the other answers explain there are various way to properly reset your form but none of them except BrinkDaDrink answer tell you how to refresh the page with a press of a button.

我认为BrinkDaDrink答案增加了不必要的复杂性.

BrinkDaDrink answer add unnecessary complexity in my opinion.

我的解决方案是创建一个名为refresh的空组件页面，如下所示:

My solution is to create an empty component page called refresh as follows:

@page "/refresh"
@inject NavigationManager NavigationManager

@code {

    protected override void OnInitialized()
    {
        NavigationManager.NavigateTo("");
    }

}

此页面将立即重定向到您的原始页面，从而立即刷新页面和所有数据.

This page will immediately redirect to your original page refreshing the page and all of the data instantly.

您可以在原始页面中创建刷新方法，如下所示:

You can create a refresh method in your original page as follows:

public void RefreshPage()
{
    NavigationManager.NavigateTo("refresh");
}

与迄今为止提供的任何其他解决方案相比，这可以更快地解决您提到的问题:

This solves the issue you mention much faster than any of the other solutions provided so far:

我希望用户能够编辑表单，但可以通过单击按钮以获取原始数据来刷新页面

I want the user to be able to edit the form, but be able to refresh the page by clicking the button to get back the original data

您还可以通过将以下内容添加到刷新页面来使用此参数将参数传递到刷新页面:

You can also use this to pass parameters into your refresh page by adding the following to the refresh page:

@page "/refresh"
@page "/refresh/{text}"
@inject NavigationManager NavigationManager

@code {
    [Parameter]
    public string Text { get; set; }

    protected override void OnInitialized()
    {
        NavigationManager.NavigateTo(Text);
    }

}

这篇关于Blazor(客户端)StateHasChanged()未更新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！