.NET Maui Apps | How to scroll through API data without ending in Collection View (Infinite Scroll).

hello my dear developers welcome back to this  channel you know this is net code Hub channel   we facilitate lessons on.net Murray applications  and that is a desktop and mobile applications and   also Blazer webassembly and Blazer server  lessons both projects and single lessons   so if it is the first time of coming to you  or watching this video from this channel   then check our playlist because we have a lot  of good stuffs for you for dotnet framework   okay now this video I believe you know what you're  gonna do today and that is we are going to talk   about how to implement infinite scrolling  in.net my applications using collection View   now before we dive into this with a practical  aspect what actually is infinite scrolling do   you have any idea on that according to google we  have a simple definition over here and that is   infinite scroll it is a technique  that allows users to continuously   browse their content page without  seeing any finish line or button   that's simple so it allows people to scroll  through pages there's no end they keep going   I hope you've been using Facebook YouTube all  these applications have this in finite scroll   and that is what you're going to do today so you  know something you're going to have an API that is   a dummy API for test we're going to get data from  this API and that's what we're going to be using   so I try to Surf online to get some damn API  so it will make this lesson easier now I got   this three apis we have the product API and we  have the dummy Json or so so all this this is   and for product and also this also for product  but I got one here that is a jsonplaceholder DOT   um type your code.com and we had this like a  to-do list so I wanted to get a whole list of   data so I have this and as you can see it is from  id1 up to you the last one and that is almost um 200. yeah so 200 data is enough for this  particles so let's start let's kick start by   creating the dot net marry our project so  launch the visual studio and that is what   I have now I've created one already and that  is a empty one so if I run I've already done   bit before and that is what you see here nothing  but I know we have to install some nuget packages   and that is what you're going to be using  we have to use the committee toolkit.mbvm   because that is a star that you're going to  code with and also we are going to install   the same Community helper another refactor.nbvm  dot helper so let's install this packages where   we start to use you're going to understand why  we install these packages so let's right click   on dependencies so you know here you have to  install this first I've installed this already   as you can see we have community 2k.mvvm so you  have to install this then let's install one two   so right click on this then go to manage nuget  packages I have to stop this before you know   it's going to run so I'll click on this managing  to get packages then the page opens so we're going   to make a set here to install that package now  once you're here just type in community 2kmvm and I have installed that already  so I'm just showing you where it is   to install okay so that is this one  you can see I have this green mat   checked let me set this installed  now we have to also install mbvm helper so and this is what you want so  refactorate dot mbvm helpers by James   so we have to install this let's accept so it is now installed so you can see that from here it has changed from  install to uninstall meaning it is successfully   installed you can close this now if you  open the packages you can see we have dot   um connect vvm and we're going  to have the refracted dot mbvm   helpers so these are the two packages  that we are going to be using today   okay now the next thing I have to do here is we  have to create our folders for this you know when   creating projects or lessons you have to organize  your project or your code well so it is better   you create a project or folders to put them in  and now make your source code presentable and   also readable as well so let's create a folder  and I'm going to create this one so here let's   make this as views that's we're going to keep  our views we have to also create another one and here is going to be view  models and let's create another one and this one we have our models  and our let's create last one and that's going to be our services you know  as soon as we are getting data from API we have   to create service to get that right and that  is what exactly what we are going to do here   okay so in our views we have our main page already  but you can decide to keep the main page or try   to use the other one so maybe let's use the main  page because that is the default one already and   not only you have any views again you're going  to have only one so let's clear this view rather   okay this is set to default page and that's  done in the upsell Dot CS so when you check   the app cell that example file you see we have  set as for local to main page already okay   now the next thing that we have to do is let's  create our service so our server is not going to   get from the database but that's from the API  so let's right click on Services let's add an   interface so add an item here and now we're going  to choose an interface and here you know the API   that we are getting is to do so we're going to  say I to do so I to do okay so I to do service   and now let's create the implementation class  so we're going to say this is to do service   to do save it let's right click on the models  let's create a model for this so this is to do   now what are the properties that we're  going to use here so let's set this to so this is public class to do and now in here  let's see so let's check our API first now is the   ipis user id id we have title completed so we want  to grab this now these ID is number this is number   title and completed is also what this is bull so  let's see is an ID we can just copy one like this and in here in application let's  paste this year so let's have we have this we go for this user ID so if I have ends ID and now we do same so end and  this is user ID and we have   the next one here at a string and the string  it is tighter and on the last one here That is bull and it is completed so we say completed so let's clear this so we are done with our  model now the next thing that we have to do   here is let's use this model in the service so we  go to the I service and now here you know we are   getting the list so we say task and that is a list  of to do because you want to get a list of this so not to do service rather to do so  let's include this model and we say get to this so let's get this so this only one that you want  from here now let's create   our let's go to the implementation class and you  know what we know you have to inherit from this   interface so let's inherit from that and a control  period we have to implement the interface and   that's a list of to do okay so now we have this  you know let's create a Constructor so that we can   inject HTTP contest so generate Constructor for  this and now in here let's inject HTTP client so   you create a an object then a control period let's  create an assigned field not property so take note   we assign field so now this we can use this HTTP  client over here now here so let's make this let's say this is should we  get like let's use resource   is equal to HTTP client dot get  async and now here we have to pass in   the URL so let's go to the link and then  there's the list so we just have to grab   the whole thing like this and I will go back to  page here and I will pass in in double quotes okay so here we're going to let's check the  response so let's say response is equal to results   we don't want to use result.resource so result  Dot before you use this result let's have an await   so even here we have to call and await as well  so I wait then you go for results dot content dot   read as you want to read as read from list read  from Jason they sing by passing the list of to do okay now we just return s so let's watch we are doing so we have  the response here now let's go to our view model folder so let's create a view model  here so add class and this class is going to be   main page view model the reason why I am giving  it main page view model is you know view models   are have to be bound to the content page so  normally we want to use the content page to   name the model so it becomes easily for us  to identify and now link them so that is why   I'm saying that the model I hope you get it so  let's add this view model and now you know here   it must be a public partial class the reason  why is the inheritance that we're going to do   it must come from this okay so we have to it  is it is a class already so we are creating a   part of it it's control period we have to use  this then let's see so we have to call this so let's call this instead like this and now let's  take off this the reason why I am doing this is   the package that we installed that  is the help also has an observable   object so if you don't specify the type  of observable object that you want here   you're gonna have an ambiguous exception because  you have two observable objects and the system   might not know which one to use so that's why we  specify this year bias adding the reference here   okay let's create a Constructor  here so generate Constructor   and now let's inject the interface that we  created so that's what I to do service and I   received to do service control period let's create  an assigned field so we have this field assigned   now when page loads let's say let's add load  to do so load this now let's create this method so introduce or create method for to  do now in here we have to create public now here we can use observable range collection observable range collection the  less person to do then we say to this then get set because you knew   of double range collection to do now they're  saying something is because it's less accessible   than method and how to do service so let's  check it this service and here it must be public let's save that let's check the  service to and it is public as well okay now let's go back to the model and it  is solved now okay so the reason why we are   adding observable range collection is now you know  when you install the community2k.nvm it supports   observable collection and here in case we get data  from the API when is in the collection we have to   look through by using the four each and add it one  by one to the list here it's going to waste time   so that's why I'm going to use this helper now  this helper you can use add range replace range   and a whole lot of stuff in this so thanks to  James Montana Magno who created this package and   it's very helpful as well now let's see so we have  this now we are going to call the service here   so let's see what we can do but before that  let's pass in let's say and you have a page size so page size let's make it as 20. so that's our  page size and now in here we're going to have less crates so results is equal to we have less store let's first create   at least here so we say VA or we  can just say that list of to do so equal to let's have to do that the  to-do list records you new so yeah we say that to do list records you await now let's call this to do  service so to do service and you can have a   method known as get deuce so we get this from  the API so we're going to get all data from the   API and I'll store it to this list now when  we store we have to get the page size and I   assign it to this range so that's what you're  going to do we're going to say that to do's   dot add you can use this range now this range  we are going to say that to-do list Dot skip   so initially the Escape is going to be zero right  so let's keep here we can maintain zero or we can   collect even the escape from it because initial  one there's no skip value so then let's use dot   tick so don't take how much or how many that  is the page size so you pass in this page size okay so that is what we are adding now we store  the list locally into this list over here then   we are taking 20 out of this and now assign  it to this range that is it now after doing   this the next thing that you have to do here is  we come back again to this let's register this   into the view model and the service in the  program.cs file so we say Builder dot services   dot add so let's add transients because you're  going to be adding so main page view model so that is this one and let's add it to its view as well so  Services Dot R transient and that is a main page so the reason why we're adding this transient  is anytime that you want to call this we want   to create a new instance because a new data  could be called so we have the default one   as 20 and the next button is clicked or  when the next call is made it's going to   add another 20 so it is no more 20 Again by  around you're going to be 40. so we have to   create transient so that it's going to create  a new instance to update the data anytime it   is called okay so that's why we have to use  this now aside from that we have to use the   the interface that is a service so  it add builder.services dot add http so let's say the services.http client but before we add this we have to install  a package here so let's say that add http then click on iTunes I to do  service then we say to do service now let's see with the HTTP client   we have to install microsoft.extension so let's  install that package from the nuget package   so right click on dependencies and manage and  get packages so here it is microsoft.extension so let's add extension this  extension to search for that so we need to install microsoft.extension.http  so let's install that too so we apply and we accept so it is saying that I service collection does  not contain add HTTP client so let's go to the MRI program and so now  it is it is now installed   last second over there from this Mario project.cs  file so you can see it is now it is solved now so when you go to dependencies and packages  we have the extension.http installed over here   okay now we can close this peacefully all  right now after doing this what's the next   thing let's bind this view model to  this content page so we go back to   let's close this we go back to you the main  page that code behind file and that's the   main page of xamar.cs and now in here  let's bind this as main page view model then let's bind the context  so we say binding contest this records you this main page 3 Model we  save that so let's go to the main page itself   and now let's add the models and also the data  type so demo Dot we have to use view models   and I specify the data type here aside  from that let's specify the model so xlm XML and S like summer namespace so we're going to  say that we want to get more doses equal to so CR   Dash name space and now we are going in for demo  dot models so that is what we have here so with   this we can now let's command this Ctrl K C we  comment that now what you can do here is we have   to use Collective view to display the current  20 data that we have in our collection View so   down here we can just minimize this and now down  here we're going to use we can use collection View so collection View and now before we use  collection View maybe you can use grid and now this grid you're gonna use row definition  so let's use star and are in here let's go in for   stack layout now let's pass in our collection View   so this collection view we have item source and  on this item Source we are going to binding to to   do so because you have to do less here now we  have to go in for item template so collection   view dot item template and that is this one so  we have to use that within that we can now go for   data template and now within this data  template we can now go for maybe you can use you can use maybe a vertical stack layout so and in this let's see the first label so this  label but now with the data template we have   to specify X data type and now this data type  is going to be models Dot and now to do so with   this we're going to say the test that you want  to display here the first one is an ID so you're   gonna say this is ID we can format this well okay  so instead of using this vertical stack we can use   let's have a horizontal between this so  horizontal then in here let's specify label   so let's paste what we have here so  the first one here let's specify it as   ID so this is ID now you can make a copy of this and now you can paste it here so here it is ID here we're going to ban it  to the ID let's say binding and I will say ID   now we can make a copy of this in the horizontal vertical stack layout and now  let's paste it again and now you can have user ID so user ID and now in here we're going to  say that user ID now the last one is going   to be the title so we're gonna say title and here  we're going to bind it to tighter so we save that   now after doing this let's run it and see what  we have now so let's save this now let's run it all right so you can see we have the data  over here and that is about 20. as you can   see from here we have from ID one and let's  see from id1 we have up to about 13 here so this it seems it is not Scrabble now let's see  what we can do from here now with this let's set   this with the car Option Savage card  option let's set the fill and expand so let's see and maybe we have to restart  this so let's save this let's restart this and see once we also restart we can decide  to set the ID let's form well so we come back to the user ID and the title so we save all these now let's wait okay so now let's take off the the grid here and let's take off this vertical stack layout and let's make it a stack layout because it  specify this collection as so let's make this   a stack layout all right so I believe this  is going to work so let's refresh this again all right so you can see now this  is working so let's set this to now in here this we're gonna do let's set put  this in the frame so we have all this and in here   let's cut this and put it in a frame so  we're gonna say frame let's paste this   now in here we have to specify  background color so we set this to now let's see if this will work hot reload  will work for us let's say the button to 10 so   we're gonna have top left bottom and right you  have to unless you restart this again so let's okay let's restart okay so you see we have the  data here and what we can do is maybe we can   set this now you have button you can have  margin now zero left less passing maybe 10 left   10 10 each okay so this style is  okay for me I believe maybe this   ugly to you but you can decide to format or style  it the way that you want let's maintain this for   this lesson for a sec so you see we have from  id1 up to ID let's say 20 but when we check let's   put a breakpoint here let's go to our service and  now in here let's put a breakpoint so let's let's   see the number of items that's going to return so  let's restart this again once we put a breakpoint   and let's see the count of item that you in uh in  our list by you have only 20 appear in here okay   so we have the response and response here it is  not but when we check our results the stethoscope   is 200 and we have the content here now let's  decode this so continue on and now let's see so   how many counties is 200 we have count of 200 so  when you go to Raw View let's see if we can have 0 to 99 100 so as you can see we have a whole lot  of this so that is it is up to 200 but we have   only 20. so we have to enable the slow view so  as soon as we decide to scroll up then so wait as   soon as grab we're gonna have the rest well coming  in okay now let's see so let's go to our list here   and as I save it so as you can see from here you  know we have a view model and now in a view model   we are getting 20 now so there's a feature in  this collection view that can enable us to add the   two or the rest of the content in there this is a  collection View view we can add this feature in it   what are this feature we have remain item  threshold and remain attempt threshold command   so first of all let's create a command  first then we come back so we have this   and then let's create a command so  we have to create public Ascent task so it gets nest data and before I forget or before we forget let's  put let's assign the relay command on top now in here we know we have page size  of 20. so that's what you're going to do we're going to say that this to do when that  this is called this studio Dot and range   so let's add range we're going to specify to-do  list Dot skip okay so you're going to skip   now the count of the same to-do  list so to do a list dot count   so kindly if it is 20 it's  going to skip 20 then dot take page size dot take page size yes so that's what  you're going to do but I know first   of all we have to check first if this it is  not so we can check if to-do list dots count   is greater than zero that  is where you want to do this so you want to do this only when the count is  greater than zero if it is less than zero then   we call this method you can call this method  okay so when we click on that and it is less   than zero we can say else then call this load data  method uh load to this method and now here we have   to put an await to that let's see since it is  void we can't put it let's use this so we save   that and now here this can be we can take off  the async so it's going to be public task then so let's see what it is doing  now it is saying something   um not awkward returns attack so can it be void so public void gets this Nest one here okay so we  have this command now let's copy this command here   and let's go to our main page the example and here  we are going to specify the two features that the   remain threshold and also remain item threshold  command so how many uh list do you want to leave   or get to before we recall the next command maybe  we can talk about one when we get to the next the   last one that's the 20 then call this command  so we have to specify that too so let's now in   here where we have our collection view we're  going to specify it here and the first one is   remain you can see we have remain threshold so  remain item threshold and we're gonna say one   also you can have the command remain threshold  Rich command and now we can call this   binding the less paste what we have there and  add command to it now let's save this and now   let's restart application and see what we're  gonna have next all right so our page is now   loaded one up to 20 so now let's let's go now as  soon as we get to 20 we are expecting to get a new   set of data so this 20. so when you hit this 20  we have to get the next data and as you can see   the command is not working let's set a  breakpoint and see so we go to our to-do list Okay so let's see our main page view model and I have  this get Nest data let's set a breakpoint here let's see if this is going to  hit let's see so we save that and let's run this again now this is the first method so it gets you 20 okay so this get hit  continue on now what is the count of this   okay so this is not what you're talking about   we're talking about this is supposed to be this  to do so we have to paste this and now let's   save that so if this is if the count of days is  greater than 20 a greater than zero then we're   going to add to-do list.skip that to do count  here what we have so it should have been this   that skip to do that count and take page size  so we are taking it from these two list and add   it to this by using the count of the the current  candidate is 20 skip the 20 and take the next one   okay so the next integral count and I'll skip  it and take the next one so that's what we're   going to do let's restart the whole application  again and now let's see this is going to work Okay so now we are going to scroll again and see   if this method is going to hit and I'm  going to have the right thing to do so   16 and now it is hit so continue on what  is the account here the count is 20. so   the statement is true now get this what's the  current count is 20 and now discount is 200 so   let's see the next if I click on this  now let's see so here it is saying that   so wait analysis so because we have 21. 22. we  have 20 up to 30 so that's nice to get to 40 it   is hit again now let's see so count count  count count and go again now let's see 41   42 43 up to 60 it is it again so let's clear  let's remove this hit and now let's continue   so if you see it goes up so that is what that's  the infinite scrolling now you are scrolling up   to the whole end of the data so you see the data  is 200 so let's scroll let's go so one zero same   we see we we are going like that so that's  what we can do for any exception we can put   it as try cash you know how to handle Exception  by using try cut so let's handle this exception   yeah in case you have any issue and it's gonna  tell us so cats and now we have exception here   ex and when there's any exception you can just  await cell dot current dot display alert and now   we can you can say that this is an alert then  we're gonna say ex Dot message then okay button so we can do same to the first one here so in case  we have any exception to we can just handle that   too because it's very nice to handle exceptions so  and it is very important too so try and cuts okay   so now we have our section handled now this is you  know issue with 10 async so this must be a task and do you have any issue here  let's see I have this try cuts   try cuts and that is try and catch okay  so what it is saying the page side does   not exist it means you have an error here let's  try that and see whoa so you have to clear one   so here is a task and this can also be a tax  as well so it is in task because we can return   this the exception so you're going to be task okay  now it is that then they're supposed to be awaited   okay so now we have this when you run this let's  refresh this and see what we're gonna have now so that is it now you see it is still working  definitely as as seen from here now let's add   indicator so that's loading it's not the page  loads for the first time while getting data I want   to have the loading indicator okay so now we can  add indicator here to load to show at least if it   is loading now that is called activity indicator  and now this activity indicator let's go to   this page so let's go to the main  view model and now let's have a SBC variable so we're going to use bull is  busy then let's put this as observable property   so now in here when the page loads  for the first time we want to   check so when this method is called you want to  set is busy [Music] is busy let's set that to let's say that to true [Music] and also down here you can set this to  false also here okay so let's save this and let's   go back to our page and now this indicator let's  set the color as red and let's set is running   yes so that is going to be true and now it's  visible so it's visible we bind this to it's busy so let's stop this and let's run our code  again to see so click on this all right so you see that our load indicator is  loading and as soon as the data comes in let's see   so now it is fetching the data and because that's not the data comes in it is  off now okay so you know I'll put this link I'll   put this project to GitHub so you can grab the  source code here I'll put it over there that is   it for this video if you like what I am doing  please like the video you can also subscribe   if you haven't done so and you can say take the  playlist too as I said earlier on and we have   a lot of lessons for you take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,752

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: cwt4KHOnunk

Length: 45min 4sec (2704 seconds)

Published: Wed Aug 09 2023