Shell Navigation With Parameter and Dependency Injection In .NET MAUI

hello friends welcome to my channel uh in last video we have seen like uh displaying dummy student list in collection view then implementing pool to refresh and then some basics of data binding using mvvm structure if you not seen that video then just click on this suggestion link and just go through it so you have a basic idea regarding that stuff in this video i'm going to show you like on the click of student list we are going to display student detail on uh that student detail page and other stuff i'm going to do is like right now we we are directly adding w student list here so what i'm going to do i'm going to call uh one api here that will add some student detail and then that student detail we are going to display here in collection view so let's go through it so first i am going to add here interface and that implementation so i'm just going to create one folder it's called services means whatever the service exists that we will add in this this folder yes i mean i think it's already at least okay now i'm going to create one folder interfaces so all the whatever the interface exists that we will add in this interfaces folder and that implementation we will add in implementations folder so here i am just creating one interface is called i student service and here i am just going to add one method it it's going to return list of student model and that api name will be something like that student list [Applause] okay and this interface we're going to implement in implementation i'm just going to add one class it's called student service and here i am just going to implement that interface i student service [Applause] okay so here i will call api and it's going to patch data from api and then it's going to written in student model format so right now let's just add this record dummy record and try to display that after that we will integrate api okay so this is ready like student service it has one matter like get student list and here we will call api later on and it's going to return data insta written the data in student model format now like for using this service we need to add this service initialization in like a mavi program dot ca so here you can add that services registration like builder dot services dot add singleton and here you can add like student service this is a interface and that implementation okay so now you can access this student service in a view model so for using it on the student list view model i'm just going to create here one properties it's called private read-only i student service student service and here i'm just going to add that [Applause] [Applause] okay so let's just remove this code and instead of this we will call now api student service get all student that student list and this going to return student place okay so this code is like a state student service like uh we already registered in mavi program dot cs so it will be accessing accessible right now here and like whenever this constructor call then it going to access this student service and after that here we are calling at student list just rename it to like uh get student list and so it's going to call get student list method and this method is going to call this get student list that exist in student service and after that once the student list came then it's going to just add that record in student list okay so now let's run this application okay so it's a throwing error like we are not passing student service in student listview model if you see like student leads view model accepting i student service and that student service we are not passing from here so either we can pass view model from from student list view or we will access there are two way you can do either you can access a student service here directly and that student service you can pass this way here like this way okay but this student list view we till now didn't register in mavi dot program means if we run application it's going to throw some error because we didn't register that student list view page also that view model also we didn't register so let's run application and let's see like it's showing some error or not so yeah okay so it's throwing like system missing matter exception no parameter less constructor defined okay so to solve this error we just registered this page in mavi program dot cs just let's add that views registration [Applause] okay just let's add right now registration of views and let's run the application so here at singleton means it's going to initialize only one time when wins when the application launched that time it's only going to initialize one time when this page is called student list view that time it's going to initialize and again later on this page call then it's not going to initialize means it's not going to create object means it's going to create object one time in entire life cycle okay so it's uh right now it's working it's displaying data so here we register as a singleton student list view and we also register this i student service so now means when this student list page is called that time it's automatically going to have that student service so let's see so here student service that mavi like that mavi application automatically going to identify because we already registered this student service so it's automatically going to pad that and we are passing that student service into student listview model this is the one way you can do like this and another way instead of passing student service we directly access the view model like a student list view model and this viewmodel we access here and this viewmodel will pass here so right now it's going to throw arabic as student listviewmodel we didn't register in myprogram.cs so let's run the application it's going to throw error like a student list view model as we not registered so it's like going to pass some null values or something like that yeah see here unable to resolve service for view model student list because we didn't register student listview model so let's register that view model also [Applause] now it's going to display the data so that student list view automatically going to patch student list view model from the services that we registered and after that student list view model going to patch student services that also be registered here so it's automatically going to do this all stuff we no need to like initialize every time and that kind of stuff yeah so it's now displaying data okay so now let's just add api call here so i am using one uh free open source api this api is like something returning data in this format like name email gender and status so let's add this gender field in our student model it's not retaining address so let's just get rid of this added field address field and decide that gender fill here okay i'm going to remove now this all stuff and here i'm just going to add api call that going to edge data from this api and here i just need to install this newton soft.json plugin in my my project so let's install that latest version now we don't need this task.delay because here we are using now directly api call and this api going to return data and this we will add this api response into student list observable collection now in a student list ui we don't have now that address bill so just replace that address fill with xander and let's run the application so here i am using http client and that http client dot gas testing it's going to return response and i'm just checking like if the response status is okay then just paste that content as a string async and after that i'm just deserializing it to student model student model because like uh i like this dummy api like open source api also retaining same feel as we are using so i just decivilizing it like name email and gender this three field so okay so now it's uh displaying data from the api means now this response is coming from api if we refresh this then again it's calling it's going to call api and then it's going to display this one okay now we will do one thing like on the click of this okay sorry i think i found some bug here like whenever we are replacing it every time it's going to add record in that student list view because we didn't added that uh student list that clear matter so let's add that so whenever it's going to add record before that we just clear our observable collection and then we we will add that okay after that we going to do one thing like on the click of this we are going to navigate to student detail page and in that we will display some basic student detail so for that let's just add here one ui it's called student detail view and that view model and just the inherit page view model class because like we need to use i notify property change to display some student info here okay so we are using here cell on app cell we have added here as a main page we added student list view okay on the lock on the click of any student from the student list view page we going to navigate to the student detail view so for navigate navigating using app cell you can use this app cell dot current dot go to using and here you need to specify the page name that you want to navigate so before navigating we need to specify that routing means we need to register this page so for registering page you can add this routing detail in app cell dot cs here routing dot register root you can register the root and here the name of group we will use name of student detail you can specify any name here but like if you use same name as a page name then it we can use something like this so it will be easy to identify and here just the type of that page that also going to be student list view okay so once that registration is done routing resistance and after that we can use that here that page name student name of that student details okay so now on the click of item it's going to redirect to student list view let's run the application right now it's only going to display the student detail view page but it's not going to display any data because as we are not passing any data from student list view model okay deal application running here in go to async let's see that which argument is accepting so here we can pass the page then also we can pass that dictionary format parameter means like when we navigating from one page to order page that time we can pass some parameter from like in the format of dictionary and that we can access in either the next page or that next page view model wherever using some query property [Applause] okay so on the click of this okay so it's like not navigating when i am clicking on this let's see that i have sell that here yeah so here i did some mistake like in registered root i just registering some different view so that that was my mistake so after adding this it's going to navigate okay till application running let's add some code related to passing that student detail on next page for that we need to here need to add a parameter in the format of dictionary as we seen so okay so it's navigating to student list view so let's just display now student data and onto the detail page okay so for that we create here object now navigation parameter of dictionary and that dictionary will be string and object type and that key will be like a student detail and that value will be our student detail object okay and let's add this here you can add as we seen in go to async we can pass here parameter of type of dictionary okay so now when it's going to navigate to student detail view so we can access that navigation parameter in student detail view page code behind also you can access in view model but for that let's just add here student detail view model and we will register that in my program [Applause] okay so once that student detail view model here came then we can access the that using query parameter here we just need to add annotation like query property and here the name of the property that we are going to access let's create one property here [Applause] it will be type of student model [Applause] okay so this property name will be here like a from if you see that query property has a two parameter name and the query id very id will be the key that we are passing from other page means like on the student list view model we are passing here so this will be the key that going to we will pass here that will be a query id and here like this value we are going to assign to this particular student detail object okay so like when this student listview model and that student list view student detail view page going to call that time it's automatically going to add this student detail object so let that bind in student detail ui also so here i'm just going to use student detail dot name [Applause] okay so let's rent the application and see like it's displaying value or not okay so on the click of student detail so it's throwing error like a student detail view again the same error no parameter construction as we forgot to initialize same student detail view in my program.cs so we need to register here view the student detail view and that view model here okay so now it's displaying data when we select item it's fetching student information so whenever the student detail view is called so it's going to accept student detail view view model and that we are finding here and in the student list view we are just accepting that query property the name of student detail and that we are binding to this student details student detail property okay so if you see here this student detail view initializing it's not calling when so whenever i click on any student it's not initializing why because we use as as like this student detail we register as a at singleton means it's only going to initialize one time so let's see that by changing add transient so here if i register this detail page at transient and that view model so now the board will going to call up every time whenever i click on that detail page so it's going to initialize it's going to create object every time okay so now it's the first time initialization now again i selecting any other value if you see here again that debug call is coming so when we add add singleton that time it's not here that breakpoint is not coming here that debug debugger because we using that we register student detail as a single turn but now when we add transient that time is every time it's going to initialize okay so based on your need you can register that services based on like your requirement either at singleton or add transient okay so let's display some other information like name email and that gender from that object [Applause] [Applause] here you can use stream format like this way like if you want to add some text before something like this name then you can use string format like this way [Applause] okay so on the student list view model we are using like a navigation service like app cell dot current dot go to async if you want for navigation back you can use something like this [Applause] in go to a sync just specify dot dot slash so it's going to navigate to back page and if you want to like uh navigate one back page and i want to show some other page then here you can specify [Applause] another page like this let first navigate to back and then display some page like this you can do something like this okay so that's all for this video if you have any queries just write it down in comment and please like and subscribe my channel thanks for watching

Channel: Programming With Pragnesh

Views: 8,669

Keywords: Shell Navigation, Shell Navigation In .NET MAUI, .NET MAUI, Registering Services in .Net MAUI

Id: paZNvvUNFi0

Length: 34min 32sec (2072 seconds)

Published: Wed Jun 01 2022