Blazor не обновляет компонент - РЕШЕНО

Question

[Blazor на стороне клиента]

У меня есть простая таблица, загружающая данные из API, работающая нормально ... Теперь мне нужно применить фильтр и перезагрузить таблицу, чтобы отобразить новые данные / список;

КОНЕЦ РЕШЕНИЯ

index.razor

    @inherits PersonBase;

//---show 3 items but after filter no change--    
<h2>list size: @PersonList.Count()</h2> 
<EditForm Model="@Obj ">
    <div class="col-md-12">
        <div class="well">
            <table class='table borderless'>
                <tr>
                    <td colspan="2" style="text-align: right">
                        <InputText @bind-Value="@Search" class="form-control input-sm" style="width:200px;margin-bottom:0px" type="text" name="input3" placeholder="Pesquisar por:" />
                        <button class="btn btn-info" @onclick="@(() => LoadItems(@Search))">
                            <i class="fas fa-search"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</EditForm>

    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>

            </tr>
        </thead>
        <tbody>
            @foreach (var person in PersonList)
            {
            <tr>
                <td>@person.Id</td>
                <td>@person.Name</td>
            </tr>
            }
        </tbody>
    </table>

PersonBase.cs

namespace MyProject.Client.Pages.PersonComponent
{
    public class PersonBase : ComponentBase
    {
        [Inject] public HttpClient Http { get; set; }
        [Inject] NavigationManager Navigation { get; set; }

        [Parameter] public string Search { get; set; } = string.Empty;
        protected IEnumerable<Person> Itens { get; set; }
        [Parameter] public List<Person> PersonList { get; set; }
        public int idObj;

        [Parameter] public Person Obj { get; set; }

        protected override async Task OnInitializedAsync()
        {
            Obj = new Person();
            await LoadItems(null); //--Loading all items
            
            Console.WriteLine("OnInitializedAsync => " + PersonList.Count);
        }

        //--LOAD BY WEBAPI--
        protected async Task LoadItems(string search)
        {
            try
            {
                var httpResponse = await Http.GetAsync($"api/person/list/{search}");

                if (httpResponse.IsSuccessStatusCode)
                {
                    var responseString = await httpResponse.Content.ReadAsStringAsync();

                    PersonList = JsonSerializer.Deserialize<List<Person>>(responseString,
                    new JsonSerializerOptions()
                    {
                        PropertyNameCaseInsensitive = true
                    });

                    Itens = PersonList;
                    Console.WriteLine("LoadItems => PersonList => " + PersonList.Count);

                    await InvokeAsync(() => StateHasChanged()).ConfigureAwait(false);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
    }
}

PersonController.cs

    [HttpGet("list/{search}")]
    public async Task<ActionResult<List<Person>>> GetByAll(string search)
    {
        try
        {
        //--Loading all--
            if (string.IsNullOrEmpty(search))
            {
                return await _context.Person
                    .AsNoTracking()
                    .Take(3)
                    .ToListAsync();
            }
            else
            {
            //--filtered--
                return await _context.Person
                    .AsNoTracking()
                    .Where(n => n.Name.ToLower().Contains(search.ToLower()))
                    .Take(3)
                    .ToListAsync();
            }
        }
        catch (Exception)
        {
            throw;
        }
    }

Но таблица не загружает новые данные. Что я могу попробовать сейчас?

SOLVED: Problem was a controller without [FromQuery]:

PersonControler.cs

[HttpGet]
[Route("list")]
public async Task>> GetByAll([FromQuery]string search = "")

Now I can:

var httpResponse = await Http.GetAsync($"api/person/list?search={search}");

like said in: https://docs.microsoft.com/pt-br/aspnet/core/web-api/?view=aspnetcore-3.1

Answer 1

Вызов StateHasChanged при замене ссылки на свойство асинхронным c кодом:

public List<Person> ListPeople { get; set; }

protected async Task LoadPeople(string search)
{
    try
    {
        var httpResponse = await Http.GetAsync($"api/people/list/{search}");

        if (httpResponse.IsSuccessStatusCode)
        {
            var responseString = await httpResponse.Content.ReadAsStringAsync();

            ListPeople = JsonSerializer.Deserialize<List<Person>>(responseString,
            new JsonSerializerOptions()
            {
                PropertyNameCaseInsensitive = true
            });

            Itens = ListPeople;
            Console.WriteLine("Count=> " + ListPeople.Count); // returning all 3 objects 

            // informs the component its state a changed and it should rerender
            await InvokeAsync(() => StateHasChanged())
                        .ConfigureAwait(false);
        }
    }
}

И у вас не должно быть @ListPeople в вашем @foreach

...
@foreach (var person in ListPeople)
...

ИЗМЕНИТЬ второй вариант

Вместо замены ссылки на список очистите и добавьте элементы:

public List<Person> ListPeople { get; } = new List<Person>();

protected async Task LoadPeople(string search)
{
    try
    {
        var httpResponse = await Http.GetAsync($"api/people/list/{search}");

        if (httpResponse.IsSuccessStatusCode)
        {
            var responseString = await httpResponse.Content.ReadAsStringAsync();

            var newItems = JsonSerializer.Deserialize<List<Person>>(responseString,
            new JsonSerializerOptions()
            {
                PropertyNameCaseInsensitive = true
            });

            ListPeople.Clear();
            ListPeople.AddRange(newItems);

            Itens = ListPeople;
            Console.WriteLine("Count=> " + ListPeople.Count); // returning all 3 objects 

            // informs the component its state a changed and it should rerender
            await InvokeAsync(() => StateHasChanged())
                        .ConfigureAwait(false);
        }
    }
}