Feature Request: View Component Slots

[seangwright]

Is your feature request related to a problem? Please describe.

ASP.NET Mvc has never had a robust component model, the way Web Forms did. ASP.NET Core Tag Helpers and View Components have helped improve this story, but they still lack some composition patterns.

Creating container/wrapping markup is possible with Tag Helpers, but Tag Helpers are a C#-first approach to markup and container/wrapping markup is almost always related to visuals along with functionality. HTML is far easier to maintain in Razor vs C# strings.

It would be helpful to be able to use View Components instead of Tag Helpers for container/wrapping markup when rendering common HTML that contain different children (as defined by the Razor calling the View Components).

I'm specifically requesting this for non-Blazor ASP.NET Core Razor HTML rendering and as a request for ASP.NET Core 7.

Describe the solution you'd like

There is an existing proposal (and sample/demo repository) for this feature, but the original feature request is a locked issue:
#4901

Examples can be seen in the original issue, but here is a short one:

@* Index.cshtml *@
<vc:card image="@imagePath">
    <text vc:slot="title">Card title with a <a href="...">Link</a></text>
    <div vc:slot="content">
       <p>Lorem ipsum</p>
       <p>Lorem ipsum</p>
       <p>Lorem ipsum</p>
    </div>
</vc:card>

@* ~/Components/Card/Default.cshtml *@

<div class="card" style="width: 18rem;">
  <vc:slot name="image">
    <img src="@Model.ImagePath" class="card-img-top" alt="...">
  </vc:slot>
  <div class="card-body">
    <h5 class="card-title">
        <vc:slot name="title />
    </h5>
    <div class="card-text">
        <vc:slot name="content />
    </div>
  </div>
</div>

Additional context

This is how other frameworks do slots:

• Vuejs https://v3.vuejs.org/guide/component-slots.html#slot-content
• Angular https://angular.io/guide/content-projection
• React https://reactjs.org/docs/glossary.html#propschildren
• Laravel https://laravel.com/docs/8.x/blade#components

Notes

If you are interested in this feature being explored for future versions of ASP.NET Core, add a thumbs up/reaction to this issue as that is how the ASP.NET Core team determines interest

To make a decision whether an issue is a good candidate or not for the upcoming release, we will look into the number of upvotes 👍 (and other reactions).

[joaofx]

+1. I miss this feature A LOT in Razor.

It helps identify and extract repetitive html or patterns that we see in the UI.

Laravel's View Engine, Blade, has components as well: https://laravel.com/docs/8.x/blade#components

[michelanjos]

+1. I had used this feature in VueJs and miss it in Razor. It will be really helpful.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[keatkeat87]

Really sad seeing this issue been removed from .NET 7 planning. This is very "basic" feature when working with components.
Currently, I am using Templated Razor delegates to pass HTML into the component as a workaround.
Will this be implemented at .NET 8?

[Eirenarch]

The MVC part of ASP.NET really needs some love and this seems like a good proposal which moves the framework in the proper direction (components over views/actions)

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 8 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[romanimm]

The Component.InvokeAsync has a way to use "slots". Proper tag helper support would be nice though.

// index.cshtml
@await Component.InvokeAsync(typeof(AccordionViewComponent), new AccordionModel("Accordion Title", @<div>Content</div>))

public class AccordionViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(AccordionModel model)
    {
        return View(model);
    }
}

public record AccordionModel(string Title, Func<object?, HelperResult> Body);

// Default.cshtml (Accordion)
@model AccordionModel

<details>
    <summary>@Model.Title</summary>
    @Model.Body.Invoke(null)
</details>

[MichalSznajder]

Templated Razor delegates is such a nice feature. If only they got some love....

[abraluve]

Voting up, there are still many active projects that cant support blazor yet.

[avveshka]

+1

[joaofx]

I have found this library the other day and so far so good: https://razor-components.techgems.net/docs/basic-usage/

I highly recommend checking it out to design Razor cshtml Components with ChildContent and Slots.

Great job @techgems!