.NET MAUI Navigation Using Navigation Service (Enterprise App Pattern)

hello guys welcome to my channel in this video I am going to show you demo about how you can Implement a navigation servicing.net Bobby application so here I just created one sample application so let's Implement navigation service in this project so first I'm just going to install Community toolkit dot mvvm plugin so we can easily implement observable property okay so this community toolkit dot mvvm plugin I'm just going to install in this dot 10 Bible project okay now here I am just going to create a project structure like adding gives view model and models folder let me add here Services folder also in that I'm just going to create navigation service so here I am just going to add interface navigation service interface and that implementation so let me clear another class that just going to implement this navigation service interface okay here in navigation service I am just going to create one method for navigation this matter I am just going to use root detail and at routing parameter that going to be string and object format so whenever I navigate so that key will be in the string format and that value will be the any type of object now let me implement this navigate to a sync method here in navigation service so here I am just going to check if the parameter is not null then I will just navigate to particular what is the root detail I pass to that route with this routing parameter otherwise I will just navigate without parametrical okay now here in a view model I'm just going to add one base view model so in that I I will just add this navigation service again okay so here in a page view model Constructor I just added navigation service now let me register this navigation service here in mavi program.cs foreign service in any view model or view so let me add here now one page so here I am just going to add one launch page and that view model you know so this app launch page view model going to inherit base view model and here in Constructor I'm just going to use I navigation service and that I will pass through this view model okay and here in app launch page I am just going to bind this app launch page view model to app launch page so let me just USDA okay so app launch page binding context will be this app launch page view model so this page view model and Page also I need to register here in my program.cs foreign now I'm just going to set default base as this app launch page so that they exists in a views folder so from the views I am just going to use this app launch page part okay now let me run the application and let's see uh it's displaying this app launch page or not okay so default uh this page is blowing up launch page so now you can like write any logic here in app launch like if the user is logged in then navigate to some other page like a dashboard page if it is not login then you can just navigate to login page like that logic you can add here on app launch page so right now I'm just going to add one button and on the click of that button I'm just going to navigate to some other page thank you okay so here in a view I'm just going to add one student list page and that page view model foreign list page I am going to use this student list page view model so please pay The Binding context will be the student Place page view model now let me add that registration of these two pages here student list page and that view model registration I just want to create object every time whenever I load this student page view model so for that reason here I have just added add transient now here in app cell I'm just going to add routing detail okay now here on app lab app launch page I'm just going to add one button and let me create command here on app launch page view model so this navigate to student list command I'm just going to add here foreign command I cannot see any suggestion so you can use compile time binding so you just need to add here namespace of view model here now from these few models you can just set these page data type to like whatever the view model bind to this app launch page that viewmodel you can set here so now you can just see this command navigate to student list command and if is there any error also then you will just like before run the application on while compilation you will see the error so you can easily fix that so it's a good to use this compile time binding foreign view model here I'm just going to use now navigation service dot navigate to a sync and in that I just need to pass student list page okay and let me just change this navigate to async Method I just here I will set default parameter as a null so while navigating I no need to pass every time parameter as general so now it will just it will be optional I can pass parameter or not okay now let me run the application so we're just going to navigate to studently space using this navigation service okay so here on the click of navigate to student list it's just navigating to student list page now let me add some dummy data here on a student list page so I'm just going to create one model student model class that I'm just going to create student name and email okay and here in a student list page view model I am just going to create observable collection of student model and here I am just going to add some dummy data thank you foreign list collection View I'm just going to buy foreign okay so here also you can set data type in a collection view data template so for that let me just add here models okay so my student please model student model class like this in model folder so for that here I just added namespace now I can access that student model and all property I can access here now okay and also here in a student list page view model I am just going to create another command so on the click of the student particular student detail I am just going to have that student detail and navigate to another page student detail page so let me just add another command here foreign okay so this command on student selected command I am just going to bind here on student list is collection view so here I'm gonna bring dot gesture recognizer thank you just going to I want to execute this command on student selected command that I exist on student release page view model so for that I am just going to set and just the type as a student please Facebook model and from there I will just execute date this on student selected command and that command parameter will be current binding object okay now here another page I am just going to add that student detail page model foreign detail detail page view model and here in a student detail page go behind I'm just going to set this page binding context as a student detail page viewmodel okay this student detail page I'm just going to add here in appsell.ml.cs here in routing dot register root and also I am going to register this student detail page here in a Mario program.cs okay now here on a student list page view model student selection I'm just going to now navigate to student detail page and here I'm just going to pass parameter detail in dictionary format so here key and value I am going to pass so that key going to be student detail and that value is going to be current selected object foreign detail here on a student detail page view model so for that here I need to use Query property and I can here I need to pass key and that property I I want to buy this student details so let me create here observable property okay so this student detail is going to be type of the student model so that reason here I have created the student detail type of student model now here I'm going to pass a student detail e going to be this student detail key okay now let me just display some basic student detail here on student detail page foreign let's see it's uh displaying basic student detail or not okay so here on the selection of navigate to Student place it displaying student list page and here on selection let me see okay so this command is not executing uh so let me see here on a student Place page yeah I have mention this command so let me see this let me change this command to student C length student selected and same thing I'm just going to use here I think because of I use one student selected might be not working okay so now it's executing this command and here it's displaying student detail okay now I am going to add another method here in navigation service like let's say if you want to update some detail of this student list page from here like if you want to execute some command of the student list page from here without using that messaging center uh so that you can do using getting this student this page view model and from that you can just execute any command of the student list page so let me create that method so here in navigation service I'm just going to create okay get page view model so here I am just going to pass anything else that existing navigation State list and based on that view model that entire viewmodel object I'm just going to return it so let me just implement this get page view model method here so here I will just fetch is detail from cell dot current dot current item so this will written entire navigation stake list so whatever the page I navigated like from App launch to student list and from student list to student details so that stake list will be available here and from there I will just check if the page is not null and with the page DOT bindingcontests.get type is equal to equal to whatever the view model I passed here that match then just written that page detail and here I will check if the page detail is not null then I will just click on this page detail.binding context otherwise just hit return fold whatever the view model I passed that object so it is going to basically return null here student detail page I am just going to add one button so let me create one command here on student detail page view model oh so this is command here I'm just going to buy and using navigation service I am just going to fetch now studently space view model foreign class so it's here trying this error because there is no empty Constructor exists here on student list page view model so let me just create here as well as on a base view model so now this error will yeah it's gone now I'm just going to execute any command that exists on student list page view model so here on student list page view model let me create one command that is going to okay so this refresh student list command I am just going to execute uh let's say this add one student equal and here simply I am just going to add one okay this adds student command now I'm just going to execute from here so then Place page view model that adds to that then command or catchy and from here you can pass any object detail also if you want to pass some parameter detail here on ADD student command that also you can do now let me know the application and let's see on the click of this execute student list page button is equal to add record here on student list page or not okay so right now here is a four record now when I click on this button and when I go back so it's added one record this is the code uh like let me again add so if I click again this command so it is going to add here one record so like that way instead of like if you instead of using messaging center you can use like this way you can access any page view model if you are using mdvm structure then you can access like whatever the pages exist on navigation State list that you can access and whatever the command you wanted you could from that particular page view model that you can access okay so that's all for today I hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 6,478

Keywords: Enterprise Application Pattern In .NET MAUI, Navigation Service In .NET MAUI, .NET MAUI Navigation Service, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: msqHEVgPap8

Length: 31min 18sec (1878 seconds)

Published: Sat Feb 04 2023