JavaScript uygulamalarında ve SPA çerçevelerinde bileşenleri kullanma Razor

Bu makalede JavaScript'ten bileşenleri işleme Razor , özel öğeler kullanma Blazor ve Angular ve React bileşenleri oluşturma işlemleri anlatılmıştır.

Angular örnek uygulamalar

• CustomElementsBlazorSample () (Blazor Serverjaviercn/CustomElementsBlazorSample, dal: blazor-server): Blazor Server .NET 8'de desteklenir. Bu .NET 7 örneğini .NET 8'e geçirmek için bkz . ASP.NET Core 7.0'dan 8.0'a geçirme.
• CustomElementsBlazorSample () (javiercn/CustomElementsBlazorSampleBlazor WebAssembly, dal: blazor-wasm): Bu .NET 7 örneğini .NET 8'e geçirmek için bkz. ASP.NET Core 7.0'dan 8.0'a geçirme.

JavaScript'ten Razor bileşenlerini işleme

Razor bileşenleri mevcut JS uygulamaları için JavaScript'ten (JS) dinamik olarak işlenebilir.

Bu bölümdeki örnek, aracılığıyla JSaşağıdaki Razor bileşeni bir sayfaya işler.

Quote.razor:

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

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

Program dosyasında, bileşenin konumu için ad alanını ekleyin.

Bir bileşeni işleme için kök bileşen olarak kaydetmek Razor için JS uygulamanın kök bileşen koleksiyonunda çağrısı RegisterForJavaScript yapın.

RegisterForJavaScriptbaşlatma mantığını (javaScriptInitializer) yürüten bir işlevin adını kabul eden bir JS aşırı yükleme içerir. İşlev JS , uygulama başlatıldıktan hemen sonra Blazor ve herhangi bir bileşen işlenmeden önce bileşen kaydı başına bir kez çağrılır. Bu işlev, HTML özel öğeleri veya tabanlı SPA JSçerçevesi gibi teknolojilerle JS tümleştirme için kullanılabilir.

Farklı bileşen kayıtları tarafından bir veya daha fazla başlatıcı işlevi oluşturulabilir ve çağrılabilir. Tipik kullanım örneği, başlatıcı işlevinin özel öğelerle veya başka bir tabanlı SPA çerçevesiyle tümleştirmeyi yapılandırıyorsa beklenen birden çok bileşen için aynı başlatıcı işlevini yeniden JSkullanmaktır.

Aşağıdaki örnek, önceki Quote bileşenin tanımlayıcı olarak "quote" ile dinamik kaydını gösterir.

• Bir Blazor Server uygulamada, dosyasında öğesinin çağrısını AddServerSideBlazor Program değiştirin:

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

• Bir Blazor WebAssembly uygulamada, istemci tarafı Program dosyasında şu çağrıyı açın RegisterForJavaScript RootComponents:

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

başlatıcı işlevini name ve parameters işlev parametrelerini nesnesine window ekleyin. Gösterim amacıyla, aşağıdaki initializeComponent işlev kayıtlı bileşenin adını ve parametrelerini günlüğe kaydeder.

wwwroot/jsComponentInitializers.js:

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

Bileşen JS parametrelerini gerektiği gibi geçirerek kayıtlı tanımlayıcıyı kullanarak bileşenini bir kapsayıcı öğesinde işleyin.

Aşağıdaki örnekte:

• Quote bileşen (quotetanımlayıcı) işlevi çağrıldığında öğesinde quoteContainer showQuote işlenir.
• Bileşenin Text parametresine bir tırnak dizesi geçirilir.

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

Blazor Betik yüklendikten sonra, önceki betikleri JS uygulamaya yükleyin:

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

Yukarıdaki örnekte yer {BLAZOR SCRIPT} tutucu betiktir Blazor .

HTML'de hedef kapsayıcı öğesini (quoteContainer yerleştirin). Bu bölümdeki tanıtım için bir düğme, işlevi çağırarak bileşenin Quote işlenmesini showQuoteJS tetikler:

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

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

Herhangi bir bileşen işlenmeden önce başlatma sırasında, tarayıcının geliştirici araçları konsolu şu çağrıldığında initializeComponent bileşenin Quote tanımlayıcısını (name) ve parametrelerini (parameters) günlüğe kaydeder:

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

Show Quote Düğme seçildiğinde bileşen, Quote içinde depolanan Text alıntıyla işlenir:

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

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

...

rootComponent.dispose();

Yukarıdaki örnek, işlev çağrıldığında showQuote()JS kök bileşeni dinamik olarak işler. Başlangıç sırasında Blazor bir kök bileşeni kapsayıcı öğesinde işlemek için, aşağıdaki örnekte gösterildiği gibi bileşeni işlemek için javascript başlatıcısını kullanın.

Aşağıdaki örnek, önceki örnekte bileşeni, dosyadaki Program kök bileşen kaydını ve başlatmasını kullanarak Quote derlenirjsComponentInitializers.js. showQuote() İşlev (ve script.js dosyası) kullanılmaz.

HTML'de hedef kapsayıcı öğesini yerleştirin, quoteContainer2 örneğin:

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

JavaScript başlatıcısı kullanarak kök bileşeni hedef kapsayıcı öğesine ekleyin.

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

Ek özellikler içeren gelişmiş bir örnek için ASP.NET Core başvuru kaynağındaki (dotnet/aspnetcoreGitHub deposu) örneğe BasicTestApp bakın:

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

Blazor özel öğeleri

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

Angular ve React bileşenleri oluşturma

Angular veya React gibi web çerçeveleri için Razor bileşenlerinden çerçeveye özgü JavaScript (JS) bileşenleri oluşturun. Bu özellik .NET'e dahil değildir, ancak bileşeni işleme Razor JSdesteği tarafından etkinleştirilir. GitHub'da JS bileşeni oluşturma örneği, Razor bileşenlerinden Angular ve React bileşenleri oluşturmayı gösterir. Ek bilgi için GitHub örnek uygulamasının README.md dosyasına bakın.