What are Blazor Layouts? | Blazor Tutorial 3

hello everybody I'm a Killa still gonna talk about blazer layouts this video is part of a series I'm doing about blazer if you're interested in that and you don't wanna miss any episodes subscribe ring the bell as well to get notified the new episodes blazer layouts allow us to reuse the majority of a page while only modifying what's different from page to page for example the header navigation the footer the copyright notice all that can stay the same across all our pages but the main content of the page can change quite significantly this is where the main layout or the default layout would come into place we will put all those stunts things there and then we would modify on every page with components hearing that you might feel like saying wait a second isn't that exactly what components do anyway and you would be right you can actually think of layouts as a master component it can use the same dependency injection or data binding functionality and many others that we will see in this video in fact the only difference between layout and a component is that a layout inherits from the layout component base and because of that it defines a body property which we use to render the main layout content now let's take a look at what we get out-of-the-box and blazer which is the default layout and explain how everything hangs together I think the best place to start looking at the project is to go to the pages and then look at the host the host is as you can see a page on the root level and then we have the very very high level HTML literally I'll HTML tags here the head is here the body is here look at this and then looking at the index component as well you might see that they have the same exact page route so how does blazar know where to send these requests well if we look at the host you can see that in here in the app element we actually tell browser to render the app rays or file if we go to the appraisal file you can see that here's where the routing takes place and then this routing is being used to send the request to the appropriate pages let's look what I get first we have the app assembly which is the Assembly of the application that blazer is running on in this scenario we're using the program dot C s we also have the found element and the not found element and these are fairly self-explanatory if there is a component like the index which is the root page or the fetch data which is the forceless fetch data then the router will send the request there if there isn't then it will show a layout to you with the main layout and say sorry there's nothing at this address let's take a look at that here I'm running the application and I can navigate around normally but what happens if I enter something that doesn't exist well I'm getting this sorry there's nothing at this address message this is where this is being used because the page is not found and then layout is used here I don't actually need a layout here I can delete this and just push this back and let's see what happens now if I again go to this random page that doesn't exist we have nothing here it's just a plain text thing so it is nothing at this address so if I revert this change this layer and what view allows us to customize the layout view at this level and this route view which we will look more in depth in our router video is defining a default layout for the whole application to use let's take a look at how we can customize this layout view with a new layer for example our main layout if we take a look at that has a sidebar with a nav menu let's say I don't want that what I'm gonna do is I'm gonna create a new razor page I'm gonna go here and say new file and I'm gonna name this No now layout dot razor and that's just a razor component which is empty so I'm gonna copy everything in this main layout component and I'm gonna paste it here we're inheriting from the layout component base making this and layout and then I'm gonna delete this sidebar now let's go to the app dog razor and change this from main layout to know now layout now let's run this application and see what happens if I go at the base doesn't exist I'm getting the same message but no navigation that's because we're using a different layout where the nav component does not exist in layout can also be overridden on a per component basis let's see how we can do that I'm gonna go out the showcase dot razor and in here now that I have this Knoll a the tracer I'm gonna go here and say layout is no nav layout now this means that these pages this component only will use the no nav layout let's run this so here application is running so I'm gonna go to counter all fine fetch data on fine but show cases where I changed it to a layout with out navigations if I click on that navigation is gone everything is full-page that's because I'm using the different layout now without any nav now what if I want to change everything on this pages folder to use the no nav layout but a single page well blazer is quite smart about it I can actually go in the pages folder which is the folder I wanna essentially override the layout for everything and we're gonna create a new file and I'm gonna name this file underscore imports dot raiser and in here I can add this layout no nav layout this means that everything in this page automatically gets that input by the way this can't be used for anything if you want to inject a service like literally checked random service and then name it as well for any single component in a folder you can do that and I'll actually go in the fetch data now and I could technically to do random service random ID because even though it's not injected in here it is injected through the import dot razor brazier is smart enough to deal with this so let me just remove this and just keep the known of layout and what I want is every page here but the index to be overridden with a known of layout so I'm gonna go in the index and I'm gonna say layout main layout this means that my main page will keep my main layout but everything else will use the known of layout let's run this and see it in action so how are you gonna see my home page has this expect Lynnette with a navigation but if I click fetch data navigates was gone counter navigation was gone showcase now guess was gone so I override it for everything in the folder but this one file where I override it again to enforce the one I want last but certainly not least as I said a layout can be seen as a component with superpowers so for that reason I can actually nest my layouts to reuse even more code for example my error page it's fine that it can just remove the navigation but what if I want to add some extra stuff or even change it a bit more I'm gonna go ahead and create a new file and I'm gonna name this file error layout dot eraser and I'm going to say inherits from layout component base and I'll need to import that and also I'm gonna do layout and then say no now layout this means that I am a layout by myself but I also use another layout as a nested one and I'm becoming a nested one so now I can do body and the body will be coming from the no nav layout which will remove the navigation and now I cannot expand here saying your princess is in another castle so if I save that let's see how that looks like what I wanna see is the index page to have normal navigation everything else to not have any navigation and the arrow page to also have this message on top of a missing navigation the last thing I want to do for this to work is to go to the app to tracer and update this to error layout and now if I run this as you can see home page looks as expected we have everything then we go to counter no never same for fetch date and nothing changed but if I go to a page that does not exist as you can see sorry there's nothing in this address no love but on top of that your princess is in another custom that's all I had for you for today thank you very much for watching special thanks to all my github sponsors that helped make these videos possible if you like what I do you want to support me as well you'll find the link down below leave a like if you like this video subscribe for more content like this and ring the bell as well to get notifications with new videos and we'll see you in the next video keep coding

Channel: Nick Chapsas

Views: 20,339

Keywords: Elfocrash, elfo, coding, asp.net, .netcore, dot net, core, C#, how to code, tutorial, asp.net core, js, csharp, development, lesson, software engineering, dev, microsoft, microsoft mvp, .net core, nick chapsas, chapsas, asp.net core 3, blazor, razor, blazor tutorial, blazor tutorial for beginners, blazor fundamentals, blazor layouts, dotnet, .net

Id: F1JsJZU3-Rc

Length: 9min 8sec (548 seconds)

Published: Fri Oct 04 2019