Verwenden von Razor-Komponenten in JavaScript-Apps und SPA-Frameworks

In diesem Artikel erfahren Sie, wie Sie Razor-Komponenten aus JavaScript rendern, benutzerdefinierte Blazor-Elemente verwenden und Angular- und React-Komponenten generieren.

Angular-Beispiel-Apps

• CustomElementsBlazorSample () (Blazor Serverjaviercn/CustomElementsBlazorSample, Branch: blazor-server): Blazor Server wird in .NET 8/9 unterstützt. Informationen zum Migrieren dieses .NET 7-Beispiels finden Sie unter Migrieren von ASP.NET Core 7.0 zu 8.0 und Migrieren von ASP.NET Core in .NET 8 zu ASP.NET Core in .NET 9.
• CustomElementsBlazorSample () (Blazor WebAssemblyjaviercn/CustomElementsBlazorSample, Branch: blazor-wasm): Informationen zum Migrieren dieses .NET 7-Beispiels finden Sie unter Migrieren von ASP.NET Core 7.0 zu 8.0 und Migrieren von ASP.NET Core in .NET 8 zu ASP.NET Core in .NET 9.

Rendern von Razor-Komponenten aus JavaScript

Razor Komponenten können für vorhandene JS-Apps dynamisch aus JavaScript (JS) gerendert werden.

Im Beispiel in diesem Abschnitt wird die folgende Razor-Komponente per JS in eine Seite gerendert.

Quote.razor:

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

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

Fügen Sie in der Program-Datei den Namespace für den Speicherort der Komponente hinzu.

Rufen Sie für die Stammkomponentensammlung der App RegisterForJavaScript auf, um eine Razor-Komponente als Stammkomponente für das JS-Rendern zu registrieren.

RegisterForJavaScript enthält eine Überladung, die den Namen einer JS-Funktion akzeptiert, die Initialisierungslogik ausführt (javaScriptInitializer). Die JS-Funktion wird einmal pro Komponentenregistrierung aufgerufen, unmittelbar nach dem Starten der Blazor-App und vor dem Rendern von Komponenten. Diese Funktion kann für die Integration in JS-Technologien wie benutzerdefinierte HTML-Elemente oder ein JS-basiertes SPA-Framework verwendet werden.

Eine oder mehrere Initialisiererfunktionen können erstellt und von verschiedenen Komponentenregistrierungen aufgerufen werden. Der typische Anwendungsfall besteht darin, dieselbe Initialisiererfunktion für mehrere Komponenten wiederzuverwenden, was erwartet wird, wenn die Initialisiererfunktion die Integration mit benutzerdefinierten Elementen oder einem anderen JS-basierten SPA_Framework konfiguriert.

Im folgenden Beispiel wird die dynamische Registrierung der vorherigen Quote-Komponente mit „quote“ als Bezeichner veranschaulicht.

• Ändern Sie in einer Blazor Server-App den Aufruf von AddServerSideBlazor in der Program-Datei:

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

• Rufen Sie in einer Blazor WebAssembly-App RegisterForJavaScript für RootComponents in der clientseitigen Program-Datei auf:

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

Fügen Sie die Initialisiererfunktion mit den Funktionsparametern name und parameters an das window-Objekt an. Zu Demonstrationszwecken protokolliert die folgende initializeComponent-Funktion den Namen und die Parameter der registrierten Komponente.

wwwroot/jsComponentInitializers.js:

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

Rendern Sie die Komponente aus JS mithilfe des registrierten Bezeichners in ein Containerelement, und übergeben Sie bei Bedarf Komponentenparameter.

Im folgenden Beispiel:

• Die Quote-Komponente (quote-Bezeichner) wird in das quoteContainer-Element gerendert, wenn die Funktion showQuote aufgerufen wird.
• Eine Anführungszeichen-Zeichenfolge wird an den Text-Parameter der Komponente übergeben.

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);

Nachdem das BlazorSkript geladen ist, laden Sie die vorhergehenden Skripte in die JS-Anwendung:

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

Im vorangegangenen Beispiel ist der {BLAZOR SCRIPT}-Platzhalter das Blazor-Skript.

Platzieren Sie in HTML das Zielcontainerelement (quoteContainer). Für die Demonstration in diesem Abschnitt löst eine Schaltfläche das Rendern der Quote-Komponente aus, indem die JS-Funktion showQuote aufgerufen wird:

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

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

Bei der Initialisierung, bevor Komponenten gerendert werden, protokolliert die Entwicklertools-Konsole des Browsers den Quote-Bezeichner (name) und die Parameter (parameters) der Komponente, wenn initializeComponent aufgerufen wird:

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

Wenn die Schaltfläche Show Quote ausgewählt ist, wird die Quote-Komponente mit dem in Text gespeicherten Anführungszeichen gerendert:

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

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

...

rootComponent.dispose();

Das vorherige Beispiel rendert die Stammkomponente dynamisch, wenn die JS-Funktion showQuote() aufgerufen wird. Um eine Stammkomponente beim Start von Blazor in ein Containerelement zu rendern, verwenden Sie einen JavaScript-Initialisierer, wie im folgenden Beispiel veranschaulicht.

Das folgende Beispiel baut auf dem vorherigen Beispiel auf und verwendet die Quote-Komponente, die Stammkomponentenregistrierung in der Program-Datei und die Initialisierung von jsComponentInitializers.js. Die Funktion showQuote() und die Datei script.js werden nicht verwendet.

Platzieren Sie in HTML das Zielcontainerelement, quoteContainer2, für dieses Beispiel:

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

Fügen Sie mithilfe eines JavaScript-Initialisierers die Stammkomponente zum Zielcontainerelement hinzu.

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.'"
    });
}

Ein erweitertes Beispiel mit zusätzlichen Features finden Sie in der BasicTestApp ASP.NET Core-Referenzquelle (dotnet/aspnetcore GitHub-Repository):

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

Benutzerdefinierte Blazor-Elemente

@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>

@page "/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>

Generieren von Angular- und React-Komponenten

Frameworkspezifische JavaScript-JS-Komponenten werden aus Razor-Komponenten für Webframeworks, z. B. Angular oder React, generiert. Diese Funktion ist nicht in .NET enthalten, wird aber durch die Unterstützung für das Rendern von Razor-Komponenten aus JS aktiviert. Das Beispiel für die JS-Komponentengenerierung auf GitHub veranschaulicht, wie Sie Angular- und React-Komponenten aus Razor-Komponenten generieren. Weitere Informationen finden Sie in der README.md-Datei der Beispiel-App auf GitHub.