Helper voor onderdeeltags in ASP.NET Core

De Helper voor onderdeeltags geeft een Razor onderdeel weer in een Razor paginapagina of MVC-weergave.

Vereiste voorwaarden

Volg de richtlijnen in het gedeelte Niet-routeerbare onderdelen gebruiken in pagina's of weergaven van het artikel Integreren ASP.NET Core-onderdelen Razor met MVC of Razor Pages .

Helper voor onderdeeltags

Als u een onderdeel vanuit een pagina of weergave wilt weergeven, gebruikt u de Tag-helper (<component> tag) voor onderdelen.

RenderMode hiermee configureert u of het onderdeel:

• Wordt vooraf in de pagina weergegeven.
• Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

Blazor WebAssembly rendermodi voor apps worden weergegeven in de volgende tabel.

Weergave modus	Beschrijving
WebAssembly	Geeft een markering weer voor een Blazor WebAssembly app die kan worden gebruikt om een interactief onderdeel op te nemen wanneer deze in de browser wordt geladen. Het onderdeel wordt niet vooraf gegenereerd. Met deze optie kunt u gemakkelijker verschillende Blazor WebAssembly onderdelen op verschillende pagina's weergeven.
WebAssemblyPrerendered	Hiermee wordt het onderdeel voorafgezet in statische HTML en wordt een markering voor een Blazor WebAssembly app opgenomen voor later gebruik om het onderdeel interactief te maken wanneer het in de browser wordt geladen.

Rendermodi worden weergegeven in de volgende tabel.

Weergave modus	Beschrijving
ServerPrerendered	Geeft de component weer in statische HTML en voegt een markering toe voor een server-side Blazor app. Wanneer de gebruikersagent wordt gestart, wordt deze markering gebruikt om een Blazor app te bootstrapen.
Server	Render een markering voor een server-side Blazor app. De uitvoer van het onderdeel is niet opgenomen. Wanneer de gebruikersagent wordt gestart, wordt deze markering gebruikt om een Blazor app te bootstrapen.
Static	Geeft het onderdeel weer in statische HTML.

Aanvullende kenmerken zijn onder andere:

• Helpers voor meerdere onderdelentags die meerdere Razor onderdelen weergeven, zijn toegestaan.
• Onderdelen kunnen niet dynamisch worden weergegeven nadat de app is gestart.
• Hoewel pagina's en weergaven onderdelen kunnen gebruiken, is het omgekeerde niet waar. Onderdelen kunnen geen weergave- en paginaspecifieke functies gebruiken, zoals gedeeltelijke weergaven en secties. Als u logica uit een gedeeltelijke weergave in een onderdeel wilt gebruiken, moet u de gedeeltelijke weergavelogica in een onderdeel uitwerken.
• Serveronderdelen van een statische HTML-pagina weergeven wordt niet ondersteund.

Met de volgende Helper voor onderdeeltags wordt het EmbeddedCounter onderdeel weergegeven op een pagina of weergave in een app aan de serverzijde Blazor met ServerPrerendered:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

In het voorgaande voorbeeld wordt ervan uitgegaan dat het EmbeddedCounter onderdeel zich in de map van Components de app bevindt. De tijdelijke aanduiding {APP ASSEMBLY} is de assemblynaam van de app (bijvoorbeeld @using BlazorSample.Components).

De Helper component tag kan ook parameters doorgeven aan onderdelen. Houd rekening met het volgende ColorfulCheckbox onderdeel waarmee de kleur en grootte van het selectievakjelabel worden ingesteld.

Components/ColorfulCheckbox.razor:

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string? Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

De Size (int) en Color (string) onderdeelparameters kunnen worden ingesteld door de Component Tag Helper:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

In het voorgaande voorbeeld wordt ervan uitgegaan dat het ColorfulCheckbox onderdeel zich in de Components map bevindt. De tijdelijke aanduiding {APP ASSEMBLY} is de assemblynaam van de app (bijvoorbeeld @using BlazorSample.Components).

De volgende HTML wordt weergegeven op de pagina of weergave:

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

Voor het doorgeven van een tekenreeks tussen aanhalingstekens is een expliciete Razor uitdrukking vereist, zoals in het voorgaande voorbeeld. Het Razor parseringsgedrag voor een string typewaarde is niet van toepassing op een param-* kenmerk omdat het kenmerk een object type is.

Alle typen parameters worden ondersteund, met uitzondering van:

• Algemene parameters.
• Niet-serialiseerbare parameters.
• Overname in verzamelingsparameters.
• Parameters waarvan het type buiten de Blazor WebAssembly app of binnen een lazily-loaded assembly is gedefinieerd.
• Voor het ontvangen van een RenderFragment gemachtigde voor onderliggende inhoud (bijvoorbeeld param-ChildContent="..."). Voor dit scenario raden we u aan een Razor onderdeel (.razor) te maken dat verwijst naar het onderdeel dat u wilt weergeven met de onderliggende inhoud die u wilt doorgeven en vervolgens het Razor onderdeel aanroepen vanaf de pagina of weergave met de Helper voor onderdeeltags.

Het parametertype moet JSON serializeerbaar zijn, wat meestal betekent dat het type een standaardconstructor en settabeleigenschappen moet hebben. U kunt bijvoorbeeld een waarde voor Size en Color in het voorgaande voorbeeld opgeven omdat de typen SizeColor en primitieve typen (int en string) zijn die worden ondersteund door de JSON-serializer.

In het volgende voorbeeld wordt een klasseobject doorgegeven aan het onderdeel:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

De klasse moet een openbare parameterloze constructor hebben.

Components/ParameterComponent.razor:

<h2>ParameterComponent</h2>

<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>

@code
{
    [Parameter]
    public MyClass? MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

In het voorgaande voorbeeld wordt ervan uitgegaan dat het ParameterComponent onderdeel zich in de map van Components de app bevindt. De tijdelijke aanduiding {APP ASSEMBLY} verwijst naar de assemblynaam van de app (bijvoorbeeld @using BlazorSample en @using BlazorSample.Components). MyClass is in de naamruimte van de app.

Aanvullende bronnen

• Helper voor persistente statustags in ASP.NET Core
• Vooraf renderen ASP.NET Core Razor-onderdelen
• ComponentTagHelper
• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)
• ASP.NET Core Razor-onderdelen