Blazor服务器组件未重新呈现

Question

我有一个带有搜索页面的Blazor Server (.NETv5)应用程序。在此页面上，我有一个按名称搜索的表单。在表单提交事件上，我调用子组件的search方法。该组件正在执行实际的搜索。这工作得很好。

因为搜索可能需要几秒钟的时间，所以我希望在搜索开始时显示一个微调控件，并在搜索完成时隐藏它。

另外，当我进行第二次搜索时，我想隐藏之前的搜索结果。

隐藏微调器并显示搜索结果是有效的，但在搜索之前显示微调器不起作用。变量设置正确，但是页面没有被重新渲染(我想)。

我的页面：

<div class="container pt-2 mb-3">
    <RadzenTemplateForm Data="@searchTerms" Submit="@((SearchTerms args) => { Submit(args); })">
        <div class="row">
            <div class="mb-2 col-6 pl-0">
                <RadzenLabel Text="Name" />
                <RadzenTextBox class="col-12" Name="Name" @bind-Value="searchTerms.Name"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 mt-3">
                <RadzenButton ButtonType="ButtonType.Submit" Icon="search" Text="Search" Disabled="@isSearching" />
                <RadzenButton ButtonStyle="ButtonStyle.Light" Icon="cancel" Text="Cancel" Click="@Cancel" class="ml-2"/>
            </div>
        </div>
    </RadzenTemplateForm>
</div>

<SearchResultsComponent @ref="searchResultsComponent" />

protected SearchTerms searchTerms = new();
protected SearchResultsComponent searchResultsComponent;
protected bool isSearching;

protected void Submit(SearchTerms args)
{
    if (string.IsNullOrEmpty(args.Name)) return;
    
    // Disable submit button ==> NOT WORKING:
    isSearching = true;
    // Call search method on child component
    searchResultsComponent.Search(args);
    // Enable submit button again:
    isSearching = false;
}

protected void Cancel()
{
    // Reset form:
    searchTerms = new SearchTerms();
}

我的子组件：

<div class="container">

    @if (isSearching)
    {
        <div class="spinner-border text-primary mr-2" role="status">
            <span class="sr-only">Searching...</span>
        </div>
        <b>Searching ...</b>
    }

    @if (noResults)
    {
        <div class="alert alert-warning" role="alert">
           No results.
        </div>
    }

    @if (getSearchResults != null && getSearchResults.Any())
    {
        <RadzenHeading Size="H2" Text=@($"Results({getSearchResults.Count})")></RadzenHeading>
        <div class="row">

            @foreach (var searchResult in getSearchResults)
            {
                <RadzenCard>
                    <b>@searchResult.Name</b>
                </RadzenCard>
            }

        </div>
    }

</div>

private IList<MultiShardSearchResultsWerknemer> _searchResults;
private bool _isSearching = true;
private bool _noResults;

protected bool noResults
{
    get => _noResults;
    set
    {
        if (Equals(_noResults, value)) return;
        _noResults = value;
        InvokeAsync(() => StateHasChanged());
    }
}        

protected bool isSearching
{
    get => _isSearching;
    set
    {
        if (Equals(_isSearching, value)) return;
        _isSearching = value;
        InvokeAsync(() => StateHasChanged());
    }
}

protected IList<MultiShardSearchResultsWerknemer> getSearchResults
{
    get => _searchResults;
    set
    {
        if (Equals(_searchResults, value)) return;
        _searchResults = value;
        InvokeAsync(() => StateHasChanged());
    }
}

public void Search(SearchTerms args)
{
    Helpers.ConsoleLog(args);
    if (string.IsNullOrEmpty(args.Name)) return;
    
    // Reset ==> NOT WORKING:
    isSearching = true;
    noResults = false;
    getSearchResults = null;
    InvokeAsync(() => StateHasChanged());

    getSearchResults = ShardingService.SearchForAllEmployees(args.Name, null).GetAwaiter().GetResult();
    Helpers.ConsoleLog("Found results: " + getSearchResults.Count);
    isSearching = false;
    noResults = !getSearchResults.Any();
}

出于调试目的，我设置了_isSearching = true，它显示了微调器。当搜索完成时，微调器也是隐藏的，所以这是有效的。但是我不能让旋转器在我开始搜索的时候显示出来。我已经尝试了我能找到的所有选择，但都没有成功。

我一定漏掉了什么。敬请指教。

Answer 1

看看您的search handel方法

protected void Submit(SearchTerms args)
{
    if (string.IsNullOrEmpty(args.Name)) return;
    
    // Disable submit button ==> NOT WORKING:
    isSearching = true;
    // Call search method on child component
    searchResultsComponent.Search(args);
    // Enable submit button again:
    isSearching = false;
}

请记住，渲染将在方法完成后进行。因此，在调用isSearching之前是false，在调用之后也是false。这就是你看不到旋转器的原因。

Blazor提供了一种启动新渲染周期的方法：StateHasChanged()。

因此，您可以修改submit方法，如下所示

protected void Submit(SearchTerms args)
{
    if (string.IsNullOrEmpty(args.Name)) return;
    
    isSearching = true;
    StateHasChanged()

    // Call search method on child component
    searchResultsComponent.Search(args);

    isSearching = false;
    StateHasChanged()
}

因此，单击search/submit按钮即可执行此方法。

或者，如果您愿意，可以改为创建一个属性

@code
{
    private Boolean isSearching = false;

    public Boolean IsSearching
    {
        get => isSearching;
        private set
        {
            isSearching = value;
            StateHasChanged();
        }
    }

    protected void Submit(SearchTerms args)
    {
        if (string.IsNullOrEmpty(args.Name)) return;

        IsSearching = true;

        // Call search method on child component
        searchResultsComponent.Search(args);

        IsSearching = false;
    }
}

我还没有测试过它，但曾经遇到过类似的问题。