.NET Maui Apps | How to create Cascading Dropdown List in Mobile and Desktop applications.

hi guys welcome namska swagate hello very common aquava all that I'm trying to  say is welcome you're welcome to netgodaf channel   so this channel facilitates a lot  of projects and lessons for.net   um Blazer that is a Blazer web assembly and Blazer  server application nso.net marry application   so check the playlist and we have a lot  of lessons over there and projects as well   you can subscribe to the channel now this  video at the end if you think it's okay   to you give me thumbs up alright so let's go  to today's topic and today we're going to talk   about cascading drop down list how do you create  a drop down list so as you can see from the screen   I have my visual studio 2022 last and we have to  create a new project so create dot net marry app   and now give it a name so I'm going to say  demo and I will Cascade in drop down so yeah   cascading drop down and add the list to make  it complete it's too long but don't mind so   cascading drop down list project now click on  nest and the version that you want to use or the   framework that you want to use here at a certain  point there so let's create the project here so after this project get created we are going  to install some nuget packages because those   are the packages that we're going to use  so you have to create folders that we're   going to use for our project so let's right  click and add models folder so this is models   aside from that we have to add view  models and also views so three models and the last one let's have a view so you have views so I am sure we are going to derive  services so let's add one folder for service   so new folder and I rename it as services okay and I have that already the first packet  that you need to install is connected toolkit.mpvm   so you have to install that and also you  have to install refactor dot mbvm helpers   so let's go in there and create  our service first so right click   on the service folder and now in  here let's create an interface and now let's make it as High  countries so this country service and now this country service we want to  have two method the first one is to get a   list of countries and the second one is to get  a list of cities so let's make here as public and now in here the first one is task  we're gonna have a list of country so I'm going to create a country model and we say gets countries and also we have to create cities so let's make this and now a list of so a list of City and this is going to be get cities okay so we have these two method now what we have to do  is let's create a model but before that we have to   go in there and create our service so let's create  our service and it's going to be country service so this could be this supposed to be  eye country service so let's edit that so eye country service now this service has to inherit  from eye country service so control period let's implement the interface  so we have this so the first one is to get a list   of country or cities and the next one is what  is the country under the cities let's create   our models first so right click on the  modules folder and now let's add country so you want to have this public and now in here you want to have so you want to have ID so this is  integer and this is ID so country ID   and this is going to have country name so this must be string this is the only thing  that you want to have country name and Country   ID now let's go to Let's create another one for  City so add a new class and now this is City so with this we're gonna have city name so public so you're gonna have there's an ID and you're gonna have country ID so here it is country ID so the type is the type is going to be integer then we're gonna have city name right so you're  gonna have this string and then there's gonna   be name so we have a country ID and also um  city name here so let's save this and now the   country we save that now let's go back to the  country service and now let's inject the models the interface to reduce same now this is solved so you can clear this okay now I will go to this country service that's what we are going to do so so you're going to grab a list of countries here  so first of all let's create we say countries so let's off countries and I receive countries is equal  to this so here we can specify Let's Open Bracket like this so equal to so you have new country and now in here we're going to specify  an ID of 1. and you can have name so with this let's use Ghana and also so new country then the ID here it is two now let's specify the name Nigeria so we have these two lists okay so as you can see from here  let me open it like this and now let's return tax from resource let's retain this country so  you want to have only two lists of countries here   now let's go to cities so we're  going to create so a list of City now the first one you have new City and in here we have ID is equal to one  then we have name so let's see we have   Kumasi and Country ID is equal to one  that is Ghana you can create a new one so we have name and this name you have keep cost and the next one so I'm going  to go offline and try to add some cities and I'll   come back so the ID here it is one all right so  I am back and now there is a data that I have   so I have just countries two countries with  cities over here and we have two cities for   Nigeria and we have the rest are for Ghana  because that's who I am so I know the city   is some of the city is over here okay now let's  use this in the pickup that is a drop down list   in marry application so these are service okay  so um let's go to a view model and now you have   to create a view model here so we have a model  already we have a service now done and let's go   to the view model and now let's create a class  and now since you're going to use for the main   page we give it a name which relates to the  main page as main page so main page view model and now this view model is going to inherit  from observable objects so observable objects and now so it is inheriting from this name  space so I would like to just cut this   gonna use it here because we're gonna have this um an exception when you try to use  this collection and also the mbvm both   has the helper has available objects  once the muvm also has it so let's   be specific which observable object  that we want to use so let's create in here and in here let's create our observable  collection so we can talk about public and here we   are using observable range so observable now we're  going to use range collection and this is country and now we say countries so countries then we have like  get and set is equal to new   now let's include this model  we can grab C and now use for   our city so let's paste this so here  will be City and this will be cities okay now let's call a method  here so load countries so control period let's create  a method for this load country   and in here let's inject our  service so our country service then record this service control period let's  create an assigned field so we can use so it's   a way of initializing this now in here we now  have this service so we can say that VAR countries   is equal to okay so we have it already so this is  that country Services dot get countries   so we're not assign so we check if countries so if country is I like to use  is now then we want to return so then return else let's check  if this countries dot count is greater than zero then we want to play it so let's clear and that's going  to be countries that's clear after doing that then we say countries Dot add range so add range and now  we are going to crawl these countries so let's see now this is getting from   that is saying I cannot convert from  this so let's have another weight and yeah so this is soft now okay so we have the  countries here now let's register this service   in the myoprogram.cs file so in here we say  Builder dot Services dot add let's use Singleton so you're going to use instead of this  ilogger Factory we're going to say I country   service then we have the country service  too we do same so let's grab this and now let's paste this and also so here   we are going to use main page view model  and now here we're going to use main page main page so after doing this let's go  to the main page code behind file and I   will have to register the view model  to it so you can just comment this and now in here we say main page view model then  let's buy the contest so binding contest is equal   to main page view model now let's go to the main  page and now here must be public partial class okay so now we are now the list let's go  to the main page and now let's add the   drop down list that is a picker so I'm going  to highlight I'm going to collect all this and now here let's include the link for that the name space  for The View model so CLR namespace   then we're going to use demo .v models so  you can specify X data type as v-model dot   main page viewmodel okay so we have this vertical  stack layouts and let's have maybe imagine as 50. so in here okay so in here  we're going to use the Picker and so picture and now with this speaker  we have to specify the item source so   let's say the item source and now let's  bind this so we bind this to countries let's save this and unless run this application  so I'm going to choose um and let's run this so the app is now launched now we see we  have this bar over here but when we click   on this bar see what happens we have the two  list models here as you can see we have two   countries Ghana and Nigeria and you see we  have this name so we have to specify the name   and now when we go to the main page the example  file with a picker view we can talk about title so we can add title here  and let's say select country aside from that we can also talk about item  display binding now item display by then um which property name that you want to set so you   say item display binding and  now we are binding this to so here is going to be name so because when  you check the country's Modoc you see we have   name here and that's exactly what we are  doing here so we have the name specified so let's run the application  and see let's refresh it so I could see that from here we have reached  select country and as soon as I click on it   you see we have the two list here so if I  click on Ghana I have the Ghana selected   now if I click on I can have Nigeria also  selected so that is a way of using this   that's a picker but let's talk about one thing you  see we have two things here we have two models the   first one is a country and the second one is the  city we want to also have so let's copy and make   um let's copy this and make a  copy and now we paste it here so let's have spacing to 50. so in the view we have to get something like   this and now that's not going to be  country rather it's going to be City so you must have the country and the City   whoa less okay country and city but you  can't select City whereby country is   selected so you want to Cascade it you want  to restrict it to when country is selected so we can talk about binding so how do you  bind this let's go to the V model and create   an object here so let's say this is private and now we say this is country so country and now we say  country or selected country okay so we have this now after having this  selected country here we could have used   the observable property on top but we want  to as soon as we get the value selected we   want to initialize another method so here the  observable property might not help us so let's   specify like this public let's do it yourself  so public then we can have this as selected country okay so that's gonna be a public country then we have a selected country now in this you're  going to have get and set assessor so we have   get and now this gate it's Max to the selected  country and now with the set we can set this to   the value so let's open it here  and let's say selected item if it is not equal to now then you want to set the  item as the selected item is equal to value okay   now with this we're going to  have the item selected from   as soon as the user types we're  going to have the item selected   now to get this item let's create  a simple method here that is public display item so there's going to be void so display item and now in  here you're going to use cell dot current dot display alert and this  is selected item and we're going to pass in   selected item uh selected country dot name  then you're gonna have a button of okay   so let's copy this model or this method name  and now as soon as the value here changes   you want to call this method so let's  save this and now in the main page here   let's bind it so you have this a country  list and yeah we can talk about selected item   and now we are going to bind this item to  selected item so that is selected country   this country is a public object from this main  page view model so this one you can just copy   this and you go in there now paste it here  let's save this let's refresh the application   so now let's let's come through and see so the  name of the country that we select we it must   pop up and we have the same country so if I select  Nigeria we must have the Nigeria selected so this   means that our public property that we created  is activated or is working now the next thing   to do here is we want to set this so we can  disable this and now we set it so let's go to   let's set is we can set is enable property and  we can bind this too so binding and talk about is so a city picker enabled so let's make it a city enabled so that is what we are going to  use for to handle that now let's copy this and let's go to our main PG model so in here we  have to create a public property so let's use underscore for this and that is Boo and on top of this you want  to set up observable property like this so when this is called so initially when  this starts you can see we have this main page um main page view model and that is the Constructor so you want to as soon as it's  load we want to disable this so let's set this method is equal to false noun as soon as you click on this so as soon as this selection here it is  not equal to now we want to set this to   true so you want to set this to true okay   let's try this and see so in the main page we have  this set so initially I want the page initializes   it's going to be false so this is going to be  disabled now as soon as we select and there's   a value here in equal to now that is going to  be activated so let's see let's refresh this so I could see that when the page  loads we have selectity is disabled as soon as I check this Ghana and now they  get selected and now let's see if you see   this one is enabled now so that's what you  want to do now you want to as soon as this   loot you want to pass in the ID of this Gunner  to a method that we're going to create and I   get the list of cities from Ghana and display it  over here so let's go to the view model and here let's create let's create a method here so that's going  to be public and it's going to be void let's make it async void and this is load cities and now here it needs an ID so  this we're gonna pass in VAR cities yes equal to a weight then you can have this  dot services there's a country service dot get   City so we have only let's go in there  and then create a city so you go to   the eye country service we have a Thai  slips or city let's pass in an ID of   country so country ID now go to this and  now in here get cities less passing and ID okay so here we can decide  to move the issue this side so with the interface let's remove that and also  that let's see okay now in our view model let's   get our cities here so dot cities okay now we  can just make a set here we can do something like let's cut this okay and so we say CCS we paste it here and now we're gonna say cities you know this   is here it is an observable  collection that you have here Dot add so dot add range dot add range cities Dot where my you're going to  pass in ID so IMAX to I dot ID   is equal to this ID they're  gonna have the two lists 0.2 list okay so we grab all cities to this object  then we're going to make a set here   and I'll add it to the city but first  of all we have to check so if cities   is now then return okay and we have to also check if this it is dot count so dots counts is greater than zero then  let's clear it so you have duplicated cities   so equal to zero not greater  than zero then less clear so we say cities dot clear then we add this so let's let's see let's save that and now in  here as soon as we check and we call this let's   call this load cities method so we call this load  City method so this low City method we can pass in let's find this person C so now there's not here that is here now so this needs a parameter and  now we're going to say that so let's take off this one let's take off  this ID and now in here let's use the public   variable that is a selected country dot  ID let's use this now let's save this   and after that let's call Okay so after  low density then selected let's make a call   to this so we come to you the  display name here and now we want you you want to display selected  City so let's also create a public variable here and now this  variable we're going to use we can use um City then we say sitting so selected City then on top of this we can use observable  property so let's go to the country list here main page the example and now instead of binding  countries you're going to be binding cities   and gonna be named when we go to the city model  we have name so that's what you're going to use   over here like solicitly here now before as you  can see from here if country is not selected city   is disabled as soon as we select this this  get any bot so let's see now select Ghana   so now let's select country let's  go for Nigeria and now let's see   so we have two cities in Nigeria Lagos and  Abuja so now let's have a method to display   what we have here as soon as it changes so  we come to down here and now let's put it as I said this is really a command and  now done here we say public async or this could even be void and now  this is display selected the city okay now let me create this so in here we can now check if selected City so if science city is not equal to now then we want to if it's not quite enough they want  to display an alert so let's say cell dot current   dot display and now let's and now we say this is selected City  and now we display selectacity dot name and we have our button as okay so this method let's copy this method let's go to   the main page so main page and now  let's add a button here so we add button and now if we say test is equal to less bind not so here get City and the command we say we put it as a binding so let's paste this  and add command to it save this now let's refresh   so let's see now get City if I click  on it since it is now it returns   it's not isolate Ghana and I select vehicle  I click on City and I can see I have the city   selected here if I change this to Nigeria and  I'll choose this as Abuja I click on it and I   get the the name selected item here all right  so that is it now when you have an API or you   want to just grab the data from the API it's  quite simple you just have to go to the service   country service here so instead of having this  list here you can just grab the API very simple   way okay so that is it now if you want us to get  data from the API I have a video down there and   I'll show you how to get data from the API so I  will leave it at the description you can check   it up or there and you're gonna see how to get  data from API from your service specified here   I will also put this link at GitHub so you can  just go in there and grab the code so check the   description and you're gonna see a link over there  so click on it and you can have the source code thank you so much for watching if you think  this video or this lesson is helpful to you   give me thumbs up if you haven't subscribed  to you please just subscribe and you have any   issue to put it at the comment section  and return to you alright so that is   it for this video thank you so much for  watching and I'm going to catch you up

Channel: Netcode-Hub

Views: 2,675

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

Length: 40min 28sec (2428 seconds)

Published: Fri Aug 11 2023