Använda Razor komponenter i JavaScript-appar och SPA-ramverk

Den här artikeln beskriver hur du renderar Razor komponenter från JavaScript, använder Blazor anpassade element och genererar Angular- och React-komponenter.

Angular-exempelappar

• CustomElementsBlazorSample (Blazor Server) (javiercn/CustomElementsBlazorSample, branch: blazor-server): Blazor Server stöds i .NET 8/9. Information om hur du migrerar det här .NET 7-exemplet finns i Migrera från ASP.NET Core i .NET 7 till .NET 8 och Migrera från ASP.NET Core i .NET 8 till ASP.NET Core i .NET 9.
• CustomElementsBlazorSample (Blazor WebAssembly) (javiercn/CustomElementsBlazorSample, branch: blazor-wasm): Information om hur du migrerar det här .NET 7-exemplet finns i Migrera från ASP.NET Core i .NET 7 till .NET 8 och Migrera från ASP.NET Core i .NET 8 till ASP.NET Core i .NET 9.

Rendera Razor komponenter från JavaScript

Razor komponenter kan återges dynamiskt från JavaScript (JS) för befintliga JS appar.

Exemplet i det här avsnittet återger följande Razor komponent till en sida via JS.

Quote.razor:

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

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

Program Lägg till namnområdet för komponentens plats i filen.

Anropa RegisterForJavaScript appens rotkomponentsamling för att registrera en Razor komponent som en rotkomponent för JS återgivning.

RegisterForJavaScript innehåller en överlagring som accepterar namnet på en JS funktion som kör initieringslogik (javaScriptInitializer). Funktionen JS anropas en gång för varje komponentregistrering, omedelbart efter att Blazor appen har startat och innan några komponenter återges. Den här funktionen kan användas för integrering med JS tekniker, till exempel anpassade HTML-element eller ett JS-baserat SPA-ramverk.

En eller flera initieringsfunktioner kan skapas och anropas av olika komponentregistreringar. Det vanliga användningsfallet är att återanvända samma initieringsfunktion för flera komponenter, vilket förväntas om initieringsfunktionen konfigurerar integrering med anpassade element eller något annat JS-baserat SPA-ramverk.

I följande exempel visas dynamisk registrering av föregående Quote komponent med "quote" som identifierare.

• Ändra anropet till Blazor Server i en AddServerSideBlazor-appens Program-fil.

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

• I en Blazor WebAssembly app anropar du RegisterForJavaScript på klientsidans RootComponents-fil Program.

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

Koppla initieringsfunktionen med name och parameters funktionsparametrar till window objektet. I demonstrationssyfte loggar följande initializeComponent funktion namnet och parametrarna för den registrerade komponenten.

wwwroot/jsComponentInitializers.js:

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

Rendera komponenten från JS till ett containerelement med hjälp av den registrerade identifieraren och skicka komponentparametrar efter behov.

I följande exempel:

• Komponenten Quote (quote identifieraren) återges i elementet quoteContainershowQuote när funktionen anropas.
• En citatsträng skickas till komponentens Text parameter.

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

När skriptetBlazor har lästs in, läs in föregående skript i JSappen:

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

I föregående exempel {BLAZOR SCRIPT} är platshållaren skriptet Blazor .

I HTML, placera målcontainer-elementet (quoteContainer). För demonstrationen i det här avsnittet utlöser en knapp återgivning av komponenten Quote genom att anropa showQuoteJS funktionen:

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

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

Vid initiering, innan några komponenter återges, loggar webbläsarens konsol för utvecklingsverktyg komponentens identifierare (Quote) och parametrar (name) när parameters anropas:

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

När Show Quote-knappen har valts, visas komponenten Quote med citatet som är lagrat i Text.

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

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

...

rootComponent.dispose();

Föregående exempel återger dynamiskt rotkomponenten när showQuote()JS funktionen anropas. Om du vill återge en rotkomponent i ett containerelement när Blazor den startas använder du en JavaScript-initierare för att återge komponenten, vilket visas i följande exempel.

Följande exempel bygger på föregående exempel, med hjälp av komponenten Quote , rotkomponentregistreringen Program i filen och initieringen av jsComponentInitializers.js. Funktionen showQuote() (och script.js filen) används inte.

I HTML placerar du målcontainerelementet i quoteContainer2 det här exemplet:

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

Med hjälp av en JavaScript-initierare lägger du till rotkomponenten i målcontainerelementet.

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

Ett avancerat exempel med ytterligare funktioner finns i exemplet i BasicTestApp referenskällan ASP.NET Core (dotnet/aspnetcore GitHub-lagringsplats):

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

Blazor specialanpassade element

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

Generera Angular- och React-komponenter

Generera JavaScript-komponenter (JS) från Razor komponenter för JavaScript-tekniker, till exempel Angular eller React. Den här funktionen ingår inte i .NET, men aktiveras av stöd för rendering Razor av komponenter från JS. KomponentgenereringsexempletJS på GitHub visar hur du genererar Angular- och React-komponenter från Razor komponenter. Mer information finns i GitHub-exempelappens README.md fil.