Blazor in 2020 - part 2 - Navigation

1. Intro: Hello and welcome to this low close. This will be a class on navigation in Blazer. Now, this is part of Siri's off blazer in 2020. The first part is already there on DA In that one, we cover basics in this one. However, we will cover the navigation aspect off Blazer. Now you may think there's no a lot to learn about navigation navigating between pages, but it is simply not true. There is quite a bit to drew to do, and there are some rather tricky parts, first of all, before we go anywhere. So far in the previous part, we have worked basically on the index don trees, a page in the template. So in this case we were actually clean up. The template were awesome examples that you do not need. So we will clean that up and we will establish some new pages from there will get started with the basics, established some routes and then parameters do some navigating, and then you will see some other things, such as navigating using C sharp from C shop methods and things like that. Now, before that said, let's jump into the Kloss 2. Clean up the template: Hello, Invest lecture. You'll learn how to clean up your templates. Okay, So you have noticed by now that once you greet a new project to get this nice little template which handles, actually quite a few things which you don't really even see. But it also contains some Robin Austin and useless examples. You do not need that. You don't need the navigation, man. You definitely don't need a counter, some kind of account, a page for your real world applications. And even for your better, bigger practice projects, it just don't need that. Okay, so if we go into the solution Explorer right hair. Okay, you can see blazer amp one just a simple client side project. Nothing fancy, Right? And then we have in the w w route, right? Hair, we have ah, some bit off stuff, okay? And this is basically where it all starts. So you have index dot html This is this off the basic entry point, OK. And in this app is where all your blazer stuff will be rendered. Now, mind Jarvis, this right here is a crucial, crucial part for blazer. It has to be that it must be that you cannot delete matter. You should also leave this error handling thing. It won't hurt services for on handled errors. And of course, you can modify it as well. Okay, so after that, of course AP. This is where your app will be if you need to include some JavaScript you learn later in this course how Teoh actually execute a challenge. Squirt function from C shop. You will be including it somewhere, however, in the head or maybe below the app her depending on the use case of my particular library or whatever it is you're including. And for the CSS, you can see that we have my default, some science CSN some default CSS okay. And obviously bootstrap is way label. So this is where you include it all. Okay, All that there's really not much to look and hair. And as you can see, there's really not much to delete. One thing I will say initially when you see this loading thing, you can actually replace the contents off a napper. Probably you would want to put in some gift. Ah, picture image of some kind of her loading icon. Okay, sir, let's go to solution Explorer and Let's see what we can delete. Obviously we can delete, see assessed offer. But I will leave the science here says Just put your CSS. And then unless, of course, you have some some kind of a different structure for it. Sample data can go. So we selected that click delete right hair. It pops up the little verification for relation right hand and OK, we do not mean that. So that's gone. The W W Root is ready to go. It's clean off, but you don't really have toe deleting that. It doesn't matter that much. But if you want to have us off nice clean a ground up project. You should delete night as well. Now, going into pages, I came. We'll do a bit more deleting now. Ah, this counter and fed Schnatter needs to go. Okay, right hand. It bumps up and needs to go. It's gone. Okay. Now for the layouts for the layouts, you'll see how to use them on. Duh. I would say now, menu survey prompt Needs to go just like that. Okay, So with them gone, there's really now all about cleaning up a coat. So if we're going to end exhort razor right here. Okay, in the end, exult Reza, we can delete it. Okay. And if you don't like your main initial page being called in to exalt razor can create a new file as long as it has with route of its basic initial route. You'll see how the routes work soon enough. Okay, so this is how you set it up now for the main layout form a loud has a bit more deleting, as we did use the previous file. You later learn how it was used. It doesn't matter right now is simply delete. Okay, You have the body right hand the body so above the body. Mahadev, you drag it up to the dump right here. You see the selection behind lighted part and click on backspace or delete is gone. You don't need that than the Div in the bottom. And then the sidebar, Kloss. That's it. We're now good to go. If I launch this if I launches it will launch in a second on chrome. You'll see it all very nice and clean and completely empty. So this is how you clean it up. You start from WWD route. If you really need that. And then you go through pages, you delete the files, you delete the files from the shed, right, And then you delete that little bit of code. And as you can see, we really have nothing hair anymore. And before that said we will conclude this lecture. 3. Basics of navigation: Hello In this lecture will start learning about the navigation and with will be just a very simple introduction to it. Later we will get into the templates. We'll get into the barometers and things like that. But for starters, we need to find out how toe add a new page, okay? And how to navigate from one page to the other. Now, the whole thing in terms of navigation actually starts at the app dot razor. Okay, at the ab dot razor, this is the way you can find the router and all that different stuff. Mad handles the navigation. Having sad Matt abduct razor should stay as it ISS. We'll take a look at it later when it comes to allows. But other than that, it should just stay by default as default. Okay, you should not mess with it at all. Now let's get to some pages. Okay, So in the solution Explorer in the solution explorer right here we have ah pages afford a It's a cleaned up template now. Okay? Nothing. Messi, nothing like that. We have some pages, and as you can see, we have the normal endings. But then we also have a 2nd 1 called second page, second page don't raise is so a page is a razor file, and the rays of fire is also a component which we will cover in the next section. Now, if I right click on the pages forwarder or Henry Ford were warned my page to be I will goto ad Okay, our click new item. And then this whole dialog will a pair, right? And then what I need to find is a razor component. A case? It's a razor component. That is the page. So you find that you name it according to where you want it says component. But it is a page and a components. A razor file. Okay, so this one with a little blazer logo that is razor component and that is your page file. So you enter your name, click OK or rather add in this case and you have it now. We already have one solicitor. Look at the navigation. If we go to the actual second page, it has one route. Okay, so you see on top, we have this page directive. Now the page directive allows you to give around to that page. Okay, so you have your whole site and then you have these rounds to specific pages. If you navigate a second page in this case, you will get to the second page. Now you can actually have multiple routes. You can have them. So, in the index dot Razor, what I've done is I've added another route. You see, we have the the fort won by default. It will always go to this empty default route. OK, but you're gonna add another one. Need be. This will be more useful when it comes to parameters. Oh, case of bad Boobie really is for now, a simple rounds. It's not really useful. You probably won't use it, but it's good to know that this option does exist. So we can either navigate to the index dot razor by navigating just an empty domain. You're all right or we can add best route. Now the way you navigate. Ah, one simple way at least is through an A. Okay, an a element a tag in the HTML, you put the h rough. We've no your row of no domain, no, nothing like that. And you simply put in your route and it will navigate where you need it to navigate, right? So let's take a look at how it works. So quite simple. Running on chrome already, right? And we can go to second page. You see, we're now in the second page and we can move back to the index. He just like that. You can also go back and forth. You see, it all works quite perfectly. It's a handled four year for most parts of is really nothing to worry about. And this is how the basic navigation works. And with that, we will conclude this lecture. 4. Parameters: hello in this lecture to learn how to use barometers in a page. Now that is actually quite easy to do and quite straightforward as well, in a way, at least in one way, in one option. Eso for the example. In this case, we have a couple of pages the usual IND exhort razor and then the usual second page. Okay, second patient razor. That's a fine. Now let's start with the index dot razor, and this is a Soffa blazer for way to actually retrieve those parameters. So, as you can see in this case, the U. R l would not be a with that question mark. And then you have the name off a barometer of a key for the parameter. And then you have the ampersand and all that other stuff. You don't have that. He simply list them as a normal route. OK, so you might have a longer around, see saying test like that. Okay, And then that would be your route to this page. Blast the barometers. Now, one thing to note, one thing to note is not if you don't match the parameters, the navigation will fail. And this is where having several rounds is very useful. Okay, It's very useful because in this case, if I don't provide any parameters at all, it will simply fall back to this route again. It will still open that page now. Actually, I haven't running on Chrome. Okay, so I just opened the first speech. And as you can see, we're on index speech and we see no parameters. But we do have it all opened. It did not crash or anything like that. So let's get back to the Kurd and let's take a look now to set the parameters a case. So you have to have these parameter attributes on variables on properties. You need to create a property in the code section. Now the way do you that you do public. Okay, this is crucial. You have to have it. Us public. Otherwise it won't work as a parameter. You have to have it. Us public. So you do public than the type. It might be some kind of a class trunked, whatever it ISS. Obviously, in this case, you can only really have string because you do pass through string for me or else. Once we get to components, it will be a different story. But for the Euros you do string. So it has to be public string than the name, Of course. And then you need to have You must have these get set things you do get set. Nothing else. Mets it. You can actually assign something. Teoh Eso for the fourth Valuev need that? So you just do it like that. Okay, This would be your default value if you need that. But in this case, we'd not. So you do public than string, then Peron one. And then these get set. Now off course, One of the more crucial parts is the barometer. But all of them a crucial So basically started an attribute barometer than public and then get set. Okay, so you do that for every parameter that you need. Now, the way it goes from the route from the route to this variable to this property is you match the names you see, we have Haram one right hair. And then we have beram one ride. Hera's well, and they are in these curly braces. So if it's a parameter, if it's not just part of a route, you put it in Cali braces and you match with word with piece of text with the name for your variable were named for your property. This is very important. And that is how it happens now in this H ref, you can see that we have a self around second base of it's actually goes to the second page . And then we have a more conventional way off, actually passing frivolous barometers. We have a question mark. We have Parham. One equals you see, this comes from see shop. This is the barometer, right? We take this one and not one. So the first offer role will have nothing in both pages. Right? And then we navigate to the second Beijing all in the second page itself. It's a bit more complex, Okay? But it is quite useful if you want to use both conventional routes. And again it depends on your preference. Depends on your structure. Where were you need this or you need that. Obviously the first way is a lot quicker. This one is a bit more complex Now you can see what we have. Navigation manager invoked. Okay, we have navigation manager. We call it now. Manager. Right. And we also have using system dot Web toe. Basically, we have variable one variable two surveys, RV parameters. We use our query variables right that we provide and we display. But in the get parameters method is where our concern solved begins. Okay, s So this is where we want to work with it. Andi, as you can see, As you can see, we have get barometers method and then we have Ah a b u r i. So this is V's off absolute your I Okay. And we create a new you Arai is he would create a new your eye from navigation manager property. You are right. So this is the you arrive. You are well on the page that you're sitting right now and obviously that contains your query string. Now, to get the actual barometers we need to use http Utility, which comes from system dot Web And in that we use the method Bar Square E string. OK, we use in a method bars query string right hand. We provide the query than it returns our parameters. Query parameters, right? Very, very both. And then from there by the key by the key value keys we can access them and display them. Now if we take a look at how it all works, how it all comes together, we have it all running in the chrome. So if I navigate to the second page, you can see that we had empty parameters. So this would be kind of boring, right? Let's insert something Say test. That's too. We navigate again. OK, now we need to get them, and we do get them test and test two. Now again, I can actually called me that. Copy that. Like that. Okay. And then go to index. You will see it won't work like that. It won't work like that to see. It's just an empty. So it kind of broke down to that original state. Now I can remove those things where I like that and do it in a more blazer ful kind of the way. I can't. We go to the index and it is displayed with his bees off blazer ful way off doing it. So, as you can see, there was all of these parameters are obviously quite useful. And this is how you access them. And with that we will conclude this lecture 5. Layouts: Hello. In this lecture you learn how to use layouts. Now layouts are quite important and maybe useful. Okay, you're always using a layout. You're using the main layout toe over time. Always. But they're awesome cases where you might need to have, ah, additional layers, different layouts. Say, for example, for your initial pages such as log in registration and stuff like that. You might want to have a different loud for those pages. And this is why this kind of diversity of layouts is good. So we have a couple of him. Actually, if we go to a solution Explorer in this example, you can see that we have in the shared we have main layout and then second layout. I've added. Now this layout is just a simple razor file, just a simple file that she would use for a page of same thing. OK, and we have mean layout and the secondly or not. Let's take a look at them a case. So this is the main one. And as you can see, I have a couple of dips. I have a couple of decades. We have a little border going on on the 1st 1 and it says this is remain layout. Now, in the second, if we display the body, that is the current page of a pager to which you have navigated. Okay, so this is the main one. Now, the second layout, the second lout. It's all quite similar. In fact, the same. Almost the only difference is mattered. Says this is the second loud. So we see the difference. You will see that it does, in fact, navigate. Okay, now let's take a look at where it all starts. If we go back to solution explorer wide hair like that, you can see in the abduct razor in the abduct razor. Okay, we go into that. This is where the whole thing starts. You already know that. But we have, ah, two of these components. We have found a K and then we have not found. So if for some reason the navigation fails, the euro is not found. The round does not exist to any page. It will display this whole thing. Now it will do it in the main layout. Okay. And this is where you declare it. So if you want your error page to have a different layer from other pages, which is something you usually might want to have. Okay, you would basically put in your layout for decide layout wherever. Ah, basically right hair. OK, so if you needed a second loud, you would do second loud. Now, this error message of sorts would be displayed in the second loud we leave the main one in this case will be looking at that. But for a founder, this is when the pages found and displayed from there. Right? We have a route view, okay? And then we have around data. We won't get into that. But then we have default loud, and this is your default loud. This is where you declare with the fort loud that is used by default. Okay. And in this case, we have me loud. In fact, you have it over time by default, and I've suggested to stick to that main layout. Unless, of course, you do have some more options. Perhaps more advanced arrangement in terms off a layouts. Okay. So usually just stick to the main layout like that. Now, you can also specify it in specific pages. Okay, so we have second loud and we have second component. Second component. Okay, this is the page, right? Second page, second component. Doesn't matter what we call it. It you will use video foretell out the main layout because it's not declared anywhere. Now, in the 3rd 1 however, we have a declared. We declare the second loud and to declare it you use at loud directive and you declare that raised the file, which is your loud, your second furred secondary, whatever you wanna call it, So you declare it. And for this particular page, you'll see second lout. Okay. You won't see it in the mainly out. You will see it in the 2nd 1 This is actually quite easy to do. And this is basically the only thing you actually have to remember. Now if we go to the Crume, see how it works? I came. You see, we have the main loud and we have the second div to second. We go to second. It's silver. Mainly Odyssey. This is a meal out, right? As usual, as always. But then, if we go to food, okay, foot component, we see promotion. Same thing Barta does in fact, say this is the second loud and we are on deferred beach for drought, right? If we go back, this is the main loud and we are on the second. So again, this is quite simple. They are basically free places where you can change that on that failed navigation on the default and then on each particular page. And with that, we will conclude this lecture. 6. Life cycle events: Hello. In this lecture will take a look at something called life cycle events. So these advance occur on the life cycles, various cycles off, life for the page. Okay, that is for the page. Or in other words, for the dot razor flower. It will also apply for the components when we get to them a k So for a page off or component, basically, it gets initiated, and then it gets rendered. So a few different events will occur Do during that whole cycle off events. Okay, so let's take a look at them now. First of all, we have, ah, one code on initialized. A sink, right. This is the initial one. Once the pager basically gets initialized for rendering this event occurs and what we're doing here, we have a little string. We are displaying it and we add divest string, different event when it occurs, right? So you'll basically see which you weren't occurred first on which one was lost. So we have ah, on initialized. Right? And this is what you do. Do protected override on initialized. And you don't need to remember. These are show your little trick. What you can do in visual studio. Now, if I write, protected, protected like that and then I write override, I get these suggestions. Obviously, in this case, I already have one after render saying so. I wouldn't see that when initial oysters think I wouldn't see as well. But you do see all of them, All of them that are available. Okay, so this is ah, quite any trick that will save you a bit of time and time looking at a different references . Now, you can see we have on initial loins to sink. This one occurs first, and you'll see that quite clearly. Then we have the 2nd 1 actually is on Perama to set a sink. So when any parameter is set, this one will occur. Now, this isn't very useful in pages. This will be more useful for you in components, as you can change the parameters in components even after that component has been rendered . Okay, so for pages again, deal of your barometers basically on initialize the sink, it won't cause any trouble. Right? And, uh, for be on after render sink. And now this can be useful when you have some javascript, some javascript libraries that you are using your interacting if you learn how to do that later in the course. But this can be useful because it occurs once the page has been rendered at his once. All the elements ah are displayed a case that you already have them. You have the ideas and all that which may be needed for when some javascript functional something is initialized. But there is a bit of a tricky part into this that you have this first render and first Renda is basically when the pages opened or when component is the first opened. When it re renders for whatever reason, this will be force. So it won't be a first round anymore. And we, as you can see, add on after Randy to display string. But we also have some big old state has changed. And now this is a method. And what this does it basically rear enders it rear end us that page. It re renders that component. So you see, we do need this It actually display this on after render. But we can't do that outside the first rounder because you see what will happen is it will add it will answer to the whole string, right? And then it will re Rendah and then visible occur again on after render thing And then once again and once again and once again and it will fail, it will crash. So that is why we only do that on first. Rendah Onda Uh, we would take a look at natural a bit later we'll take a look at some background tossed with is what it is useful for. But now let's look at the Crume I can Let's look at the chrome right hand we have Ah, you see on initialized when we have on parameters and finally on after render So this is how it works Services a good place for reference. And do you remember that little trick and you will be fine And Riffat we will conclude this lecture