How to add search functionality to dotnet maui application?

I'm creating a small notepad app by using dotnet MAUI. I already created CRUD functionality to the app. Now I want to add a search functionality to search notes.
This is my code that I used to get notes.
[ICommand]
private async void GetNoteList()
{
var noteList = await _noteService.GetNoteList();
if (noteList?.Count > 0)
{
Notes.Clear();
foreach (var note in noteList)
{
Notes.Add(note);
}
}
}
And I try to create the search functionality
[ICommand]
public async void NoteSearchItems()
{
var noteList = await _noteService.GetNoteList();
var searchedName = noteList.Where(value => value.Description.ToLowerInvariant().Contains("searchForNotes")).ToList();
//Clearing previous notes
Notes.Clear();
foreach (var note in searchedName)
{
//add Notes searched to List
Notes.Add(note);
}
}
And this is my UI
<SearchBar Grid.Row="0"
Grid.Column="0"
Margin="0,0,0,10"
x:Name="searchForNotes"
SearchCommand="{Binding NoteSearchItemsCommand}"
Placeholder="Search notes..." />
<CollectionView Grid.Row="1"
Grid.Column="0"
HorizontalOptions="CenterAndExpand"
ItemsSource="{Binding Notes}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:NoteModel">
<Border Margin="0,0,15,5"
Stroke="#696969"
StrokeThickness="2"
Background="#f5f5f5"
HeightRequest="200"
WidthRequest="250"
Padding="10"
<Border.StrokeShape>
<RoundRectangle CornerRadius="2,2,2,2" />
</Border.StrokeShape>
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:RelativeSource
AncestorType={x:Type viewmodels:NoteListPageViewModel}},
Path=DisplayActionCommand}" CommandParameter="{Binding .}" />
</Border.GestureRecognizers>
<Label Text="{Binding Description}"
TextColor="Black"
FontSize="14"
FontAttributes="None"
/>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
But the search functionality is not working correctly. I need your help.
Thank you!
Thank you! Sir. For your valuable time.
This is my model class. I named this as
"NoteModel.cs"
namespace NotepadRVG.Models
{
public class NoteModel
{
[PrimaryKey, AutoIncrement]
public int NoteId { get; set; }
public string Description { get; set; }
public DateTime Date { get; set; } = DateTime.UtcNow;
}
}
I defined "Notes" in my view model
public partial class NoteListPageViewModel: ObservableObject
{
public ObservableCollection<NoteModel> Notes { get; set; } = new ObservableCollection<NoteModel>();
Further more I attached my Services files, view model and UI for your reference. If you need more I can provide you.234854-notelistpageviewmodel.txt
234828-noteserviceclass.txt234892-inoteserviceinterface.txt234904-notelistpagexaml.txt
Thanks! Again.
I added the code to my sample, but there are several errors.
Microsoft.Toolkit.Mvvm.Input
in theNoteListPageViewModel
is not found in MAUI, and the search command doesn't work. Do you use any nuget packages?In addition, I added 6 items to the collection(
Notes
):then I changed the search sql :
and search the Note:
this.NoteListPageViewModel.NoteSearchItems();
, it works. Only one item is displayed in theCollectionView
.You can check that you have set the correct binding context and check that the data contains
searchForNotes
in the database.May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.
Sign in to comment