CODEWITHSUNDEEP
razorblazorblazor-client-side
jbyrd
jbyrd

Reputation: 5595

@RenderSection Equivalent in Blazor?

Razor pages have a mechanism where you can reference named sections in your layout, and then specify them in your pages that use that layout. For example, if your Layout (_Layout.cshtml) looks like this:

@using...
...
<!DOCTYPE html>
...
<body>
...
@RenderSection("modals", required: false)
...

and then in your dashboard page, for example, you'd have:

<div>
...
</div>
...
...
@section modals
{
    <div class="modal-container>...</div>
    <div class="modal-container>...</div>
}

that would inject the contents of @section modals... into the place in the layout where @RenderSection("modals") is.

How can this be done in Blazor?

Upvotes: 16

Views: 7638

Answers (3)

user764754
user764754

Reputation: 4236

Section support will be added with .NET 8 (source):

@using Microsoft.AspNetCore.Components.Sections
...
<div class="top-row px-4">
    <SectionOutlet SectionName="TopRowSection" />    
</div>

<SectionContent SectionName="TopRowSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

Upvotes: 16

user1519979
user1519979

Reputation: 1874

I have created a component to get something similar to sections:

https://github.com/inspgadget/BlazorSections

Upvotes: 2

enet
enet

Reputation: 45684

Unfortunately, no such feature is currently supported in Blazor. Blazor team and the community have been discussing the necessity of this feature over a year now, but for no avail. Read here about Sections in Blazor.

However, if you're looking for a 'temporary solution', you may read a comment by SteveAndeson about how to pass parameter values from a Blazor component page to its layout. I know that you're looking for a way to render the @Body plus @EndBody, but the principal remain the same: You have to create a layout component instead of the default layout

Hope this helps...

Upvotes: 11

Related Questions