Blazor Tutorial C# - Part 6 - Blazor Navigation & Blazor Routing - Blazor Webassembly

hi welcome to coding droplets and thank you for watching this video. This is part 6 of dotnet blazor beginner to advanced tutorial series in this video we are going to cover about blazor navigation so it is very important that we must provide options for our application users to navigate through our application i'll walk you through the entire processes of blazor navigation and routing first let me show you the things we are going to see in this video we are going to see more about blazor component routing using page directives @page then navigation using hyperlinks navigation manager nav links then route parameters then page not found routing so we will be going in detail about all these points in our video so stay tuned don't miss the upcoming videos in the series please subscribe the channel named Coding Droplets also don't forget to press the bell icon so that you will get notified once we upload new videos fine now i have opened our demo project which we have already created in our previous sessions if you are new to this tutorial series you can open the tutorial playlist with all videos which we have already uploaded by clicking the card appearing on the top right corner of this video also you can find the playlist link in the video description so now let's start the session so first let us start with page directives page directives are the routing rules with which we can mention which razor component has to be displayed based on the url the page directives can be mentioned in the razor components using at page let's see how we can use page directives in razor components so in our demo application i am creating a new razor component in our pages folder so add then razor component and here i'm naming it as test page directive okay clicking on add and it is adding a new razor component to our project now you can see the razor component is here and here now the file is open test page directive.razor here for assigning a url to the page or to use page directive what we have to do is just mention @page then slash it should start with slash okay in double quotes we should mention the url in double quotes okay now here i'm providing test page file now let me run the application it is getting compiled here the compilation is on progress fine now the page is getting open and here now in the url we can provide slash test page in order to open this particular razor component so i'm providing slash test page here and you can see now the page is opened so i'm providing the heading like this hot reload hot reload yes now it has opened so you can see the heading here and the url is test page now if i need one more url to the same page i can provide it like this test page two okay now what i'm doing is um okay we have to stop and run it again hot reload is not working fine now slash test page as you know it will open the page now if i provide test page 2 then also it will open the same razor component so we can provide multiple page directives or @page in a single razor component so now i will show you one thing so i'm opening our index.razor file so here you can see the @page (the page directive) is provided as slash that means this is the root razor component so if we have not provided anything then automatically this particular page will get loaded yeah you can see now the index page has been loaded so here if i need one more page directive i can give it like this index okay so now clicking on hot reload yeah i think hot reload is working so now i'm if i'm providing slash index oh sorry i think the hot reload is not yet ready that is why it is showing this message there is nothing oh okay here there was a message fine i have to rerun it again fine now the index page has been loaded now i am providing slash index then also the same page will get loaded so let's see and yeah now the page is loading fine you can see here now the page has been loaded so in this way we can provide multiple page directives for a single razor component hope you are clear with this now let's move to the next topic next we are going to see about navigation using hyperlinks so in the new razor component which we have created the test page directive i'm creating a hyperlink a normal a tag and naming it as index and here i'm providing the href slash okay and here now i'm opening the index.razor and here on the bottom i'm creating another a tag so here i am giving test page directive okay and the href here i'm using is test page file now let me run the application and let's see how it works so initially the index page is getting loaded so in the index page we have given a hyperlink yeah you can see it is here test page directive so we can click on that and let's see whether it is getting navigated to our new razor component so i'm clicking on it and you can see immediately it got navigated to our new component page new razor component page and here we have created another hyperlink navigating to the index page now i'm clicking on it and you can see it has navigated to the index page of our application so this is how we can navigate using normal a tags or normal hyperlinks by providing the href property hope you are clear with this now let's move to the next topic now let's see what a navigation manager is navigation manager is a service which is a default injected dependency in blazor so we don't need to do the dependency injection like IJSRuntime which we have discussed in our previous video we can directly inject navigation manager in our razor components using at inject in a razor file or square brackets inject in a cs class and navigation manager service is having a method named NavigateTo which enables the c# (csharp) code to control the browser's url so let's see by implementing navigation manager in our demo application so let me close this browser and going to our razor components index and test page directive there is a component for an example in test page directive i am creating a new button button and here for this button i am giving a text like navigate to index okay and here i'm providing the on click event for the button on click equals now i'm creating a private method here private void navigate to index just i'm creating a method here and using this method in the on click event of the button fine now as i told we can inject navigation manager directly here so as this is a razor file we can use at inject navigation manager now i'm just providing it as nav manager then providing the name as nav manager you can provide whatever name you need now here what i'm doing is nav manager dot navigate to one moment here there is a small mistake it is navigation manager okay fine now uh nav manager dot navigate to here i can provide the ur url so index or just slash is sufficient okay fine now in the same way in our index.razor file here i'm providing a button but here there's a difference we are having a isolated c# (csharp) a cs class for this index file index.razor file so this is an isolated cs class it is a partial class so now i will show you how we can use or how we can inject navigation manager in this isolated class so first i'm creating a button here button navigate to test page okay fine now i'm providing the on click event so on click equals but uh we need to create a method inside our isolated cs class so i'm going down and here i'm creating private void navigate to test okay fine now i'm copying this method name here and pasting it here navigate to test fine now the on click event is binded now what we have to do is we have to inject navigation manager so here as we injected the service here in the same way we can use inject attribute then navigation manager and here i am providing the name navigation manager okay get set fine that is sufficient now we can use this object name the navigation this is the object name which we have mentioned so navigation manager dot navigate to and here i'm providing the url of our test page or the page directive of our test page so let me provide this page directive test page here fine that is sufficient now let's run the application and check whether it is working as expected it is getting compiled fine now the application is opening okay initially we are going to the index page so in index page we have one button to navigate to our test page directive or test page yeah you can see the button here i'm clicking on it and you can see now it got navigated to the test page you can see the url here the url got changed now i'm going back to the index page by clicking this button which we have created so now you can see we have navigated to the index page so hope you are clear with this this is how we can use the navigation manager so we have to inject it in our c sharp class or the razor component so if we are not using an isolated c sharp class we can directly inject it here using at inject so let's move to the next topic now let's have a look on nav links in blazor there is a component named nav links which we can use in menus so we will see in detail about nav links so just before that give me a thumbs up for this video if you liked it and please leave a comment so now let's move to nav links so enabling component behaves like an A Tag in normal html we use A Tag so it behaves like the same also it toggles an active css class based on whether it's hrf matches the current url current url means when the user is navigated to a page say index page for example so if the in url matches the href of index tag or the a tag then it will toggle an active css class so let's see in detail in our demo application now in our demo application so you might have noticed that now if i run the application so there are already some menus showing on the left side there is a menu bar on the left side and already some menu options are showing there so i will just show you so those are created using nav links so here you can see we have a counter menu fetch data menu then sample javascript menu okay some issue has happened i'm reloading the page fine sample javascript counter okay we are having some menu options so in our demo application these menu options are mentioned inside our main layout so the main layout we can see it inside this shared folder so here we have the main layout.razor file so i'm opening that and here you can see there is a sidebar okay and inside the sidebar it is calling and nav menu razor component so this nav menu razor component is here uh we have this file we have menu.razor file so i'm opening that and here you can see now nav link so many nav links mentioned inside this nav menu razor file so this nav link is used to create those menu options so now let me create a new menu option i'm just copying it and pasting another one and creating a new one now here i'm naming this as test page fine now the href that means the link the url so we have already created a test page here so i'm providing this url test page fine okay and this is for showing the icon so here you can see some icons on the left side so anyway i'm not going to change it let it be that list icon file now here what i'm doing is i'm pressing on hot reload and you can see now a new menu option has been added test page now if i click on that you can see the page has been displayed here okay now i'm going back to home and i need to show you something so here i'm just clicking on inspect right clicking on our menu option test page and clicking on inspect now you can see the html code that is a tag okay and the and href test page then the class is enabling so here you can see the same thing the nav link the class is snap link and it is the same mentioned here nav link okay now uh the href test page the same has been mentioned here so basically nav link is a A Tag but the difference is now if i press um so pressing that okay fine now i'm clicking on this test page and you can see the difference now you can see in the class it has added a active class css class here so as it has added this active class now you can see it has it is highlighting the test page here or this particular menu option a square kind of thing has been showing here it is showing there so it is highlighting that for that particular reason we have to add active class so once we click on that then automatically blazor will add this active class but there are some rules for that i will explain it in detail so let's move to our razor component nav menu okay here now you can see for index this is the index i believe yeah home this is the index so you can see here a match parameter which is passing to this nav link so navlink.match all so here also i'm providing the same match equals nav link match dot all okay file now i will show you the difference here now i'm refreshing the page okay we don't need this anymore so now you know that it is getting highlighted now we for in this test page we have one more page directive that is test page two so i'm just copying it and instead of test page i'm providing test page two now you can see it is not getting highlighted so that means it ha this url has to match the browser url has to match with the href which we have provided along with the snap link blazor will check whether the url is matching with this href and if it is matching then this particular menu option will be highlighted means it will add an active class to this particular attack now i am going back to test page and you can see here now it has been highlighted fine now i will show you one more thing i am creating one more page directive okay so here it is test page slash demo okay so test page slash demo file now i'm running the application is getting opened fine now if i am going to the test page you can see that it is highlighted now test page slash demo so it is directing it is redirecting to the same page but it is not highlighted as you know that the uh is not matching with the url okay but there is one more option here navlink.match prefix so prefix means if the prefix for example we have test we have mentioned test page here so if the url prefix is test page and anything coming after that then also this active class will be added to this air tag so let's see how with this now i have given prefix here let me hot reload and let me run the application now you can see we are here in test page slash demo but still sorry yeah but still this is highlighted and if i'm going to test page then also this will be highlighted so this is how we can create nav links hope you are clear with this if you have any doubts please comment to the video i will reply as soon as possible so one more thing i need to mention is navlink.navlinkmatch.prefix is the default match option so if we have not provided any anything or any value for this match option like this now here we have not provided any match parameter so automatically blazor will consider the match parameter as navlinkmatch.prefix not navlinkmatch.all hope you're clear fine so now let's move to the next topic next let's see about round parameters so a very important topic a rough parameter is a parameter that we can pass to a razor component along with the url a route parameter is defined in the url by wrapping its name in a pair of braces curly braces when adding a component's page directives using add page so let's see how we can implement it in our application so in our demo application okay we can open the test page we which we have created so let me remove all the page directives except test page file now here i'm providing a parameter a route parameter so this is how we have to provide open the curly braces now i'm providing a name say example contact name okay and here in this page say example here i need to display on the bottom i need to display this contact name whatever i received from this parameter so here what i need to do is in the code i have to declare a parameter a variable with a attribute parameter and public string contact i have to use the same name it should not be different whatever value we have given here the same thing we have to use it here and get set fine now here we need to show this parameter value so here what i'm doing is span and inside that span i'm showing compact contact me okay fine now let me run the application and i will show you how it works so the application is building yeah it got compiled now it is opening fine now we know that we have test page here so i'm giving the attribute oh sorry i'm giving the page url test page and after that slash i'm giving it like this john so yeah it is getting opened and you can see here now that john has been displayed here so that means this parameter variable is receiving value from the url so whatever value we have given along with this page directive we can access the value here in our variable okay now i need to show you one more thing say example i need multiple parameters say public ind so this should be an integer parameter so the name of this parameter is age okay sorry public in h 5 now i need to show that here so h but as this is a integer parameter what we have to mention is column int now blazor will automatically convert the value coming in this parameter to integer and assign it to this variable sorry i forgot to forgot to provide the parameter attribute so i need to provide that as well now let's see how it works so slash test page slash john h is 35. okay we are not displaying it anymore so i'll do one thing along this contact name inside bracket i'm showing the age okay hot reload yes now you can see we are receiving the value 35 which is coming along with this url now here i need to show you one more thing so you might be thinking here we have an integer data type for the age so for converting the parameter to int we have provided it like this column in here and for contact name we have a string data type so if i provide string here column string the application would work it should not be like that we should not give it like this so if we run the application first i need to show you i'm trying to build the application so now the application is getting compiled and we should not see any errors here here we can see the build got succeeded but i cannot run the application now i am trying to run the application and you can see it will throw an error so it is getting opened but while the razor components are here now you can see object reference not set to an instance of object so it will show an error like this so we should not give it we should not give sorry here it is in the test page so we should not give string data type here we just need to provide the parameter name that's it for strings okay now if i run this it will work this getting opened and you can see now it is working as normal test page slash john slash now i'm giving the age as 40 and now you can see the parameter is reading the value both integer and string fine so this is how this route parameters work so the use case for route parameters are if you are having a page there is a component to edit some data for example you are having a customer module in your application and you you and you are having a page error is a component to edit customer data so what you can do is you can pass the customer id as a parameter and here in this razor component you can provide the inputs to edit the customer data so you can fill that inputs with the customer data while it is loading and the user and you should provide the user to edit the data and save it so for those kind of things we need route parameters fine now let's move to the final topic in our applications we use to show page not found message if the user tries to access an invalid url we can show the same in blazor as well so let's see how it is for that we need to open app dot razor file so here you can see the file here now a solution explorer it is here so i'm opening app.razor so here now you can see not found component here so here um there is a not found tag and page title not found then layout view and inside layout view um yeah here it is mentioned as a parameter the layout so here it is used main layout and here it is showing a message sorry the page you are looking for does not exist okay let me run the application and i will show you how this works now here i'm just giving some dummy url 111. fine now it is showing sorry the page you are looking for does not exist the same message what is written here or mentioned here now i am removing this and i'm just mentioning it like page not found and clicking on hot reload and now you can see the message has been changed now if a user access an invalid url it will show the page not found message so you can provide whatever message you need and also here now you can see that there is a layout parameter and in for the layout parameter it is passing the type of main layout main layout is having all this menu header and all these things so if we need to show this inside the main layout we can give it like this or we can provide it like this the layout we can provide the layout here so the message will appear inside the layout now if i don't need a layout i can just use a null here okay now clicking on hot reload now what you can see is yeah there is nothing it is just showing page not found now one more thing if you need to create a new razor component for just showing the page sorry for showing the page not found error message what you can do is create a razor component so i'm creating add new razor component um naming this as page not found sorry clicking on add file now here i can show some okay here i'll do one thing page not found and style equals color red now here i'm showing some message the page you are looking for does not exist okay fine now i don't need the code part so removing it now if i need to show this let me stop the application as we have created a new razor file now if i need to show this particular razor component instead of this uh layer instead of this thing i what i can do is i can remove this and here i can provide page not found okay now running the application is getting opened now i am providing the same level kind of dummy url and you can see now it is showing page not found and the page you are looking for does not access the message here and if i need to show it inside the layout i can just provide it like this at type of main layout that's it how to reload now it should load the page inside the layout yeah it has been loaded so you can see now so this is how we can show the page not found razor component you using or by modifying the apb dot razor file hope you are clear with this so these are the points which i need to discuss in this video regarding blazor navigation so hope you liked it please give me a thumbs up for this video please leave a comment share the video subscribe the channel and see you all in the next video

Channel: Coding Droplets

Views: 219

Keywords: blazor webassembly, blazor tutorial, blazor navlink, learn blazor, blazor tutorial for beginners, learn blazor c#, navigate blazor, blazor c#, fragment navigation blazor, navigation blazor, blazor navigationmanager, blazor c# tutorial, fragment navigation blazor tutorial, blazor app.razor, blazor routing, blazor navigation, blazor navigation tutorial, blazor routing tutorial, blazor, blazor page url, what is navlink in blazor, blazor navlink usage, blazor link with params

Id: NH9cWsOeK9w

Length: 38min 23sec (2303 seconds)

Published: Fri Dec 03 2021