Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sections support in Blazor

See original GitHub issue

Basically the same as https://github.com/dotnet/aspnetcore/issues/10131 which has been closed in in favour of #10452 which was in turn closed in favour of #10450 (influencing the <head>).

Having the ability to embed content from the page in the layout in more than one placeholder is a common need. A typical use case is to display the page name in the “header” of the application which is usually defined in the layout. Another use case is to display personalised content for the currently logged user.

A lot of other technologies support this feature and I think it would be a great addition to Blazor. A few examples:

ASP.NET WebForms has ContentPlaceholder
ASP.NET MVC has sections
Web Pages also have sections
Angular has router outlets
React Router also supports multiple components

Thank you for your consideration!

Issue Analytics

State:
Created 3 years ago
Reactions:40
Comments:23 (9 by maintainers)

Top GitHub Comments

31reactions

SteveSandersonMScommented, Nov 27, 2020

One of the reasons we haven’t got this as a baked-in feature yet is that it’s possible to implement something like this in your own application code. If there’s enough consensus that some single pattern takes care of almost all requirements, we might well consider putting it into the framework. But until then, it would help if people were able to try out ways of doing this and report back on what’s working well or not well for them.

To get started, here’s one way to do it:

Add the three classes (SectionContent, SectionOutlet, and SectionRegistry) from this Gist to your project: https://gist.github.com/SteveSandersonMS/4f08efe2ad32178add12bfa3eb6e4559
In your layout, or in fact in any component (but normally your layout), use <SectionOutlet> with a name to define where you want some content to go. For example, you could add the following into the default template’s MainLayout.razor:

<div class="top-row px-4">
    <SectionOutlet Name="topbar" />
    <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>

In any other page, or in fact in any component (but normally in a page), use <SectionContent> with a name to define some content to be rendered. For example, you change Counter.razor to render the following:

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<SectionContent Name="topbar">
    <button class="btn btn-primary" @onclick="IncrementCount">Increment counter</button>
</SectionContent>

Now when the user navigates to “Counter”, they will have a button in the navigation bar that updates the count. And when they navigate to any other page, that button will disappear.

Of course, each page could provide its own different content for topbar, and you can have any number of different named sections.

Technically you can even use this approach to supply content to the <head> element in your page (e.g., to have a page-specific <title>) - I checked this works. It’s a bit awkward because you do need to migrate everything inside <html> to be part of your App.razor root component so the <head> is rendered by Blazor. But it can be done. If this sort of approach pleases people we can look into ways of making it more natural in .NET 6.

1reaction

akorchevcommented, Nov 27, 2020

Thank you @SteveSandersonMS ! This is a viable solution.

One of the reasons we haven’t got this as a baked-in feature yet is that it’s possible to implement something like this in your own application code

Indeed it is. But the implementation is so simple and small that you can consider including it in Blazor (or another official Nuget package that people can use). Thanks again for the code and general idea. I will use it in my projects.