Wenn ich eine neue UI bezogene Developer Technologie prüfe, versuche ich immer eine Reihe von UX Mustern (nicht zu verwechseln mit Design Patterns) zu lösen. Also ein Baukasten, der die Anwendungsfälle optimal in Bezug auf Implementierungsdauer, einheitliches Bedienkonzept und eben Plattform nutzt.
Im Web bin ich ein Fan von Status per Url. Also der Suchbegriff steht in der URL und füllt das Eingabefeld. Man kann sich Bookmarks setzen oder jemanden einen Link schicken.
Dieser Blogartikel zeigt wie man mit Blazor elegant eine Suche in einer Liste darstellt und codiert.
Um Urls zu verändern ohne JavaScript einzusetzen, nutzt Blazor ein Objekt am Dependency Container, den NavigationManager. Den fügt man der Blazor Page per Injection hinzu.
1: @inject NavigationManager NavigationManager
Um die Url Parameter oder Querystrings auszulesen, kann Blazor eine einfache Bindung Syntax nutzen. In Kombination mit dem Routing eine wahrlich einfache Aufgabe. Die Zeichenkette hinter /Search/, wird automatisch der Variablen Suche zugewiesen, da mit Parameter versehen.
1: @page "/adressen/managed"
2: @page "/adressen/managed/search/{Suche}"
3: ....
4: [Parameter]
5: public string Suche { get; set; }
Den Parameter Suche kann man gleichzeitig an das Input Element binden. Wenn der Benutzer die Suche per klick auslöst, wird in der Methode onsuche, die Url geändert und die Daten gefiltert.
1: <div class="input-group">
2: <input ID="suche" class="form-control " @bind="Suche" />
3: <a @onclick="onsuche"
4: class="input-group-text btn-secondary ">
5: <i class="bi bi-search"></i>
6: </a>
7: </div>
8:
Seitennotiz: da Blazor 6 auf Bootstrap 5 setzt und dieses UI Framework nicht mehr die FontAwesome nutzt, kommen nun Bootstrap-Icons zum Einsatz.
Achten sie auf den 2ten und boolschen Parameter bei NavigateTo. Standard ist true und löst einen Reload aus. Wir wollen aber nur die Clientseitige Routing Engine von Blazor nutzen.
1: void onsuche()
2: {
3: if ( Suche !=null && Suche!="")
4: ....
5: var query = from k ...
6:
7: PageTitle = "Firmensuche für " + Suche;
8: ListKunden = query.ToList();
9: NavigationManager.NavigateTo($"/adressen/kunden/search/{Suche}",false);
Damit beim direkt Einstieg per Link in die Suchseite auch die Daten kommen muss onsuche noch aus dem Ladezyklus der Component aufgerufen werden.
1: protected override async Task OnInitializedAsync()
2: {
3: onsuche();