.NET Maui Apps | Navigate through Content Pages using Navigation Service in Mobile and Desktop apps.

Hello friends and everyone welcome back to  netcode channel this channel facilitates a   lot of projects and lessons for net marry and also  Blazer so we have a lot of lessons and also let   off our videos that you can go through them the  best way is to go to the playlist and you have   Blazer project.net Mario projects you you can  go through them one after the other this video   we are going to talk about how to navigate  through content Pages using navigation service   so what actually is a service now I want  to talk about service service comprise of   interface and implementation the  interface contains the method name   whilst the implementation class  contains the method definitions   navigation service it is used to navigate between  pages that you're going to create in applications   you might have more than two content pages in such  case you have to navigate from page one to pay two   navigation service can help us achieve that also  you may additionally add some content or some data   on top of the navigation link so that it can be  received in the other page when you use navigation   service you can also do that in it so this  video or this project that we are going to take   at the end of this project or this video you're  going to know how to create this navigation   service very simple one and how to utilize  it in the application we're going to use as   an example of a customers so you're going to have  custom ID and customer email or customer location   then we're going to process it we're  going to have a list of these customers   you're gonna have a customer detailed so we're  going to create this navigation service so we can   push data from customer list to customer detail so  we can view all the data over there and also vice   versa we can return back to the customer list so  let's start we start by creating dot net marry app   project as you can see I have the default project  created and run and that is what you see Hello   World so welcome to net multi-platform app UI that  is the default one when you create a default any   project in dot net marry that is what you are  going to have now in order to do this first of   all we have to install this package and that's  a nuget package known as community toolkit.mvvm mvvm stands for model view view model it is simply  a code behind file all the method that you're   going to allow the user to interact with the  applications the mbvm must be the responsible to   handle those methods implementations so this mbvm  going to call a service to also handle that so let   me be I'm going to be like a middleman we're going  to work between the user and also our service   so let's start let's install that package so I'll  just close this let's go to solution Explorer   right click on dependencies and I'm going to  manage and get packages so in here let's type in   community toolkit so we're looking for Community  toolkit Dot mvvm so let's switch so let's click   on this and that is a community toolkit.mvvm so  let's install this package so let's apply and   now let's accept so install so let's wait for  this install here to get changed to uninstall   so it is still installing when you click on the  output you see we have finished and now it tends   to uninstall so we can close this peacefully now  when we go to dependencies and let's choose any   platform go to packages and you must see community  toolkit.mbvm over there with a version of 8.2.1   that is the first step to do now the second step  to do in this lesson is to create the following   folders so we have to create models for the view  models and Views and also our services we want a   project to be organized in such a way that it's  going to be easily identified and also easily   to be read right click on the project click on ADD  let's add the first folder and now this has models let's also add another one so view models let's add another one and here it is views and the last one  that we need is going to be services okay so we have this now let's  try to build this project and see   so let's build a solution so you see  that we have here as once I see that   now let's go in there to our project where we  have our services folder and right click on   this let's add an interface and that's going to  be new item so show our templates and we go in   for an interface and we select an interface  and what we need here it is I navigation so navigation service so I navigation service that is an interface  for navigation service we have to also create   an implementation for this so right click on  the same folder let's click on add new class   and then since it is not interface rather a  class you're going to say navigation service so we have a two file that we need for this  service an interface and implementation I   said earlier that the the interface contains  or comprise of the method names whereas the   implementation of the class comprise of the  method definitions so let's set this to public   let's go to the that is a navigation service  the implementation class set this to public   and this is going to inherit  from eye navigation service so let's go to navigation service  and now here that is public interface and I'm just  going to hear it from no one   what we are going to do here is we have to create  a method for navigation so the method name let's   have a look at it now we're going to use task it's  not going to be a task then let's say navigate   so navigate to you know here must be an async okay  so navigate to async and with this we have to pass   in some parameters because you know when at times  navigating you can decide to navigate to a page   without passing in parameters at times two you  can decide to pass in parameters you can decide   to pass in parameters when you want to navigate  from one page to the other one like login or go   to accounts page go to home page you see all these  you do not have to pass in parameters but when   you want to go for Details page it means you must  pass in parameter from the list page to the detail   page so that the detail page can receive it and  display it on the screen and so we have to perform   um you have to pass in the two parameters  which can handle with no parameter other   parameters and also the one with the parameter so  we instead of creating two methods for that let's   use one method okay and we're going to set the  default one to now so we can decide to pass in   that parameter but it's not going to work when  you want to navigate to a page by with the no   need to provide parameters uh to that link on  that page so you're going to have strength and   here let's say here it is a route so this route  and we're going to have another one and this   here and let's say the objects and you're  going to pass an ID scenario so instead of   this round two you know this is a Content  page okay so we can pass in here content page name so content page name that is for  the route and let's pass an i dictionary   and we want to get string that is the key the  value that we need is an object because you   know this object we cannot Define it to any  model it is an empty container this container   is available to be assigned or assigned any value  to this object now we give it a name as parameters and these parameters we can make this nullable  so let's say you can start to use this   or we can decide to use this now   so we set it to now now this means that any  time that you call this method navigate to async   we are passing into parameters content page name  and now dictionary dictionary of all that's a list   now with this dictionary it is now so you can  decide to pass in only one parameter we're going   to hold for this content page since here it is now  it's going to work for us and that is what we're   going to use or we use and just navigating from  One content page to another one without parameter   let's go to the navigation service now once we  have something in the interface we have to have   the implementation here so let's implement the  interface here now in the interface implementation   that is what you're going to do let's first check  if this parameters so let's say if parameters   is equal to nah meaning there's no parameter  assigned here then what can we do we can return cell dot current dot go to async  then pass in this content name   so we are navigating to this content page name  so this means that and we can decide to pass in   the next parameter as now we can decide to also  remove this because it is now already so nothing   will happen but for the sake of what defined one  and easy understanding let's pass it now here   okay so this means that when the parameters are  now it means when there's no parameter then it   means we want to just navigate to a page with with  without parameter without sending something into   that page to be received but in case parameter  is not now then what can we do then we can return cell dot current dot go to async now in this  async we need to pass in content page name   the page that you want to navigate to and also  the parameters that we need to pass in so that is   what we are going to do in our service so we see  a service creation is very simple just one method   with one method definition okay so let's clear  this because we are not using to make it simple all right so now we have this we have our service  created what can we do we now need to create some models or view models that I'm going to  be using in this project so let's close   this I service interface and implementation  I know that we have installed this committee   to kit.mbvm so we're going to use this mbvm  architecture in this so let's create a view model   uh with a view model we are going to inherit all  of these all these eye services or this is the   service uh yeah that's a navigation service  in that base V model so right click on view   modules folder and then click on ADD let's add a  new class and this is going to be base view model so this base V model it is  going to inherit from observable objects so let's clear all this I know it is using  Community toolkit.mbvm.component model   and here must be a public partial class now let's create a Constructor for this because  anytime that we call this model you want to call   we want this this navigation service to get  caught for the first time so control period   and let's go for Generate  Constructor for this base V model   now in here let's inject High  navigation service so navigation service and we say navigation service to control period   let's create an assign failed  so now we have this injected okay now we have this what is the next thing to do  we have to register the navigation services in the   my program.cs file so if it has the MRI program  so all service that you create must be registered   here so let's see let's come to my program.cs file  and now in here we have to add that service so how   do we add this service we need to use Builder dot  Services dot at Singleton the reason why we are   using Singleton is as when you open the page when  you launch the application you want this service   to get created once until you close application  and open it again before the next one gets created   so that's what you want this  service to to be done or to do that is why we need to use a Singleton  so let's use high navigation service and now we call this navigation service and that  is implementation class so what we are trying to   tell this is anytime that you call this interface  create an instance of this navigation service   and attach to the interface Creator because you  know this contains the method name whereas this   contains this the method name specified here  implementation so this must go with what this   if there is no implementation of this this  has no meaning because the interface is   there but nothing to be worked on when you  click on that method name okay so now we've   now registered this navigation service what  else can we do we can go in there and now   create a page and that's going to be we have a  main page already so this means there's going to   be the contact page okay or we can decide to  put them in the same photo because I have to   leave this main page over there and I'll do  our own so right click on views and I click   on ADD let's add new item and I go for.net  Marie so content page and now we use home.xml so home.xaml number then click on ADD now aside from this home you can also  add details so let's click on ADD then   new item and that's going to be the same  thing and we're going to pass here as detail   so detail.xml now you know we've created this view  so you must have the corresponding view models   so let's go to view models now let's create the  first one class as home view model so home page oh let's say home view model let's be same to details too so let's click  on this and and there's going to be detailed   view model okay so we have these two now all  of these have to inherit from base view model   so we change this to public partial class  and it must inherit from base view model okay so let's see now once you have this what can we do  is we have to generate a Constructor for this   Okay so we did this Constructor and  since we are inherited or we have this   in the Constructor for the base view model  whenever that you create an instance of this   or inject the add navigation service and  it is inherited from this base view model   it must also inherit from the base and that  is a base okay and that the base contains   an object known as navigation service so you have  to also specify that let's do same to the home so base view model and let's  set this to public pressure so control period and a legend with Constructor  for these two so we have these two pages let   this is what you're going to use for this  uh project or this lesson so let's clear   and using ones that we do need let's let them  to make this work looks simple so home details   okay so we have everything set now so you have  a home view model and I have little view model okay so we can now save all this done okay now  once you have our page view models what we can   do here is we have to create a list a list of  maybe customers or a model okay and that is   what we are going to be using for this so let's  go to before we do that we have to register the   pages and the corresponding view models and  we have to also inject this view model to   the page the page or the content the content  context okay we have to bind it to the context   of each content page now you know we have data  view model and we have home view model and each   year corresponds respectively to what we have  here for we have when you go to the views we   have detailed and that sync with the detail view  model and our home goes where one home view model   so let's come to this now a little view model  let's inject The View model so detailed view model and let's buy this contest  to this so I'll be saying   you can use this or you can use binding contest is equal to this very simple let's use  same to the home and here too we say that   we need to use home view model and now let's buy the contest so records you this home view model now let's  register this so come to my program.cs file   and now in here we have to register the  model and its view model so we say Builder   dot services so dot add now here we need to  use transient why we want this method to get   created anytime it is called so when the first  view model is called it could be the data might   change in the second chord so you don't want to  create it once else it's going to be static the   data are going to repeat on the same line but  I want this to get created or get created then   instant supposed to be created anytime the  model or the view model is called so that's   why we have to use the transient so we use  transient and now here what we are going to do so home view model then you have to add another one so Builder dot  services dots are transient and that is home so we want to add the content name here as home okay  so we have to do it in this way so we have this   added now we can make a copy of this and add it  to the home page and that is a detailed page so now here it's going to be detailed and here is going to be detailed okay so now we are done with this  you can see we are going to click on   navigation so we have to register the  routing let's go to appsell.xamer.cs and now here we have to register the routing   so routing Dot register so register route  and now here we need to pass a name off   you know home page is good to to to  add this so home page then type off the same home let's do next one so routing dot register route name off and we pass in details and now type of details too so we do this  to register the two content Pages created   now the next thing to do here  is very simple we have to   set a home page as a default page  so we can do that in the upsell   so in here we have the local and now this location  here it is for this demo so dots let's add views so that views let's say we have this local and  let's change this to views we can have this   as views then we're going to specify home so that is a  home content page that we are talking about so   that is this home so public partial class and  that is home and we inject this home view model   let's go to the home December and that  is demo.views.home okay so the upsell   now let's see if you're gonna have reviews we have  this home now let's save this let's go to the home and now let's clear all this out let's save this let's manage  to see what we have now all right so you can see the application  it has been run in the Android emulator   and we have the home here so  let's change the route to home   okay now we have this what else can we do let's  go in there and populate a list of customers to   this so this is what you're going to do let's  go to home view model before we use or rewrite   anything in this Constructor what we can do  here is we have to create our model so let's   create a model so it's an Explorer and let's  go to models right click on it now let's add   maybe user model so let's add a class and let's  set here as user okay so with this user that   we are talking about you're going to have some  few parameters here so let's set this to public and we're going to have ID user ID username  Visa email we're gonna have user password well   so maybe you can have it's okay so let's  maintain this and now let's talk about country   yeah so we have an ID name email and Country  this is what you want to process here for user   now let's go to the list here we have to  create a list and let's say this is public   and we're going to use an observable collection so observable collection and this  question you're gonna handle with user   and on this user we're going to say users so you  must have get set and we can say it's equal to new so let's include the model here control period  using models and now in here let's create a method   to add user defaultly so we create our privates  and it's going to return nothing so add users so add users and now with this add is yes let's copy this so anytime the contractor is  being called you want to initialize this first Okay so this ad uses we want to populate a lot  a list of Visa in our ad so we say that uses and that is this uses dot add and now  here we're going to provide new user   so what is the ID here ID  is one we're gonna have name so a name is going to be Frank Hughes then we have  email is also going to be so let's say Frank at mail .com then the last one this country   so our country is going to be GH and that is Ghana  now I'm going to pause this video I'm going to   just copy this and paste and make a change in it  because you want to have a list of users so to   stop wasting time here I'm going to place  this okay a lot so I'll paste this too then I'm going to go off and  now edit them and I'll come back all right so I have this and you can  see I have almost 10 data here now   when I call this method I want to add  all this method into this list okay so this is what we are doing here so we  are adding all this method when the page   loads we are adding all this and we are  calling this method here inside the page   The Constructor so when it's  going to attack gets called   it also calls this method add this method and now  on the list here get populated with the data in it   okay the next thing to do here is we have  to bind this user list to a collection View   so let's do that so in the home  here let's add collection View now with this collection View we have some  few things to do we can set item source so item source and that is this if we  can be able to bind this we have to add   a name space so X M L and S and we're going  to use as view model now with this view model you're gonna say that's namespace and now here we are calling for demo.va models and we can specify X data type then we  save view model W was are we created now this view model we want to check  so we have this namespace.demo.d model   now add data type is equal to so  this view model let's do it again so you save view model and now we are  going inherit from home view model so   that is this home view model so  with this we can add for binding and now we want to bind users so once you  have this bind what we can do again we can   set up a collection view template so dot item  template how you want to arrange an item so item template and now in that we can also have data templates and on this data template we need to write X data type  and now it is view model so here I'm not going to use the view  model we are going to use model so   let's add this models too so XML and S we  say models is equal to that's namespace so I'm going to use name space then demo so let's see let's clear one of this so demo Dot and you have to use  models so in here we can talk about user so you have to first write model then slash user okay so now we have this user  object here we can specify which property that   we want to display so let's display  one and that's going to be the name so we're going to use let's use frame and with this Frame we can set border color so let's see now we have border to any so let's set you this and we  have margin so let's say five pesos each so 5 left we have now for  bottom or for top you want five so top five now bottom is  five and our last is five so   we're writing all this you can decide to  maintain only one then we need to use label so this label reset test to binding the name  straightforward let's do this see it is now   loaded and we have the list here so let's go to  the home view model and now let's create a method   and now this method is going to handle  when the frame gets tapped so in here let's create public and that is white so we say user tab and now use that type so we're going to pass in  this user and I'm going to use an object here user okay now when this is not  attacked what else can we do let's see so we're going to call the  navigation service and remember the   navigation service is over here so  we can call this navigation service so we say navigation service so in navigation service Dot  and we can have navigate to so let's set this navigation service dots navigate  to async and now in here you know we need to pass   the content page name and also um a list of this  auditionary that comprise of a key value or pair   now in here the next question we're going to  do here what is a router what is the content   page that you want to move up to so instead  of specifying the name we can use name of   so name off and now let's pass in  detail page so we want to go to details   so going to a period let's use views  okay and aside from this we want to go   to details I want to pass in this area  that's a list so we call new dictionary so new dictionary and it is a strength as you  made it in the service creation and this is object   so now we have this and let's come to new  lines over here we open it and now in here   we have to specify the string the key and also  the object value so what is the key and here   it is it's going to be let's say user details  and what is the object here and that is a user   that's the user that we are talking about okay  then we close this but I know we have this here   it is saying that this base V model the navigation  service is inaccessible DTS protection level so   let's go there and see oh okay so let's change  here to public no protected so when it's set   there to private it means that only this scope can  use that from this no one can use it but when you   set it protected it means we can use it which is  when it is related to the method name that we have   caught okay so we save that now let's go back  and see home view model and yeah it is set now   now so now we have this let's put  on top that is a really command   so I really recommend and I can use that typed  so let's go to the home page and this and let's   bind this so we have the home view model  band already so let's in some of the frame   let's add frame guesser so as soon as these  are types on it we can navigate to the page   so let's see how to go about that now let's  specify a frame dots and here's guitar recognizes   and in here we can talk about tap so you  want to use tab guest star recognizer now the command let's see do you have any issue  okay now the command that you want to use here   so we specify a command and now we say  we want to bind it to x dot relative   so let's say we have binding and here might be Source rest so we have source and now this Source we pass in  x dot relative binding now this relative binding   we're going to look up for the ancestral type  now this ancestor type we are referring to x dot   and here that is a view model so this x we must  pass in type first X Type first now this let's   type it then we pass in this view model so  which model that we are talking about talking   about home view model so let's search for Home  view model okay now once you're done with this   we go back here and now we have to specify the  path so which one you're talking about that is   user typed command so that is a path  that we are talking about now let's see   we are not getting this here let's see  if this um home view model and let's   go to home view model we have this relay  command you can just now let's add it again so really command let's save  this let's go back to the home and let's see so path is equal  to so user types let's see let's go back again to the home   home view model and now Andre is a user tab  so you can grab this then go to the home replace this and we can add the command so this is  what we are referring to so we can now save this so once you pass in the command  we need to pass in or provide the   parameters too so in here we can also  specify command parameter two foreign parameter and I reset this to binding and we're going to use itself so referring  to itself that's why we need to use the DOT   okay then you close the tab um  guest star recognizer all right   so when we have this we are good to go  now let's see what we can do from here so when we run this let's see the output of this so we have the list now let's click on this  and see so you see as soon as I click on it   we have the details and we have welcome to the  net marry now all you have to do again is to   grab the content Here and Now display it on the  screen so let's use that so now I can see that   from the home page view model we are calling the  navigation service and we navigate to and pass   in the detail page that is the contents page name  and also the parameter that you want to also add   that's a list of dictionary or the dictionary  that I want to watch provide as a parameter to   they serve it let's go to the detail page and also  accept it so we go to the detailed page view model   and now in here we have to use Query parameter  to accept this so we're going to use Query another query property and here we're  here to we have name and the query ID   now what's the name that you want to use  that is user let's say this is user detail   okay now this is editor but you shouldn't  put this so we have to use name of then we can now pass in this user detail okay  then this is a detail you know we are talking   about this user so we have to use this user  control period then let's use the models and   now so that is what's going to hold the data  okay now what is the next thing to do here so we need to also specify the query  ID now what is your query ID coming in   let's quickly check from the home  view model so we check from the   home view model and now it is a user  detail so let's copy this let's go   to the detail view model and I paste this  here now to handle this we have to create so let's say private user and we say user  now let's set this as an observable property okay so it means when you call this this is  going to be stored by this object created here   okay so now let's go to the detail page  and now let's include the view model so   XM and else then we can talk about view model  so it's equal to CLR that's we have namespace   and demo dot V models and let's specify  X data type and we specify the view model   and here we are going for a detailed view  model so with this this is what you want to   do we have this vertical layout and you want to  use this label also to get the list so let's use level so first label we have test and that is name and let's copy the next one and instead of this name we're going to use  this binding and I'm going to pass in user dot name so let's see we have this detailed page  and we'll add it to the page let's check to see   we have the data type additive page view model  now talking about this user so let's save this so let's see binding and I'm gonna have this user let's see the reason why we are not having that  we have the namespace added here view models   and data type and detailed view model okay  so let's close this before um now let's see so we have user now is popping up dot name   okay so you know something we can put this in um  horizontal stack layout and we can grab this again and put this once more maybe we have the user ID and this 90. we have name and that is a name we have what  else again do we have so we have   ID name email and Country so we go to  The Details page now here we have email and here it is user   dot email so that email and the last one we have  dot country and now let's change here to country okay all right now let's run this  again and see what we have now okay so I paid this now loaded now let's see  if I click on the first one the last one John   Hughes it has to open and turn the details  of John Hughes I can just go back here and   um this one because we have Hanson Hughes  so go back also you can see we have   um Richmond and you can see we have the same data  here so that is a navigating to a page whereby you   have to provide a list or object as a dictionary  to the page let's have a look at let's create an   two by 10 whereby we have to click on  go back to go back to the home page okay   so in here let's see what we can do let's  add content page so let's click close this and let's say content page dot two bar items and are in here we have two bar item   and what is a test here maybe um home okay so we  have room now what is your command so let's go   to the detailed page and create a command there  so in here we have public why and it is go home so go home and now here we have  to call this navigation service   dot navigate to now let's specify  name of and then that is a home page and we can decide to leave after  this or we can specify now here too   okay now let's see so with this name of this is the you know here you are referring  to the home page now with this let's see the   error in this then we try to rectify that  okay so let's include this relay command so I really recommend now save that go to  the detailed page and are in here add binding and now that is go home command let's  save this now let's run this and see okay so let's click on any of this so Casper use  now you see we have home if I click on this room   we might have an exception here yes because we  cannot the value cannot be now here as you can   see so let's see what we can talk about what we  can do so in here we can decide to remove this   okay now let's see so let's save  this and let's reload this page again so it's open let's click on any of this  now let's click on home okay so nothing   happens let's see okay so here let's remove  this now and now he is supposed to be home   so control period let's include views  now let's reload this page again so let's see now click on this go back home and okay so it seems this button is not  working so let's find that and see so   navigate server navigation um service dot  navigate to async we call this name off now   you know here we are referring to a home  page so in solve this you can decide to   let's grab this and now let's  specify this dollar sign   yeah so in this we are going to use and now  name off so we can use now let's paste this so this is a parameter that you want to use  let's try these two and see what's going to   happen Okay so the page is loaded my queues click  on it now go back home now you see we are in so   let's say boom now job Hughes   go home good so you can see that it's a nice  way of creating a service for navigation and   utilizing that service in your content Pages or  your view models using the mbvm architecture to   do it I believe this is very simple and I'm going  to leave this at a GitHub so you can just go in   there and I'll grab this so I screwed over there  I'll push it to like a tab as well okay so if   you like what I'm doing give me a thumbs up and  also subscribe to the channel go to the playlist   we have a lot of lessons that you can take over  there so thank you and I'm going to catch you up

Channel: Netcode-Hub

Views: 924

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, 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

Id: OBPWyFunUEI

Length: 56min 48sec (3408 seconds)

Published: Sat Aug 05 2023