Použití Razor komponent v javascriptových aplikacích a architekturách SPA

Tento článek popisuje, jak vykreslit Razor komponenty z JavaScriptu, používat Blazor vlastní prvky a generovat komponenty Angular a React.

Ukázkové aplikace Angular

• Ukázka CustomElementsBlazor() (javiercn/CustomElementsBlazorSampleBlazor Server, větev: blazor-server): Blazor Server je podporována v .NET 8. Pokud chcete migrovat tuto ukázku .NET 7 na .NET 8, přečtěte si téma Migrace z ASP.NET Core 7.0 na 8.0.
• CustomElementsBlazorSample () (javiercn/CustomElementsBlazorSampleBlazor WebAssembly, branch: blazor-wasm): Pokud chcete migrovat tuto ukázku .NET 7 na .NET 8, přečtěte si téma Migrace z ASP.NET Core 7.0 na 8.0.

Vykreslování komponent Razor pomocí JavaScriptu

U stávajících aplikací v JavaScriptu (JS) je možné komponenty Razor dynamicky vykreslovat pomocí JS.

Příklad v této části vykreslí následující Razor komponentu na stránku prostřednictvím JS.

Quote.razor:

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

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

Program Do souboru přidejte obor názvů pro umístění komponenty.

Voláním RegisterForJavaScript kolekce kořenových komponent aplikace zaregistrujte komponentu Razor jako kořenovou komponentu pro JS vykreslování.

RegisterForJavaScript obsahuje přetížení, které přijímá název JS funkce, která spouští logiku inicializace (javaScriptInitializer). Funkce JS se volá jednou za registraci součásti hned po Blazor spuštění aplikace a před vykreslením jakýchkoli komponent. Tuto funkci lze použít pro integraci s technologiemi JS , jako jsou vlastní prvky HTML nebo architektura SPA založená JSna technologii.

Jednu nebo více inicializačních funkcí lze vytvořit a volat různými registracemi komponent. Typickým případem použití je opakované použití stejné funkce inicializátoru pro více komponent, což se očekává, pokud funkce inicializátoru konfiguruje integraci s vlastními prvky nebo jinou JSarchitekturou SPA založenou na technologii SPA.

Důležité

Nezaměňujte javaScriptInitializer parametr RegisterForJavaScript s inicializátory JavaScriptu. Název parametru a JS funkce inicializátorů je shodná.

Následující příklad ukazuje dynamickou registraci předchozí Quote komponenty s "quote" jako identifikátor.

• Blazor Ve webové aplikaci upravte volání AddInteractiveServerComponents v souboru na straně Program serveru:

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

• Blazor WebAssembly V aplikaci zavolejte RegisterForJavaScriptRootComponents v souboru na straně Program klienta:

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

Připojte funkci inicializátoru s nameparameters parametry funkce k objektu window . Pro demonstrační účely zaznamená následující initializeComponent funkce název a parametry registrované komponenty.

wwwroot/jsComponentInitializers.js:

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

Vykreslujte komponentu z JS elementu kontejneru pomocí registrovaného identifikátoru a podle potřeby předáte parametry komponenty.

V následujícím příkladu:

• Komponenta Quote (quote identifikátor) se vykreslí do elementu quoteContainershowQuote při zavolání funkce.
• Řetězci uvozovek se předá parametr komponenty Text .

wwwroot/scripts.js:

async function showQuote() {
  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.'"
  });
}

Blazor Po načtení skriptu načtěte do aplikace předchozí skriptyJS:

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

V předchozím příkladu {BLAZOR SCRIPT} je Blazor zástupný symbol skript.

V HTML umístěte cílový element kontejneru (quoteContainer). Pro ukázku v této části aktivuje tlačítko vykreslení Quote komponenty voláním showQuoteJS funkce:

<button onclick="showQuote()">Show Quote</button>

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

Při inicializaci před vykreslením všech komponent zaznamená Quote konzola vývojářských nástrojů prohlížeče identifikátor komponenty (name) a parametry (parameters), pokud initializeComponent je volána:

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

Show Quote Když je tlačítko vybráno, Quote komponenta se vykreslí s uvozovkou uloženou v Text zobrazeném:

Citace ©1988-1999 Satelit Love LLC: Mystery Science Theater 3000 (Trace Beaulieu (Crow))

Poznámka:

rootComponents.add vrátí instanci komponenty. Zavolejte dispose instanci, aby ji uvolnila:

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

...

rootComponent.dispose();

Předchozí příklad dynamicky vykresluje kořenovou komponentu při showQuote()JS zavolání funkce. Pokud chcete vykreslit kořenovou komponentu do elementu kontejneru při Blazor spuštění, použijte javascriptový inicializátor k vykreslení komponenty, jak ukazuje následující příklad.

Následující příklad vychází z předchozího příkladu Quote pomocí komponenty, registrace kořenové komponenty v Program souboru a inicializace jsComponentInitializers.js. Funkce showQuote() (a script.js soubor) se nepoužívá.

V HTML umístěte cílový element quoteContainer2 kontejneru pro tento příklad:

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

Pomocí inicializátoru JavaScriptu přidejte kořenovou komponentu do cílového elementu kontejneru.

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

Pro webovou Blazor aplikaci:

export function afterWebStarted(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.'"
    });
}

Pro aplikaci Blazor Server nebo Blazor WebAssembly aplikaci:

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

Poznámka:

Pro volání rootComponents.addpoužijte blazor parametr (malá písmena b) poskytnutý Blazor počáteční událostí. I když registrace je platná při použití objektu Blazor (velká písmena B), upřednostňovaným přístupem je použití parametru.

Pokročilý příklad s dalšími funkcemi najdete v příkladu referenčního BasicTestApp zdroje ASP.NET Core (dotnet/aspnetcore úložiště GitHub):

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

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Vlastní elementy Blazor

Pomocí Blazor vlastních prvků můžete dynamicky vykreslovat Razor komponenty z jiných architektur SPA, jako je Angular nebo React.

Blazor vlastní prvky:

• K implementaci vlastních elementů HTML použijte standardní rozhraní HTML.
• Eliminujte potřebu ruční správy stavu a životního cyklu kořenových Razor komponent pomocí javascriptových rozhraní API.
• Jsou užitečné pro postupné zavedení Razor komponent do stávajících projektů psaných v jiných architekturách SPA.

Vlastní prvky nepodporují podřízený obsah ani součásti šablony.

Název prvku

Podle specifikace HTML musí názvy vlastních značek elementů přijmout případ kebabu:

❌Neplatný:mycounter
❌Neplatný:MY-COUNTER
❌Neplatný:MyCounter
✔️Platný:my-counter
✔️Platný:my-cool-counter

Balíček

Přidejte odkaz na balíček pro Microsoft.AspNetCore.Components.CustomElements soubor projektu aplikace.

Poznámka:

Pokyny k přidávání balíčků do aplikací .NET najdete v článcích v části Instalace a správa balíčků na webu Pracovní postup používání balíčků (dokumentace k NuGetu). Ověřte správné verze balíčků na NuGet.org.

Ukázková komponenta

Následující příklady jsou založené na Counter komponentě Blazor ze šablony projektu.

Counter.razor:

@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++;
    }
}

Blazor Registrace webové aplikace

Pomocí následujících kroků zaregistrujte kořenovou komponentu jako vlastní prvek ve Blazor webové aplikaci.

Microsoft.AspNetCore.Components.Web Přidejte obor názvů na začátek souboru na straně Program serveru:

using Microsoft.AspNetCore.Components.Web;

Přidejte obor názvů pro komponenty aplikace. V následujícím příkladu je BlazorSample obor názvů aplikace a komponenty jsou umístěné ve Components/Pages složce:

using BlazorSample.Components.Pages;

Upravte volání tak, aby AddInteractiveServerComponents určil vlastní prvek s RegisterCustomElement možností okruhu RootComponents . Následující příklad zaregistruje komponentu Counter pomocí vlastního elementu my-counterHTML:

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

Blazor WebAssembly Registrace

Pomocí následujících kroků zaregistrujte kořenovou komponentu jako vlastní prvek v Blazor WebAssembly aplikaci.

Microsoft.AspNetCore.Components.Web Přidejte obor názvů do horní části Program souboru:

using Microsoft.AspNetCore.Components.Web;

Přidejte obor názvů pro komponenty aplikace. V následujícím příkladu je BlazorSample obor názvů aplikace a komponenty jsou umístěné ve Pages složce:

using BlazorSample.Pages;

Zavolejte RegisterCustomElement .RootComponents Následující příklad zaregistruje komponentu Counter pomocí vlastního elementu my-counterHTML:

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

Použití registrovaného vlastního elementu

Vlastní elementy můžete používat s libovolnou webovou architekturou. Například předchozí my-counter vlastní element HTML, který vykreslí komponentu aplikace Counter , se používá v aplikaci React s následujícím kódem:

<my-counter></my-counter>

Úplný příklad vytvoření vlastních prvků pomocí Blazortéto komponenty naleznete CustomElementsComponent v referenčním zdroji.

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Parametry předání

Předejte komponentě Razor parametry buď jako atributy HTML, nebo jako vlastnosti JavaScriptu v elementu DOM.

Následující Counter komponenta používá IncrementAmount parametr k nastavení inkrementačního množství Click me tlačítka.

Counter.razor:

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

Vykreslujte komponentu Counter s vlastním elementem a předejte hodnotu parametru IncrementAmount jako atribut HTML. Název atributu přijímá syntaxi kebab-case (increment-amountnikoli IncrementAmount):

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

Případně můžete hodnotu parametru nastavit jako vlastnost JavaScriptu u objektu elementu. Název vlastnosti přijímá syntaxi velbloudího případu (incrementAmountnikoli IncrementAmount):

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

Hodnoty parametrů můžete kdykoli aktualizovat pomocí syntaxe atributu nebo vlastnosti.

Podporované typy parametrů:

• Pomocí syntaxe vlastností Jazyka JavaScript můžete předat objekty libovolného JStypu serializovatelného typu.
• Pomocí atributů HTML jste omezeni na předávání objektů řetězců, logických nebo číselných typů.

Generování komponent Angular a React

Z komponent Razor můžete generovat komponenty JavaScriptu (JS) pro konkrétní webové architektury, jako jsou Angular nebo React. Tato funkce není součástí .NET, ale je povolená podporou vykreslování Razor komponent z JS. Ukázku generování komponent Angular a React z komponent Razor najdete v ukázce generování komponent JS na GitHubu. Další informace najdete v souboru README.md ukázkové aplikace na GitHubu.

Upozorňující

Funkce komponent Angular a React jsou v současné době experimentální, nepodporují se a kdykoli se můžou změnit nebo odebrat. Uvítáme vaše názory a připomínky ohledně toho, nakolik tento konkrétní přístup splňuje vaše požadavky.