Blazor sections in .NET 8

in this video we're going to talk about sections a feature that is added to Blazer in net 8 Blazer sections are used to control the content in a parent razor component from a child component this is done by using two built-in razor components the section Outlet component and the section content component let's see how this works with an example for this demo I have the Blazer new features. net AG solution opened up now let's say I want to create a heading on three pages the counter page homepage and the weather page so let's go to the counter page in the client project and create a H3 heading with the text counter page let's copy this markup and paste it in the homepage and replace the text with homepage do the same thing for the weather page but this time replace the text with just weather now run the app and we see the heading on each page now let's say we want to display the heading somewhere outside the page for example in the top row here but this div is present in the main layout component so let's take an attempt to render the page text there copy this heading markup and go to the main layout component and inside the div with the class top row replace the anchor tag with the copied markup so paste the markup here now instead of the static weather text let's use razor syntax to display the value of a field called page text in the code block create a private string field called page text now overwrite the life cycle method on parameter set and here we want to get the name of the page so let's go to the top and inject a service called navigation manager and specify navigation and scroll down and create a local variable called page name and set it to navigation. 2base relative path and pass in navigation. URI using this value we can set the page text like so now if we run the application we see that in the top right corner the current page name is displayed but this approach has an issue and that is what if there are more pages and we want to display the name of the page in the top row div for each page then the if Els logic will increase in order to accommodate more number of pages so let's use Blazer sections to solve this problem let's remove this code block and here we can define a section Outlet component as you can see it's present in microsoft. aspet core. components. sections namespace so we we can add that to the Imports file if you want then go back to the main layout component and add a section Outlet component as you can see here the section Outlet component accepts a parameter called section name there's also a parameter called section ID we cannot specify both we can specify only one let's first see how section name works so let's set the section name to page hyphen text now go to the counter page and add a section content component and as you can see here it accepts a section name parameter set it to the one that's set in the section Outlet component which is Page hyphen text let's copy paste this markup now do the same thing for the homepage specify homepage and lastly for the weather component we just specify let's run the app we can see our page text getting updated now one point to note is that multiple section Outlet components can't have the same section name or section ID also if multiple section content components have the same section name then the matching section Outlet component renders the content of the last rendered section content so if you don't want other section content components to match the name of a section Outlet then we can use the section ID parameter to identify a section and for using this an object reference is needed so go to the main layout component and Define an internal static object field called page text and instantiate it now scroll to the top and replace the section name parameter with Section ID and set it to the page text field go to the counter page and replace the section name parameter with Section ID and we need to set it to the same same field that's present in main layout so import the name space and set it to main layout. page text again you can add the using directive in the Imports file if you want undo the same thing for the homepage and the weather page and run the app we can see that the name of the current page is displayed and that's the Blazer sections feature remember it's used to control content in a parent component from a child component next we'll see how to render razor components outside the context of an HTTP request or asp.net code

Channel: CodeGanesh

Views: 108

Keywords:

Id: Q3wNprOhuE8

Length: 5min 42sec (342 seconds)

Published: Wed Apr 10 2024