Onderdeelcomponenten Razor gebruiken in JavaScript-apps en Single Page Applicatie-frameworks.

In dit artikel wordt beschreven hoe u onderdelen uit JavaScript weergeeft Razor , aangepaste elementen gebruikt Blazor en Angular- en React-onderdelen genereert.

Angular-voorbeeld-apps

• CustomElementsBlazorSample (Blazor Server) (javiercn/CustomElementsBlazorSample, branch: blazor-server): Blazor Server wordt ondersteund in .NET 8/9. Zie Migreren van ASP.NET Core in .NET 7 naar .NET 8 en Migreren van ASP.NET Core in .NET 8 naar ASP.NET Core in .NET 9 om dit voorbeeld te migreren.
• CustomElementsBlazorSample (Blazor WebAssembly) (javiercn/CustomElementsBlazorSample, vertakking: blazor-wasm): Om dit .NET 7-voorbeeld te migreren, zie Migreren van ASP.NET Core in .NET 7 naar .NET 8 en Migreren van ASP.NET Core in .NET 8 naar ASP.NET Core in .NET 9.

Onderdelen weergeven Razor vanuit JavaScript

Razor onderdelen kunnen dynamisch worden gerenderd vanuit JavaScript (JS) voor bestaande JS apps.

In het voorbeeld in deze sectie wordt het volgende Razor-onderdeel via JS naar een pagina weergegeven.

Quote.razor:

<div class="m-5 p-5">
    <h2>Quote</h2>
    <p>@Text</p>
</div>

@code {
    [Parameter]
    public string? Text { get; set; }
}

Voeg in het Program bestand de naamruimte toe voor de locatie van het onderdeel.

Roep RegisterForJavaScript de verzameling hoofdonderdelen van de app aan om een Razor onderdeel te registreren als hoofdonderdeel voor JS rendering.

RegisterForJavaScript bevat een overbelasting die de naam accepteert van een JS functie die initialisatielogica (javaScriptInitializer) uitvoert. De JS functie wordt eenmaal per onderdeelregistratie aangeroepen direct nadat de Blazor app is gestart en voordat onderdelen worden weergegeven. Deze functie kan worden gebruikt voor integratie met JS technologieën, zoals aangepaste HTML-elementen of een JS-gebaseerd SPA-framework.

Een of meer initialisatiefuncties kunnen worden gemaakt en aangeroepen door verschillende onderdeelregistraties. De typische gebruikssituatie is dat dezelfde initialisatiefunctie voor meerdere componenten wordt hergebruikt, wat wordt verwacht als de initialisatiefunctie integratie met aangepaste elementen of een ander op JS-gebaseerd Single Page Application-framework configureert.

In het volgende voorbeeld ziet u de dynamische registratie van het voorgaande Quote onderdeel met 'quote' als id.

• Wijzig in een Blazor Server app in het AddServerSideBlazor bestand de aanroep naar Program.

  builder.Services.AddServerSideBlazor(options =>
  {
      options.RootComponents.RegisterForJavaScript<Quote>(identifier: "quote", 
          javaScriptInitializer: "initializeComponent");
  });
  

• In een Blazor WebAssembly app, roep RegisterForJavaScript aan op RootComponents in het client-side Program bestand:

  builder.RootComponents.RegisterForJavaScript<Quote>(identifier: "quote", 
      javaScriptInitializer: "initializeComponent");
  

Koppel de initialisatiefunctie met name en parameters functieparameters aan het window object. Voor demonstratiedoeleinden registreert de volgende initializeComponent functie de naam en parameters van het geregistreerde onderdeel.

wwwroot/jsComponentInitializers.js:

window.initializeComponent = (name, parameters) => {
  console.log({ name: name, parameters: parameters });
}

Geef het onderdeel weer van JS in een containerelement met behulp van de geregistreerde id en geef indien nodig onderdeelparameters door.

In het volgende voorbeeld:

• Het Quote onderdeel (quote id) wordt weergegeven in het quoteContainer element wanneer de showQuote functie wordt aangeroepen.
• Een tekenreeks wordt doorgegeven aan de Text parameter van het onderdeel.

wwwroot/scripts.js:

window.showQuote = async () => {
  let targetElement = document.getElementById('quoteContainer');
  await Blazor.rootComponents.add(targetElement, 'quote', 
  {
    text: "Crow: I have my doubts that this movie is actually 'starring' " +
      "anybody. More like, 'camera is generally pointed at.'"
  });
}

const btn = document.querySelector("#showQuoteBtn");
btn.addEventListener("click", showQuote);

Nadat het Blazor script is geladen, laadt u de voorgaande scripts in de JS app:

<script src="_framework/{BLAZOR SCRIPT}"></script>
<script src="jsComponentInitializers.js"></script>
<script src="scripts.js"></script>

In het voorgaande voorbeeld is de {BLAZOR SCRIPT} tijdelijke aanduiding het Blazor script.

Plaats in HTML het doelcontainerelement (quoteContainer). In deze sectie van de demonstratie wordt het Quote onderdeel weergegeven door het aanroepen van de showQuoteJS functie door een knop.

<button id="showQuoteBtn">Show Quote</button>

<div id="quoteContainer"></div>

Bij initialisatie voordat onderdelen worden weergegeven, registreert de ontwikkelaarsconsole van de browser de id (Quote) en parameters (name) van het parameters-onderdeel wanneer initializeComponent wordt aangeroepen.

Object { name: "quote", parameters: (1) […] }
  name: "quote"
  parameters: Array [ {…} ]
    0: Object { name: "Text", type: "string" }
    length: 1

Wanneer de Show Quote knop is geselecteerd, wordt de Quote component weergegeven met de aanhaling opgeslagen in Text weergegeven.

Quote ©1988-1999 Satellite of Love LLC: Mystery Science Theater 3000 (TraceSourceu (Crow))

const rootComponent = await window.Blazor.rootComponents.add(...);

...

rootComponent.dispose();

In het voorgaande voorbeeld wordt het hoofdonderdeel dynamisch weergegeven wanneer de showQuote()JS functie wordt aangeroepen. Als u een hoofdonderdeel wilt weergeven in een containerelement wanneer Blazor u begint, gebruikt u een JavaScript-initializer om het onderdeel weer te geven, zoals in het volgende voorbeeld wordt gedemonstreert.

Het volgende voorbeeld is gebaseerd op het voorgaande voorbeeld met behulp van het Quote onderdeel, de registratie van het hoofdonderdeel in het Program bestand en de initialisatie van jsComponentInitializers.js. De showQuote() functie (en het script.js bestand) worden niet gebruikt.

Plaats in HTML het doelcontainer-element, quoteContainer2, als voorbeeld:

<div id="quoteContainer2"></div>

Voeg met behulp van een JavaScript-initialisatiefunctie het hoofdonderdeel toe aan het doelcontainerelement.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

export function afterStarted(blazor) {
  let targetElement = document.getElementById('quoteContainer2');
  blazor.rootComponents.add(targetElement, 'quote',
    {
      text: "Crow: I have my doubts that this movie is actually 'starring' " +
          "anybody. More like, 'camera is generally pointed at.'"
    });
}

Zie het voorbeeld in de BasicTestApp ASP.NET Core-referentiebron (dotnet/aspnetcore GitHub-opslagplaats) voor een geavanceerd voorbeeld met extra functies:

• JavaScriptRootComponents.razor
• wwwroot/js/jsRootComponentInitializers.js
• wwwroot/index.html

aangepaste elementen Blazor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

using Microsoft.AspNetCore.Components.Web;

using BlazorSample.Pages;

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterCustomElement<Counter>("my-counter");
});

using Microsoft.AspNetCore.Components.Web;

using BlazorSample.Pages;

builder.RootComponents.RegisterCustomElement<Counter>("my-counter");

<my-counter></my-counter>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

<my-counter increment-amount="10"></my-counter>

const elem = document.querySelector("my-counter");
elem.incrementAmount = 10;

<script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>

<my-counter increment-amount={incrementAmount}></my-counter>

Angular- en React-onderdelen genereren

JavaScript-onderdelen (JS) genereren op basis van Razor onderdelen voor JavaScript-technologieën, zoals Angular of React. Deze mogelijkheid is niet opgenomen in .NET, maar wordt ingeschakeld door de ondersteuning voor renderingonderdelen Razor van JS. Het JS voorbeeld van het genereren van onderdelen op GitHub laat zien hoe u Angular- en React-onderdelen genereert op basis van Razor onderdelen. Zie het README.md-bestand van de GitHub-voorbeeld-app voor meer informatie.