Page Layouts

The boilerplate code uses bootstrap CSS, in the MainLayout component based on the routing specified in the NavMenu components,the corresponding components are rendered in @Body div element. NavLink is the inbuilt blazor component which provides routing to the list of components as specified in href attribute.

//MainLayout.razor
@inherits LayoutComponentBase
<div>
    <NavMenu />
</div>
<div >
    @Body   
</div>
///NavMenu.razor
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
   Home
</NavLink>
<NavLink class="nav-link" href="counter">
   Counter
</NavLink>
<NavLink class="nav-link" href="fetchdata">
   Fetch data
</NavLink>

Last Updated: 11/9/2019, 11:22:54 AM