Usare Razor i componenti nelle app JavaScript e nei framework SPA

Questo articolo illustra come eseguire il rendering Razor dei componenti da JavaScript, usare Blazor elementi personalizzati e generare componenti Angular e React.

App di esempio Angular

• CustomElementsBlazorSample () (Blazor Serverjaviercn/CustomElementsBlazorSample, branch: blazor-server): Blazor Server è supportato in .NET 8. Per eseguire la migrazione di questo esempio .NET 7 a .NET 8, vedere Eseguire la migrazione da ASP.NET Core 7.0 a 8.0.
• CustomElementsBlazorSample () (javiercn/CustomElementsBlazorSampleBlazor WebAssembly, ramo: blazor-wasm): per eseguire la migrazione di questo esempio .NET 7 a .NET 8, vedere Eseguire la migrazione da ASP.NET Core 7.0 a 8.0.

Eseguire il rendering dei componenti di Razor da JavaScript

È possibile eseguire il rendering dei componenti di Razor in modo dinamico da JavaScript (JS) per le app JS esistenti.

L'esempio in questa sezione esegue il rendering del componente seguente Razor in una pagina tramite JS.

Quote.razor:

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

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

Program Nel file aggiungere lo spazio dei nomi per il percorso del componente.

Chiamare RegisterForJavaScript la raccolta di componenti radice dell'app per registrare un Razor componente come componente radice per il JS rendering.

RegisterForJavaScript include un overload che accetta il nome di una JS funzione che esegue la logica di inizializzazione (javaScriptInitializer). La JS funzione viene chiamata una volta per ogni registrazione del componente immediatamente dopo l'avvio dell'app Blazor e prima del rendering di tutti i componenti. Questa funzione può essere usata per l'integrazione con JS tecnologie, ad esempio elementi personalizzati HTML o un JSframework SPA basato su .

È possibile creare e chiamare una o più funzioni di inizializzatore da registrazioni di componenti diverse. Il caso d'uso tipico consiste nel riutilizzare la stessa funzione di inizializzatore per più componenti, che è previsto se la funzione di inizializzatore configura l'integrazione con elementi personalizzati o un altro JSframework SPA basato su .

Nell'esempio seguente viene illustrata la registrazione dinamica del componente precedente Quote con "quote" come identificatore.

• In un'app Blazor Server modificare la chiamata a AddServerSideBlazor nel Program file:

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

• In un'app Blazor WebAssembly chiamare RegisterForJavaScript RootComponents nel file sul lato Program client:

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

Collegare la funzione di inizializzatore con name i parametri di funzione e parameters all'oggetto window . A scopo dimostrativo, la funzione seguente initializeComponent registra il nome e i parametri del componente registrato.

wwwroot/jsComponentInitializers.js:

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

Eseguire il rendering del componente da JS in un elemento contenitore usando l'identificatore registrato, passando i parametri del componente in base alle esigenze.

Nell'esempio seguente :

• Il rendering del Quote componente (quote identificatore) viene eseguito nell'elemento quoteContainer quando viene chiamata la showQuote funzione .
• Una stringa di virgolette viene passata al parametro del Text componente.

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

Dopo aver caricato lo Blazor script , caricare gli script precedenti nell'app JS :

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

Nell'esempio precedente il {BLAZOR SCRIPT} segnaposto è lo Blazor script.

In HTML posizionare l'elemento contenitore di destinazione (quoteContainer). Per la dimostrazione in questa sezione, un pulsante attiva il rendering del Quote componente chiamando la showQuoteJS funzione :

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

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

All'inizializzazione prima del rendering di tutti i componenti, la console degli strumenti di sviluppo del browser registra l'identificatore Quote () e i parametri del componente (nameparameters) quando initializeComponent viene chiamato:

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

Quando si seleziona il Show Quote pulsante, viene eseguito il rendering del Quote componente con la virgoletta archiviata in Text visualizzata:

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

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

...

rootComponent.dispose();

Nell'esempio precedente viene eseguito il rendering dinamico del componente radice quando viene chiamata la showQuote()JS funzione . Per eseguire il rendering di un componente radice in un elemento contenitore all'avvio Blazor , usare un inizializzatore JavaScript per eseguire il rendering del componente, come illustrato nell'esempio seguente.

L'esempio seguente si basa sull'esempio precedente, usando il Quote componente , la registrazione del componente radice nel Program file e l'inizializzazione di jsComponentInitializers.js. La showQuote() funzione (e il script.js file) non vengono usate.

In HTML posizionare l'elemento contenitore di destinazione, quoteContainer2 per questo esempio:

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

Usando un inizializzatore JavaScript, aggiungere il componente radice all'elemento contenitore di destinazione.

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

Per un esempio avanzato con funzionalità aggiuntive, vedere l'esempio nell'origine BasicTestApp di riferimento di ASP.NET Core (dotnet/aspnetcore repository GitHub):

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

Elementi personalizzati di 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>

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

Generare componenti di Angular e React

Generare componenti JavaScript (JS) specifici del framework da componenti Razor per i framework Web, ad esempio Angular o React. Questa funzionalità non è inclusa in .NET, ma è abilitata dal supporto per i componenti di rendering Razor da JS. L'esempio di generazione di componenti JS in GitHub mostra come generare componenti di Angular e React da componenti di Razor. Per altre informazioni, vedere il file README.md dell'app di esempio GitHub.