asp.net Blazor:第一次搜索时搜索框不搜索

ssm49v7z  于 5个月前  发布在  .NET
关注(0)|答案(1)|浏览(56)

我刚刚在我的Blazor应用程序中创建了一个小搜索框,它正在做一些意想不到的事情,我无法在项目中看到问题可能在哪里。
下面是搜索框的信息日志。

[10:59:48 INF] [Shared\SearchBox.razor:Enter()] Search for null completed
[10:59:50 INF] [Shared\SearchBox.razor:Enter()] Search for Test completed
[10:59:54 INF] [Shared\SearchBox.razor:Enter()] Search for Test completed
[10:59:59 INF] [Shared\SearchBox.razor:Enter()] Search for  completed

字符串
我为此经历的过程是最初输入Test。第一次输入Test的日志没有搜索,而是导致null。第二次我在搜索框中输入Test,它返回了相应的项目。
现在搜索已经完成了,我清除了搜索框,然后按回车键再次获得完整的列表。第一次我按回车键时,搜索框是空的(第三个日志),控制台记录我再次搜索Test。我不得不第二次按回车键搜索一个空框,结果是完整的列表。
这看起来像是一个输入验证问题,但我没有看到这个问题在项目中的位置。
SearchBox.razor:

@typeparam TEntity
@using Serilog

<input class="form-control" style="max-width:600px" placeholder="Search..." @onkeydown="@Enter" @bind="searchItem" />

@code {
    [Parameter]
    public List<TEntity> Items { get; set; }

    [Parameter]
    public EventCallback<string> OnSearch { get; set; }

    private string? searchItem;

    private async Task OnSearchClicked()
    {
        await OnSearch.InvokeAsync(searchItem);
    }

    public async Task Enter(KeyboardEventArgs e)
    {
        if (e.Code == "Enter" || e.Code == "NumpadEnter")
        {
            Log.Information("[Shared\\SearchBox.razor:Enter()] Search for {@searchItem} completed", searchItem);
            await OnSearch.InvokeAsync(searchItem);
        }
    }
}


Licenses.razor(可访问搜索框的位置):

@page "/licenses"
@using static HuntressAPI

<h3>Licenses</h3>

<p>Shows the current licensing count of the services</p>

<div class="w-100">
    <SearchBox Items="@Organizations" OnSearch="UpdateFilteredOrganizations"></SearchBox>
</div>

<table class="table">
    <thead>
        <tr>
            <th>Site Name</th>
            <th>Huntress</th>
        </tr>
    </thead>
    <tbody>
        @if (Organizations != null)
        {
            @foreach (var organization in _filteredOrganizations.OrderBy(a => a.Name))
            {
                <tr>
                    <td>@organization.Name</td>
                    <td>@organization.agents_count</td>
                    <!-- Add other columns as needed -->
                </tr>
            }
        }
    </tbody>
</table>

@inject HuntressAPI HuntressAPI
@code {
    private List<Organization>? Organizations { get; set; }
    private List<Organization> _filteredOrganizations { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Organizations = await HuntressAPI.Huntress();
        _filteredOrganizations = Organizations.ToList();
    }

    void UpdateFilteredOrganizations(string searchTerm)
    {
        if (string.IsNullOrEmpty(searchTerm))
        {
            _filteredOrganizations = Organizations.ToList();
        }
        else
        {
            _filteredOrganizations = Organizations
                .Where(org => org.Name.Contains(searchTerm, StringComparison.OrdinalIgnoreCase))
                .ToList();
        }
    }
}

ljsrvy3e

ljsrvy3e1#

问题是@onkeydown在值实际更改之前执行。您可以尝试这样做:

<input class="form-control" style="max-width:600px" placeholder="Search..." @onchange=@Change />

@code {

    public async Task Change(ChangeEventArgs args)
    {
        var yourValue = args.Value;
    }
}

字符串

相关问题