Cascading Dropdown List In .NET MAUI (Country/State/City)

hello guys welcome to my channel in this video i am going to show you demo about binding country state and city list to drop down i mean picker control of dot net mavi so let's create the project structure for it so i just going to add views of view model and the model and also i am just going to install mvvm community toolkit so it will make easy to use command and observable property okay and another plugin we needed that newton newtons of jsons for deserializing data whatever the data come from api okay so this is the get country api that i am going to use so that response is like this country id country name and is active flag so let's create a model for it [Applause] [Applause] okay another model we needed that will be [Music] state model [Applause] so api was returning state name and the state id so i'm just going to add that [Applause] okay so i have added all the required model now i'm just going to create a services i'm just using it service name like you can use any name and here in interface just going to create a method that going to return country model [Applause] and this interface implementation i'm just going to add here in this service okay so here api will rewritten country list data i'm just right now returning this empty so later on we will integrate api here okay now let me add view that we are going to display drop down options so i'm just created page like a drop down detail page and that view model i'm resetting in view model folder and this view model inheriting observable object that came from mvvm community toolkit so it's already implementing i notify property changing so it's easy to use now let me add this view model and that interface and that implementation in mavi program.cs so i'm just going to register it [Applause] [Applause] here i am just going to add another view model which is stressing and that page registration [Applause] okay so let me pass now drop down view model here [Applause] [Applause] okay and the view model going to use one service that we created [Applause] here i register taste service in the mavi program.cs so this service now accessible in this drop down detail page view model so i am just binding that this service to this day service private object [Applause] okay here i am just now creating my method get country list and this method going to call test service dot cat country list api okay so [Music] now on the ui i'm just adding here speaker control [Applause] [Applause] so let me add one observable property [Applause] for the country model okay so api whatever the api within country list that we're going to add in this country list object and that i'm just going to bind here item source will be in this current playlist [Applause] okay let me add title here select country and also item display binding here i need to provide the property name that i'm i want to display in the collection of item so that so you can select any property from this model country model because we are passing item source of country list today this speaker control so let me select country name and i just find here okay now let me return some dummy country list from this api so right now i'm just returning single country model so let me convert it to list of country model so it will written list of countries [Applause] right now i just had some dummy country list after that i will [Applause] add api here [Applause] [Applause] [Applause] okay now let me add this country list so i'm just checking if country list is available then just add that to country list okay i just need to use foliage because it will return multiple country list from api okay so let me run the application so okay so now it's displaying to country so let me integrate now api so we will have this country detailed from api and based on country selection we will display state and after base on state selection i will display ct list [Applause] okay so let me add api call now so okay so let me select the api i'm just going to use this api [Applause] okay now this api using gwd token so i need to add that header so let me add just token here right now i'm just setting token like this way but actually for democracy i'm just passing this static token otherwise like uh you need to like authenticate based on username and password and then the token will return from the api and that you can pass here so i'm just for testing purpose i'm just adding this token here so let me copy that token okay now this token i'm just going to pass here [Applause] okay so now this is going to uh written country list now i just need to deserialize this so let me patch content from here okay so this api returning present the data in uh json format so i'm reading as a string async and after that i'm just let me check another level like keep respond.status code is equal to okay means api it's returning a status code okay means it's returning some response after that i'm just going to deserialize this data so let me show you so this get country data returning in this format but it's uh that country list data exists in this data object so before that i need to use some model that will return this property like success is error or like this so let me add another model it's called api response model so in that i'm just going to add like [Applause] if api returning success then that data okay so i'm just adding this right now i'm just using this success and data [Applause] so let me just deserialize it now [Applause] okay so i'm just deserializing this content in this is like a reader stringer thing so i need to use of it now i'm just deserializing this content into this response detail and i will just check if response detail it succeed then just add this data in country list so so i'm just from api i'm just patching content here and after container i'm just deserializing into api main response makes its returning succeed like a success flag either true or false and the data so i'm just checking if the api is retaining like it is success and that response is not null this one the data is not null then i'm just adding country list here and that country list will return okay so let's run the application and check it's displaying data or not okay so now it's returning country list so let me do one thing now let me add here loader so when the page is open that time it going to show here loader so for that [Applause] i'm just here going to add activity indicator so let me add another property in drop down view model it's like observable property [Applause] is currently loading so i'm just going to set here each country loading through and when response came then i'm just setting as a false and this this property i'm just going to set here is visible [Applause] okay and another layout i'm just going to add is for select state okay and here right now i'm just going to remove this sources detail and this activity indicator so we will replace this later on okay so let me rerun the application and see like it's displaying that activity indicator or not okay so it's displaying that activity indicator now based on this country selection i'm just going to display state so for that first let me add api like the same way we added for get country so i'm just going to copy this and i just add this country model to state model so i'm just going to patch a state list based on country id so i'm just passing here country id let me copy that api name right now i'm just using this api format like this i'm just adding here static but you can do one thing you can create a model here like api list and in that you can add api list like get country then get state like that so this api are going to written data in format of state model okay so now let me add this in interface [Applause] so i'm just going to add another loading property [Applause] is called instead loading and i'm just going to set here when api is running so it will set this to true and pause and another thing like we need to fetch now country id so for that here in drop down detail there was another property called selected item so that we need to set here so selected item will be so let me create property call our selected item will be a type of country model so selected country [Applause] okay so this selected country now i'm just binding here okay for selected country i am not using something like this observable property i am using this uh this like getter and setter because when the country is selected that time i need to call this cat state list by country id method so for that i am just using this so when the country is selected i will call this get state list by country id and here i will pass selected country dot country id so i'm just check selected country is not no then i just and here the response will be the stately so for that i need to create another observable property of state model and that will be stateless so this state list i'm just going to add here so now state is loading means this matter call this time that loading flag said to drew after that api call based on country id it will written response and that response will be the state that i'm just going to add in state list okay now let me run the application and let's see okay so now loader displaying now country i'm just selecting okay just not displaying because we forgot to add here property so our item source will be state list then item display binding will be a state name [Applause] and selected item we will select later on okay so now it's displaying now state list okay uh it's not showing loader also because i didn't set here property is visible sorry i already have property so just i need to bind here please stay loading okay okay so when i select a country now state is loading and after that i can select state also so now same way we will add now another property uh another drop down for the city let me show you first one thing like if i directly select the state without selecting country then what happened so let's see that first okay so i'm clicking on state it's showing me empty so what i do i will do i just make this control disable so when like by default i will make it disable after that if the country is selected then i will set it to enable so let me create another property for selection enable so i will set this property here true when the country is selected and also i will in work on property change the name of instead enable and this property i am just going to bind here so let me run the application and we will see like this is selectable or not okay so it's still selecting so let me do one thing i just wrap this is enable here okay here i need to set getter and setup for this because then it will be a bindable property okay so now it's not selecting and let's see with stake layout also so sorry okay so when i bind to stick layout then it's a clickable and when i bind it here then it's not clickable okay okay so let's now add another drop down for the city so i just copy this ct and i will create similar property here so first we need to create a model of like a state model then it will be a selected state so here i will just set city selection true when the state is selected and let's set that property change for now is city and here instead of calling that state stateless by country id i will call get city by state id so let me now add this select state property here in state drop down selected item is equal to selected state so whatever the item i select that's going to store in the selected state object now here instead of stateless i need to buy now con citylist so for that another observable collection i'm just going to create that will be a ct model and see the list so let me create now another method it's called list by state id [Applause] so let me add an easy city loading property okay so when the ct is loading from api that time we just set this city loading flag to true and once it return we will set this back to false okay so i need to create now api similar of this so let me just copy this and let me add here name get shitty list by state id okay so let me copy now api okay now this api will return data in form of ct model so just let me set this response of ct model and i will change this to delays let me add this matter now in interface so we can access in view model okay so here now i just pass state id so it will patch now get ct list by state id here will be the city and that will be add in city list okay so when the state is selected here uh we call that ct list by state id okay so now in ui this will be the city list and then here will be cp name and this will be its cities selection enable [Applause] okay now let me run the application okay so now if i select state and c3 directly so it is disable now if i select country then it's loading state and if i select cd still it's not selectable now on this selection of state it's a loading city and it's displaying here so just let me add some because it's a reading when i select any other option then it's adding all the city here so for that we just need to clear data before adding so i just had here city list cleared and the same thing i will add here for the stateless also so now let me run the application okay so now on the selection of country displaying state and after it's displaying that city now if i change here from another then it's again going to clear and let us select this okay so that's all for today thank you so much for watching video you

Channel: Programming With Pragnesh

Views: 8,902

Keywords: .NET MAUI Dropdown, DropDownControl, .NET MAUI Cascading, .NET MAUI Picker Control, .NET MAUI API Integration

Id: lzNdZMwVj-c

Length: 46min 31sec (2791 seconds)

Published: Wed Jun 08 2022