.NET Maui Apps | How to search through Web API data list with Search Handler in MAUI apps.

hello dear developers aquava that is in my  language tree and it means welcome so you're   welcome to Let's code half Channel you know this  channel facilitates a lot of dot net lessons and   projects and talking about single lessons for  Blazer server app and net marry so check the   playlist and we have a lot of lessons for you also  if today is the first time of watching this video   from this channel they need to check the playlist  as well and don't forget to subscribe too if you   watch the video and you're okay with it give me  thumbs up now let's go to today's topic today   we are going to talk about how to create search  Handler in cell in our application when you create   application to handle a lot of data definitely  you must have a search mechanism to handle that   if a user decide to search for a specific  item you must be able to do it we're going   to have a look today with a simple application a  simple project for this lesson so make sure you   have installed a visual studio you'll be 2022  preview or 2022 stable one and let's create a   new project here so click on the file and now  new project and you know we are going in for   net marry click on nest and here I'm going to say  that demo and here we're going to search Handler   click on the create and the lesson is you choose  the target framework you have 8.0 and 7.0 will go   for 7.0 and we click on create to get their  project created now when this project gets   created we have to install some negate packages  and there are two packets we're going to install   first one is the community toolkit Dot mbvm and  we're also going to install mbvm helper now why do   I have to install the two packages the first one  is how you're going to code that's a coding style   the mbvm that stands for modifier view model and  the help has gonna allow us to add range replace   range in the collection view because you know we  are going to have a lot of data in our collection   view so instead of looking to the data to add it  to one after the other we can use a range and do   it one to optimize the code that is why I want  to use that let's install this packages so right   click on dependencies and I'll go to manage naked  packages so under browse tab we're going to pass   in community2k.mvvm so we have the list over  here let's install the first one so you can   see by Microsoft the stable version is 8.2.1 well  let's install that aside from that we are going   to install the helper let's accept it mvvm.helper  and that is this by James so let's install this   package as well we can now build the project to  see so our package is now built and this is what   we're going to do we are going to derive a product  data from an API I got this one dummyjson.com you   see we have this product here and I want to make  a query this is what we have almost about 100 data   as for product so that's what we are going  to do let's create a model for that and at   this mode we're going to use this so ID title  description price discount percentage rating   um stock brand category so let's maintain this  now for thumbnails and images maybe we can do   that later on let's grab this and now let's go  to application so here let's create a folder as   models so create a folder here models and now in  this let's create file core product we're going   to say product and now this product you're going  to have the following properties that we copied   public class we have product and this is what we  copied so we can paste them here so we can know   what to do now prop we have our inks and this is a  product ID you're gonna have the next one so p r o   p that's the property the next one is string and  here it is giving us title that's product title   the next one you can have let's copy this and  make the next one is through that description   so let's paste so let's this title  now we have here as description now you have here as price and  on this price here we can use double and let's set this as price   we have discount percentage so let's copy this  and this is double two so discount percentage   we have rating now we have stock so  stock is integer so let's make stock the next one the next one is  we have brand so that is string and now the next one you have category so that is also a string category and the last one we have thumbnails so so  this is going to be string okay so we can now grab or cut this now that's what we have for product so let's  save that and now let's create our view model   so right click on the project go to add the  let's add the folder here and there's going   to be view model so with this view model let's  add a class so we're going to add a class here   and we're going to use this for the main page so  let's say main page view model now with this main   PhD model this that's going to be so it's going  to hurt from that is observable objects instead so and that is coming from the package that  we installed that is this community toolkit   so we can just cut this   and I put this here the reason why I made this  I'm making a the reference here is we installed   two packages now the first one the helper contains  observable object too now this also contains it so   let's specify here before we have an ambiguous  exception and this might be public partial class let's create a Constructor here  now there's also one package that   we need to install and that is the  extension so we have to install let's   go to the same place again and let's  install that package so it is http so extension dot HTTP so  let's install this package two okay so it is we are good to go so  let's continue with our view model   so here the lesson that we're going to do here  we are going to create a service to get the   data from the API okay so let's see let's go to  Let's create a folder here so add a new folder   and now we're going to say services let's add an  interface and implementation class so a new item   then interface and now this is i product since  you are doing it for product so let's make it   I for that service instead so I product  service then let's create for let's add a   class and this class is going to be product  service so the class and I will say product service now this is going to inherit from i product  service so you can generate a Constructor for this and now in here let's inject HTTP client control  period let's create an assign field so we can   initialize and use the http okay so let's create a  method in this and now here is going to be public so this public we don't need all this so  you can just clear this to optimize it now I'm going to have task and this is  gets products this is going to be a list   of products to control period let's include  the models so we have this let's close this   now let's go to implement the interface well now this is what we have so we're gonna  say products is equal to last one await   then we use the HTTP dot get a sink  and are in here we are going to create   let's say response yes equals you then you can  have this product coming in so that's content so products dots last week so let's go for the  API first nowadays the API so let's grab this   and now let's go to application and in here  let's paste it here then you're going to say   product dot content dot read from Json from Jason  async let me say list of products then return response okay so we have this  and now here must be an await   so we save this now when we run this  you're going to have the data stored   here from this response that is a hundred  data now when we come to our view model   let's inject there so I product service and  I will create an instance we initialize it okay now here to let's create public we say observable observable range collection let me say product so product control period let's include this  model and now we say this is products then here you're gonna have get  set we say security new now in here   we can just create LS or maintain what  we have here now we have this product   so let's create a method in here so we're going  to call the method let's create a method here   so you have the method definition bring it now  when this page is called we want to call this   this the method that we're going  to create and that is gets product from API so control period now let's  generate a method for this   and that is this method so in  here we are going to call product is equal to I wait product service dot gets products then we check if product is not equal to now then we are  going to say this product that we   have here the product list dot add  range then we pass in the product okay so let's make here double so products okay now so now once you have this maybe  we can just say something on top here   so we say if this product dot count this for that dot counts is greater than zero   then let's clear the container first  before we add new one so dot clear so Ctrl D we format this now what it is doing  so here we are going to install the data from   the product from here now we are going to say that  we're going to first check is a container having   some data already if he has cleared them get us  a new container then I'll add the range to the   current one because you know when the page loads  at any time I'm going to call this method okay   now we are done with this so let's register this  in uh program.ca so we copied this then we open   the Mario program so we say Builder dot services  dot R transient then we're going to pass in this not in here control period let's  include the link the reference   we do same to its view so that service dot  R transient another is going to be main page now let's include the so Builder that  service dot add http so I product service then you're going to use product service now  let's inject The View model to eight view so   that is the main page so the code behind file we  are going to put it here so let's comment this and these two so in here we're going  to say that main page view model then let's buy the contest so binding contest   is equal to this main page view model now  let's go to the main page and now here let's commented this Ctrl k let's comment to this okay so once you have this let's create a collection  View so you have a collection   View and this collection View  you want to have item source so item Source but before this can work  in our main page we have to specify this range collection here so you can have your  product so let's let's move on now the item   Source we're going to talk about binding and now  we'll go for you must have the products here the   reason why we are not seeing this we have to add  a name space and a data type so let's do that XML   and S namespace so let's put here as view model  then we say CLR dot name space then we say demo searchhandler.view model so this is it   none here let's specify the data type so  view model dot main page view model so from   that let's also specify the view model or the  model so we say model is equal to CLR namespace then we are going to use  demo dot models okay so here   we have this now as soon as we click on space  you see we have products here we can use that now aside from this we can use  collection View dot item templates so item templates let's see that is this one then  in here we can have data templates   so with the data template we can have X  data type and now here you have to specify   the models Dot and now here we're going to use  this product model then in here we can specify   frame so frame for this and maybe you  want to add only the name of the item   and the image so in the frame we're  going to have horizontal stack layout   then here you're gonna have the first one  is an image so this image you have source and the sauce you're going to  bind it to that is a thumbnail   okay so you have this thumbnail here and  let's also do same to you let's add label   and now on this with a test we're  gonna know this bind this to um title okay so with the horizontal  layers let's do spacing and let's say 10. let's change this um properties here I want us  to use a simple one so you want to use ID title   description price category and also image and  now let's go to you want to use this API instead   so fix toyapi.com so this is what you want to  use so let's copy this or let's replace this   all right now let's build  application and see so restart this all right so let's go there now here's supposed  to be image so this is image let's do it again   all right so you can see we have the image we have  the data but the image images are too big so let's   as you can see let's make them so we come to the  image size and we set the weight request to 50   and also Heights request to 50. so let's see if  this let's run the application again all right so   you can see we have our products here and that is  exactly what we see here so that is a product okay   so now this is what we have we want to implement  sets here so we can set this product now let's   see so let's add first a folder and I'm going to  make it as maybe Handler so and so let's stop this and let's me let's name the folder as Handler  so let's rename this so we have handles   now once you have this folder created  the next thing that we are going to do is   we have to create a class in it so let's add a new  class and now this is going to be product search   Handler so this is public and aside from that we  have to inherit from this set and search Handler now they say Channel we have to create a list  so let's create a public and that's an I list so we pass in our product   control period let's inject the reference then  we say this is product here they can have access   so let's have let's overwrite this method on query  so on query change then in here we can now check   so string Dot is now or y space  or you can use a snap or empty Okay so or you can use string Dot is now a y  space so we are making a check of the new value   so let's pass in the new value so with this  we want to check the new value coming in so if it is now or if it is now  then you want to so let's do this   you can just make it something  simple then return item source items as equal to nah else we  can just say that item source   is equal to the product that we have here the  list of products dot let's make this query so dot   where t must you see Dot and now here we want  to use title okay so the title dot U lowercase   dots contains new value to lowercase then two  lists and aside from that we also have another   method that we can ride on and that is answer item  selected so override on item selected so with this   we work on this later on let's go in the Implement  what we have here in the page so we navigate to   the main page.xml now on top here we can specify  tell now shell dot you can have a third Handler   so this Handler let's specify this but  before we pass in this cell Handler we   have to make sure we have included  this Handler folder so let's come to   and let's add namespace so we're  gonna say search search Handler then namespace then that is demo search Dot Handler so  that is this handless and here we can specify or   we can now use the Handler or the name that we  specify so in here let me give you a space here   so in here we can say that search Handler that is  this one and we can use the name of the Handler   that is a product search Handler and here  we can have a product so this product   is equal to Let's specify X resources so static  and you want to use the view model that we have   and aside from this view model we can  have copy this we come to the view model   and here we're going to paste it here like  that they're going to say dot products   because when you go to the main page view model  we have product over there let's see so we see we   have products here so that's this the one that we  are referring to so we do that in the main page as   you can see from here so let's close this now the  next one that we can perform or we can add is we   can add member now you can add display member name  so display member name and now which one do you   want to display that is a we have title so we have  to pass in the title and we can grab that from   this product so which of these so that is a title  so let's copy this title and to the main page we   paste it here meaning we want to display the title  when you make a set there okay now with this let's   run this and see so we have an exception here and  it is saying unable to find a public or accessible   internal static field or property right so in the  view model main page view model so let's select   that okay so here MLB public static all right  now let's run again so you see that the app is   now loaded but we are not seeing any display here  but let's try to pass in something like f you can   see we have that list over here if you pass in  a we have the whole list that contains what a   but the reason is why are we not seeing it here  when we go to The View model you could say that   we set this as static we can decide to make a  copy of this and now we paste this so there's   going to be product and now here we can make this  a search product so search product and instead of   making observable we can make it as just list  so a list of products then there's going to be   static we can remove this one so this product that  is what we are adding so let's make some Amendment   here so when the county is greater than zero then  clear that and we can also do the same thing to   this so when this that is search product so when  search product dot count is also greater than   zero then clear it that is when we have a new item  coming in okay and if the results coming here is   equal to now then prayer dot product we are going  to add a range and also this size product at the   list we also going to add range so let's see if  we can add range here so product okay now let's   save this now let's run this again so when we go  to our main page we're going to specify this as   search product so the search product and that is  going to maintain as products so on the static and   when you go there we have size products as static  search products static okay let's refresh this so   you see that now we have the data over there now  let's try to search and see so see we have the   pop-up as well now you see this is very nasty you  want to format this there are some few features   that we can also add let's go to the main page  here the next one is within here we can add let's   say sure result so sure result let's set this to  through you can also specify query icon and ask   if you have query icon and we have clear icon 2 so  clear icon now if you check my resources my images   I have these two SVG files here so query I'm going  to make a set so search icon and we'll declare I'm   going to also make it as cancel so they are here  so now let's see now so let's see we can also   add such visibility we have set visibility  box and now with this box you can decide to   make it collapsible or expanded so defaultly it is  expanded as you can see from it is expanded so you   can make it collapsible so let's see what we can  do here collapsible to collapse it and we can talk   about placeholder so set products and maybe that's  what you want to pass in search product so now   you see that from here the the button or the box  here it is off as soon as I click on this button   we have this search box and you can now pass in  the text that you want to display or you want to   set so you can see we have all the things that we  need okay it's as I click back you see I have this   search indicator icon over here okay now let's  see so if I choose this if I make a search and   if I click on let's say the first one what should  happen also the format here isn't nice at all so   can you format this yes we can let's see how to  format that so let's come to the template here and   now in here we can specify data template so let's  say first search Handler then product Handler dots   item template so within this item template we  can now use let's copy this one and now let's   paste it here you want to use frame and you want  to bind the name over here so you see that we are   adding the image and also the name now it is  saying that the property item does not support   um this does not support frame yeah it's one  because we forgot to specify data template so   let's do that data template and now you can now  paste it inside data template also with the Exeter   type we have to specify so the models dot product  now we have this so let's find this and see what   we have now so let's click on the search button  and now you can see we have to indicator the icon   here sets the name is what search product and that  is a clear icon and also the query icon it's not   surpassing something like this I have the declare  indicator and we see we have all the images   displayed nicely okay so if I click on this what  should happen so if I click on this button like   this I want to navigate the whole data into the  next page and I'll view the whole thing how can we   do that let's see how to go about that so what we  need to do here is to create a view model so let's   create a view model here and this is going to be  a product detailed view so product details view   then let's add a model now aside from  that we have to also create a view   for this product detail so right click and now  add new item and Dot net Mary we go for the   content page and now here is going to be product  detail so product details let's bind the view to   this product detail so let's go to the Predator  code behind file and now in here we say product   detailed view for that details view model then  we say and we have to bind or binding contest is   equal to this Predator view model control period  let's add that okay so now we have this we have   to go to the my program.cs and I register there so  let's copy this one and we cannot make a copy of   this and paste and I'll change this to put edited  view to product latest view model then we can have   the product details here so product details okay  so we have this now let's go back to we have the   Predator view model and we have it here let's go  and make this public partial so public partial   class also let's go to the product page now let's  add the namespace and also the model so XMS we say   that this is view model and CLR namespace and  here we're going to say demo search Dot View   model and we specify X data type as view model  that was product detail view so let's build a   view here to get the data so let's go to the main  page now here we can go in and grab this so this   Frame let's copy this go to product detail now  let's paste that in here so let's copy this here   now you can now paste this so you can put this as  stack layouts and now we specify like this okay so   we have image that is the first one and and the  products you we can have the title and the price   and Etc so let's let's do that so the first one  here is going to be like image and I believe here   we can use let's first five is here so we say here  is image then the next one it's going to be image   so you can just make a copy of this then we say  product name let's use something like this so and   here will be tighter and we can make another one  as price so price here and let's set this to price   so let me check our model as a product we have ID  title description price category and image so we   have this uh description and also category left  we have the price and image so let's finish that   you can just copy the same thing then maybe we  can paste it and one more so it is going to be   category and now here will be category and the  last one description and this will be description   so we now have this now what we're going to do  here is let's go to our student view model and now   here this has to inherit from observable objects  and now inside the observable object we are going   to create product then we say product so with this  let's set observable property against it so we can   have the public variable let's go to the upsell  initialize this let's register route routing dot   register route and our name off so the first one  here is the products detailed then type off so   register route now here must be bracket first so  we have name off and now type of and let's pass in   the same product details okay because you're  going to click and it has to send us to that   page so let's go to the Handler and update here  so here let's specify navigation route so prop   and now he has gonna be strength and I will say  this is navigation route so we have the set and   get access so from that we come to this side and  now we have to make a check so if let's specify   this string or we can say that if string is now  or empty so that's the navigation route okay and   we can also check uh if this string is not now a  y space so let's use it is not the opposite one so   if they are not then we are going to continue so  we let's create variable as navigation parameters   so navigation parameter is equal to let's have  let's create a dictionary so new dictionary off   in additionally deals with um a key and a values  and now this object we can open this and specify   let's say this is product details then what is  the value it is this item coming in so when we   are done doing that we have to close this then we  can call a weight cell dot current dot go to async   then let's specify the navigation route so that is  it so let's go to the product Details page and now   in here let's specify that is a main page rather  so in here we have to specify navigation route   another navigation route here is it's going to  be product detailed view details so that's it for   that details because that is a Content page that  we have created here product details so there's   a navigation route that you want to navigate to  so you know when you navigate with a parameters   with object parameters we have to accept it so  we can accept it in the productive model and on   top here we have to use Query parameters to accept  it so we say that query property then name off so   what is which name are you going to use that is  the student details so that is a product detail   so let's pass the product details here so product  details and now what is your query ID query ID is   let's go to the search search Handler another is  an ID so let's copy this and let's come to product   detail view model and then paste it in here so we  have this object to display now let's see when we   go to the product details we have to get this but  before we can have that we must add product dots   then we can use the image so let's first check the  Predator view we have this product so this must be   product like this so control period let's include  models good now you go back there and now you can   have image attached to so you can just grab this  and now title price category and description so   that's what we need to do so this must be in  vertical layer so let's grab all this now let's   make it vertical layout and let's paste this year  let's run this application and see the output all   right so the page is now loaded now let's see so I  have on here the list as you can see already click   on the search button button and now let's try  to search something like f so I want to search   for men's casual premium slim fit t-shirt so if I  click on this it has to navigate me to the student   detail page but if you see it is not happening  here so let's figure it out okay so let's check   now let's go back to the product details view  model let's see so we have the products here   and the objects property all right so I believe  you've seen it already so you're supposed to be   product then we have this so that is less now  let's run this and see so let's refresh this   now let's make a set so I'll pass in s so I want  to see for maybe Samsung this TV yeah so see back   check the image now let's format this one so  let's go back to the product detail and here   you don't want to grab that image name so there  is an image so let's cut this the sauce must be   binding then we're back to this oh okay so you  see we made your image image image so instead   of label you made it as image so let's clear all  this let's copy this now let's so here is going to   be a name and now this we're gonna have us the  same type price so let's add this as price and   this category the resets here to category and um  last one that is description so the description so   that is now let's run this and see so let's  set pattern of this so we have all this and   there in the frame so we can have pattern maybe  10 in this now let's run this and see so let's set   now passing s so John Hadi so click on this like  because I have the image over here I have the name   the product description and everything so I can  just go back and now let's search for another one   so server dragon and I have the ring two and now I  have everything the description too okay now this   is very cool so let's see now the next thing to do  is you're almost done but if I click on these two   I want to navigate to the same page okay so let's  do that now let's go back to the main page here   and what we have this we have to add so in here  we can have frame then you can have maybe inside   this Frame you can have frame dots um guess I've  organizers then we can have tap yes uh recognizer   okay so with this we can have command and we can  specify command parameters too so the parameters   is going to be binding Dot and now let's go for  the command so we go to the main page so we can   just go to this place and you can grab this so  let's go to the main page main page view model   yeah and now in here let's specify maybe public  and this is async Task so let's say details then   we can let's paste this here and this is coming in  with product and you create an object as product   so in here you say a product it cuts you you can  use its product is now then you want to retain   else they will create a navigation parameter like  this dictionary and now this object and now we say   that this product it is the object here we are  ready to go to name so name of now this name off   is going to be the product detail page so product  detailed then you're passing this parameter as   well so now let's refresh this and see now we have  an error here we have to bind this so let's go to   the main page and here binding so before that  let's put this as relay command and now in   the main page you can specify this as binding  then details command Okay so sorry for this I I   commented this for a reason we we talk about this  when we are done with this one binding source so   it's called to relative Source then you're gonna  have ancestor type so this is ancestor type I'm   gonna have x view model I'm gonna have main page  view model so after this you can specify the path   where that command is and the path is detailed  commands so detailed command so that is it that   is your command that you're going to use okay so  I think all sets now let's build this again all   right so let's click on any of these so men's  cutting jackets and let's see if it's going to   navigate okay so it is not navigating let's find  out so when we check our code you can see that   from here we omitted s let's press it so let's  click on this and see now okay so it's going   to hit this then we navigate and let's see so  we are in so let's take off this let's say the   second one so we are in here we go back and we  can check the solid good you can see we have it   so let's go back as well next one and you can  see it is navigating now when we make a search to   let's say this is good so we want this ring jacket  and you can see we have this rain jacket here   now let's add indicator so when it loads if you  want to start for the first I want to get the   indicator over there so now with this let's add  a collection view here another collection view   that's activity indicator yes and let's have  maybe color as red then we can have is running   is running let's set it through unless that  is visible we're gonna set this to binding is busy so let's see it's busy now let's go  to and let's set margin so imagine is 50.   let's say 200 and um let's see 50 50.  you want to be in the middle so we set   up to 200 side 50 side 50. then he  said this so let's make this 20 2020 okay now let's maintain  this and let's go let's see   how we can make this as hundred yes okay  let's go to the main page view model   so this must be void so let's first check  now when this products when this method   is called you want to set it's busy to  true so let's create boo then we say it's busy then let's set observable property   on it so in here when this product is loading  we say that is busy records it through now when it's loaded you want to say  it's busy equal to force equal to force   now let's save this so let's go back to the  main page here and now let's set we have set   it to it's busy already so it is saying this is  not found let's see did we save it here main page   it is save that the app is busy and that is  this one so let's go back again and let's set   okay so let's paste this here and let's run the  application so let's restart it so I could see   that it is they have the indicator as soon  as the data comes in then it is off now okay   so now let's talk about the sets you can see  from here if I type in the this format is   ugly because I commented this now if I bring the  the problem was from the frame so let's take off   the frame now let's uncomment this and see  so let's save this and unless we fresh it   again and see we have our indicator loading  when the data comes in then it is off now   okay so we have this now let's see if I click on  this it navigates me to the detail page now let's   see with the search so if I type on G to get good  I could see now it has navigated as to the page   let's get again so the and now here I could see  the format here since we are not using the frame   this is a format that we have so let's see  if we can have a different format for this so let's take that one off and let's  set this let's set margin to maybe 10   okay now let's save this let's refresh all  right so let's see now I'm going to pass in this   and I could see this okay so we have a  nice one the image and also the the title   if I click on it it navigates us to the page  all right so I'll put this uh project at the   uh get up I'll leave it under the description  so you can just grab the source code about   there that is it for this video thank you  so much for watching if you like what I'm   doing please give me thumbs up subscribe to the  channel as well and I'll catch you up next time

Channel: Netcode-Hub

Views: 1,407

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, desktop app, create app, android, apk, applications, MSIX, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key, context menu, navigation service, nivigate trough content pages using navigation service, How to use Font Awesome in NET MAUI Mobile and Desktop applications., fontawesome, icons

Id: 0WSJFvyfvO0

Length: 50min 39sec (3039 seconds)

Published: Fri Aug 11 2023