Partial Composition & Slots

Reference til genbrugelige Razor partials med ViewData, slots og render-once indhold.

<ec-partial>

<ec-partial name="Card" model="Model">
    <p>Default slot-indhold</p>
</ec-partial>

<ec-partial> kan det samme som ASP.NET Core partial, men tilføjer ViewData, child content, slots og attributmutering.

ViewData

<ec-partial name="Modal"
            view-data:title="@Model.Title"
            view-data.string:variant="compact">
    <p>Indhold i modal</p>
</ec-partial>

Trigger	Bruges til
view-data:key="@Value"	Sender en reference/værdi til ViewData["key"].
view-data.string:key="Tekst"	Sender en literal string.
Kebab-case keys	view-data:button-text bliver til buttonText.

I partial view:

<h2>@ViewData.GetValue<string>("title", "Fallback titel")</h2>

Attributter

Almindelige attributter merges med første HTML-element i partialen.

<ec-partial name="Card" class="featured" id="hero-card">
    <p>Indhold</p>
</ec-partial>

Hvis partialens root er <article class="card">, bliver output:

<article class="card featured" id="hero-card">
    <p>Indhold</p>
</article>

Modifier	Bruges til
override:class="only-this"	Overskriver i stedet for at merge.
if-true:disabled="@isDisabled"	Renderer boolean-attribut når værdien er sand.

Default slot

Kald:

<ec-partial name="Card">
    <p>Brødtekst</p>
</ec-partial>

Partial:

<article class="card">
    <ec-slot></ec-slot>
</article>

Output:

<article class="card">
    <p>Brødtekst</p>
</article>

Named slots

Kald:

<ec-partial name="Card">
    <ec-slot-content name="header">Titel</ec-slot-content>
    <p>Brødtekst</p>
    <ec-slot-content name="footer">Læs mere</ec-slot-content>
</ec-partial>

Partial:

<article class="card">
    <header><ec-slot name="header">Standardtitel</ec-slot></header>
    <main><ec-slot></ec-slot></main>
    <footer><ec-slot name="footer" /></footer>
</article>

Slot-regel	Effekt
Default slot	Alt child content uden ec-slot-content.
Named slot	Matcher på name.
Sendt slot uden match	Ignoreres.
Slot uden sendt content	Bruger fallback-indholdet inde i <ec-slot>.
Self-closing slot	Har tom fallback.

Stacks

Brug stacks, når et partial skal pushe markup til et senere sted i samme request, fx scripts i footeren.

<ec-push-stack id="footer" key="map-script">
    <script src="/assets/map.js"></script>
</ec-push-stack>

Render senere:

<ec-stack id="footer"></ec-stack>

Attribut	Note
id	Navnet på stacket.
key	Valgfri unik nøgle, der forhindrer dubletter.

Render once

Brug <ec-once>, når noget kun må renderes én gang pr. request, fx init-script i et loop.

<ec-once key="carousel-init">
    <script>window.initCarousel?.();</script>
</ec-once>

Gotcha

Stacks kan ikke renderes før noget har pushet til dem, medmindre response buffering bruges. Buffering kan løse “render bagud”-problemet, men har performance cost. Brug <ec-once> til simple dublet-problemer.