Blazor WebAssembly - jak zrobić taką wyszukiwarkę jak jest przykładowo na 4programmers? ;)

Założenia:

• wyszukiwarka jest umieszczona w layoucie strony więc dostępna z poziomu dowolnej podstrony,
• jak wpisuję frazę w wyszukiwarkę i klikam na szukaj to przenosi mnie do strony /Search/{fraza} oraz fraza wpisana w polu wyszukiwania jest ciągle widoczna
• po przejściu na inną podstronę typu "Forum", "Mikroblogi" wyszukiwarka jest czyszczona - czyli czyszczenie wyszukiwarki po wyjściu ze strony "Search"

Żeby to osiągnąć zrobiłem komponent SearchForm.razor, który ma w sobie pole input do wpisania wyszukiwanej frazy i po wyszukaniu przekierowuje do strony /Search/{fraza}:

@inject NavigationManager NavigationManager

<div>
    <input type="text" @bind="SearchTerm" />
    <a @onclick="Search">Search</a>
</div>

@code {
    public string SearchTerm = "";

    private void Search()
    {
        NavigationManager.NavigateTo($"search/{SearchTerm}");
    }
}

Komponent ten umieściłem w layoucie czyli w MainLayout.razor:

<SearchForm />

No i teraz mamy stronę Search.razor, na którą jest się przekierowywanym gdy się coś wyszukuje. Tu generalnie mam wywołanie API żeby pobrać dane w oparciu o wyszukiwaną frazę, ale dla czytelności pominę pobieranie danych z API:

@page "/search"
@page "/search/{SearchTerm}"
@inject NavigationManager NavigationManager

<div>@SearchTerm</div>

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

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        SearchTerm = ""; // ta metoda jest wywolywana po przejsciu na inna podstrone, ale jak zrobic zeby wyszukiwarka sie czyscila?
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

Jak mogę sprawić żeby input SearchTerm z SearchForm.razor, który to komponent jest umieszczony w layoucie czyścił się w metodzie HandleLocationChanged z Search.razor?
No chyba, że istnieje jakiś inny łatwiejszy sposób żeby zrobić wyszukiwarkę, która będzie umieszczona w layoucie??

Nie wiem czy dobrze rozumiem ale zobacz to

Pokazane są dwie metody zapisania stanu aplikacji. IMO, lepsza jest ta druga.

Najlepiej to zrobić używając cascading value. Ogranicz tylko jego zakres tak aby nie triggerował ponownego renderowania za każdym razem kiedy coś innego, nie powiązanego się zmienia. Wtedy resetuj SearchTerm nie lokalny a ten w przekazanym CascadingParameter.

Może być tak że jeśli zaktualizujesz to gdzieś niżej w hierarchi kompnentów to zmiana "magicznie" nie spowoduje ponownego renderingu. Wtedy jako stanu przekazywanego w CascadingParameter użyj obiektu (a nie np. samego stringa) i miej tam jakiś even do odpalenia, tak żeby komponent wyżej w hierarchi mógł zareagować na ten event i wywołać u siebie StateHasChanged.

Dobra, już myślałem że na stackoverflow nikt mi nie pomorze, ale jednak jest! :) W złym miejscu to robiłem :)

https://stackoverflow.com/questions/71110159/how-can-i-clear-a-search-input-when-user-change-a-page#71110507