ASP.NET Core Blazor işleme modları

  • Makale

Bu makalede, derleme zamanında veya çalışma zamanında Web Apps'te Blazor bileşen işleme denetiminin Razor açıklanmaktadır.

Bu kılavuz tek başına Blazor WebAssembly uygulamalar için geçerli değildir. Blazor WebAssemblyuygulamalar yalnızca istemci tarafı WebAssembly tabanlı çalışma zamanı aracılığıyla istemcide işlenir ve işleme modu kavramı yoktur. Uygulamadaki Blazor WebAssembly bir bileşene işleme modu uygulanırsa, işleme modu gösteriminin bileşeni işleme üzerinde hiçbir etkisi yoktur.

İşleme modları

Web Uygulamasındaki Blazor her bileşen kullandığı barındırma modelini, nerede işlendiğini ve etkileşimli olup olmadığını belirlemek için bir işleme modu benimser.

Aşağıdaki tabloda, Bir Blazor Web Uygulamasındaki bileşenleri işlemek Razor için kullanılabilir işleme modları gösterilmektedir. Bir bileşene işleme modu uygulamak için bileşen örneğinde veya bileşen tanımında yönergesini kullanın @rendermode . Bu makalenin devamında, her işleme modu senaryosu için örnekler gösterilir.

Veri Akışı Adı Açıklama İşleme konumu Etkileşimli
Statik Sunucu Statik sunucu tarafı işleme (statik SSR) Sunucu
Etkileşimli Sunucu kullanarak Blazor Serveretkileşimli sunucu tarafı işleme (etkileşimli SSR) . Sunucu
Etkileşimli WebAssembly † kullanarak Blazor WebAssemblyistemci tarafı işleme (CSR). İstemci
Etkileşimli Otomatik Paket indirildikten sonraki Blazor ziyaretlerde başlangıçta ve ardından CSR kullanarak Blazor Server etkileşimli SSR. Sunucu, ardından istemci

†İstemci tarafı işlemenin (CSR) etkileşimli olduğu varsayılır. "Etkileşimli istemci tarafı işleme" ve "etkileşimli CSR" sektör tarafından veya belgelerde Blazor kullanılmaz.

Prerendering, etkileşimli bileşenler için varsayılan olarak etkindir. Bu makalenin devamında, prerendering denetimiyle ilgili yönergeler sağlanmıştır. İstemci ve sunucu işleme kavramlarıyla ilgili genel endüstri terminolojisi için bkz . ASP.NET Temel Blazor bilgiler.

Aşağıdaki örneklerde, bileşenin işleme modunu birkaç temel Razor bileşen özelliğiyle ayarlama gösterilmektedir.

İşleme modu davranışlarını yerel olarak test etmek için aşağıdaki bileşenleri Web Uygulaması proje şablonundan Blazor oluşturulan bir uygulamaya yerleştirebilirsiniz. Uygulamayı oluştururken açılan menülerden (Visual Studio) seçenekleri belirleyin veya hem sunucu tarafı hem de istemci tarafı etkileşimini etkinleştirmek için CLI seçeneklerini (.NET CLI) uygulayın. Web Uygulaması oluşturma Blazor hakkında yönergeler için bkz . ASP.NET Core Blazoriçin Araçlar .

Etkileşimli işleme modları için desteği etkinleştirme

Web Blazor Uygulaması, etkileşimli işleme modlarını destekleyecek şekilde yapılandırılmalıdır. Aşağıdaki uzantılar, uygulama oluşturma sırasında Web Uygulaması proje şablonundan Blazor oluşturulan uygulamalara otomatik olarak uygulanır. Bileşen hizmetleri ve uç noktaları uygulamanın Program dosyasında yapılandırıldıktan sonra, işleme modlarını İşleme modları bölümüne göre tek tek bileşenler bildirmeye devam eder.

Bileşenlere yönelik Razor hizmetler çağrılarak AddRazorComponentseklenir.

Bileşen oluşturucu uzantıları:

MapRazorComponents kullanılabilir bileşenleri bulur ve varsayılan olarak App bileşen () olan uygulamanın kök bileşenini (yüklenen ilk bileşenApp.razor) belirtir.

Uç nokta kuralı oluşturucu uzantıları:

Not

Aşağıdaki örneklerde API'nin yerleşimi hakkında yönlendirme için Web Uygulaması proje şablonundan Blazor oluşturulan bir uygulamanın dosyasını inceleyinProgram. Web Uygulaması oluşturma Blazor hakkında yönergeler için bkz . ASP.NET Core Blazoriçin Araçlar .

Örnek 1: Aşağıdaki Program dosya API'sinde etkileşimli SSR'yi etkinleştirmek için hizmetler ve yapılandırma eklenmektedir:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Örnek 2: Aşağıdaki Program dosya API'sinde Interactive WebAssembly işleme modunu etkinleştirmeye yönelik hizmetler ve yapılandırma eklenmektedir:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode();

Örnek 3: Aşağıdaki Program dosya API'sinde Etkileşimli Sunucu, Etkileşimli WebAssembly ve Etkileşimli Otomatik işleme modlarını etkinleştirmek için hizmetler ve yapılandırma eklenmiştir:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

BlazorBlazor WebAssembly, Interactive WebAssembly işleme modunu kullanan bileşenleri indirmek ve yürütmek için barındırma modelini kullanır. Bu bileşenler için barındırmayı ayarlamak Blazor WebAssembly için ayrı bir istemci projesi gerekir. İstemci projesi, konağın başlangıç kodunu Blazor WebAssembly içerir ve tarayıcıda çalışmak için .NET çalışma zamanını ayarlar. Blazor Web Uygulaması şablonu, WebAssembly etkileşimini etkinleştirme seçeneğini belirlediğinizde bu istemci projesini sizin için ekler. Interactive WebAssembly işleme modunu kullanan tüm bileşenler, indirilen uygulama paketine dahil edilebilmeleri için istemci projesinden derlenmelidir.

Bileşen örneğine işleme modu uygulama

Bir bileşen örneğine işleme modu uygulamak için bileşenin @rendermodeRazor kullanıldığı yönerge özniteliğini kullanın.

Aşağıdaki örnekte, bileşen örneğine etkileşimli sunucu tarafı işleme (etkileşimli SSR) uygulanır Dialog :

<Dialog @rendermode="InteractiveServer" />

Not

Blazorşablonlar, daha kısa @rendermode söz dizimi için uygulamanın _Imports dosyasında (Components/_Imports.razor) için RenderMode statik using bir yönerge içerir:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

Yukarıdaki yönerge olmadan, bileşenler söz diziminde @rendermode statik RenderMode sınıfı belirtmelidir:

<Dialog @rendermode="RenderMode.InteractiveServer" />

Özel yapılandırmayla doğrudan örneklenmiş özel işleme modu örneklerine de başvurabilirsiniz. Daha fazla bilgi için bu makalenin devamında yer alan Özel kısa işleme modları bölümüne bakın.

Bileşen tanımına işleme modu uygulama

Bir bileşenin işleme modunu tanımının bir parçası olarak belirtmek için yönergesini @rendermodeRazor ve buna karşılık gelen işleme modu özniteliğini kullanın.

@page "..."
@rendermode InteractiveServer

Bir bileşen tanımına işleme modu uygulamak genellikle belirli bir sayfaya işleme modu uygulanırken kullanılır. Yönlendirilebilir sayfalar varsayılan olarak, sayfayı işleyen bileşenle Router aynı işleme modunu kullanır.

Teknik olarak, @rendermode hem yönergeRazorhem Razorde yönerge özniteliğidir. Semantik benzerdir, ancak farklılıklar vardır. @rendermode yönergesi bileşen tanımında olduğundan başvuruda bulunılan işleme modu örneğinin statik olması gerekir. @rendermode yönerge özniteliği herhangi bir işleme modu örneğini alabilir.

Not

Bileşen yazarları, bir bileşenin uygulamasını belirli bir işleme moduna bağlamaktan kaçınmalıdır. Bunun yerine, bileşen yazarlarının genellikle herhangi bir işleme modunu veya barındırma modelini destekleyecek bileşenler tasarlaması gerekir. Bir bileşenin uygulaması, nerede çalıştığı (sunucu veya istemci) varsayımlarından kaçınmalı ve statik olarak işlendiğinde düzgün bir şekilde düşürülmelidir. Bileşen doğrudan örneklenmediyse (yönlendirilebilir sayfa bileşeni gibi) veya tüm bileşen örnekleri için bir işleme modu belirtmek için bileşen tanımında işleme modunun belirtilmesi gerekebilir.

Uygulamanın tamamına işleme modu uygulama

Uygulamanın tamamı için işleme modunu ayarlamak için, uygulamanın kök bileşen olmayan bileşen hiyerarşisindeki en üst düzey etkileşimli bileşende işleme modunu belirtin.

Not

Kök bileşeni etkileşimli hale getirme (bileşen gibi App ) desteklenmez. Bu nedenle, uygulamanın tamamı için işleme modu doğrudan bileşen tarafından App ayarlanamaz.

Web Uygulaması proje şablonunu temel alan Blazor uygulamalar için, genellikle bileşenin bileşende App kullanıldığı yerde Routes uygulamanın tamamına atanmış bir işleme modu belirtilir (Components/App.razor):

<Routes @rendermode="InteractiveServer" />

Bileşen, Router işleme modunu yönlendirdiğinden sayfalara yayılır.

Ayrıca genellikle proje şablonundan oluşturulan bir Blazor Web UygulamasınınHeadOutletbileşeninde de bulunan bileşendeApp aynı etkileşimli işleme modunu ayarlamanız gerekir:

<HeadOutlet @rendermode="InteractiveServer" />

Etkileşimli bir istemci tarafı (WebAssembly veya Otomatik) işleme modunu benimseyen ve bileşen aracılığıyla Routes uygulamanın tamamı için işleme modunu etkinleştiren uygulamalar için:

  • Sunucu uygulamasının Components/Layout klasörünün düzen ve gezinti dosyalarını projenin Layout klasörüne .Client yerleştirin veya taşıyın. Proje yoksa, projede .Client bir Layout klasör oluşturun.
  • Sunucu uygulamasının Components/Pages klasörünün bileşenlerini projenin Pages klasörüne .Client yerleştirin veya taşıyın. Proje yoksa, projede .Client bir Pages klasör oluşturun.
  • Sunucu uygulamasının RoutesComponents klasörünün .Client bileşenini projenin kök klasörüne yerleştirin veya taşıyın.

Web Uygulaması oluştururken Blazor genel etkileşimi etkinleştirmek için:

  • Visual Studio: Etkileşim konumu açılan listesini Genel olarak ayarlayın.
  • .NET CLI: seçeneğini kullanın -ai|--all-interactive .

Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Araçlar.

İşleme modunu programlı olarak uygulama

Özellikler ve alanlar bir işleme modu atayabilir.

Bu bölümde açıklanan ikinci yaklaşım olan işleme modunu bileşen örneğine göre ayarlamak, uygulama belirtiminiz aşağıdaki senaryolardan birini çağırdığında özellikle yararlıdır:

  • Uygulamanın statik sunucu tarafı işlemeyi (statik SSR) benimsemesi ve yalnızca sunucuda çalışması gereken bileşenleri olan bir alanınız (klasörü) var. Uygulama, bileşendeki işleme App modunu klasörün yoluna göre ayarlayarak işleme modunu Routes genel olarak denetler.
  • Statik SSR'yi benimsemesi ve yalnızca sunucuda çalışması gereken çeşitli konumlarda (tek bir klasörde değil) uygulamanın çevresindeki bileşenleriniz vardır. Uygulama, bileşen örneklerinde yönergesi ile @rendermode işleme modunu ayarlayarak işleme modunu bileşen başına belirli bir şekilde denetler. Düşünceler, bileşende App işleme modunu ayarlamak için bileşende Routes kullanılır.

Her iki durumda da statik SSR'yi benimsemesi gereken bileşenin de tam sayfa yeniden yüklemeyi zorlaması gerekir.

Yukarıdaki iki senaryo, bu makalenin devamında yer alan İşleme modlarının ince denetimi bölümündeki örneklerle ele alınmıştır. Aşağıdaki iki alt bölüm, işleme modunu ayarlamaya yönelik temel yaklaşımlara odaklanır.

İşleme modunu bileşen tanımına göre ayarlama

Bileşen tanımı, özel bir alan aracılığıyla işleme modunu tanımlayabilir:

@rendermode renderModeForPage

...

@code {
    private static IComponentRenderMode renderModeForPage = InteractiveServer;
}

Bileşen örneğine göre işleme modunu ayarlama

Aşağıdaki örnek, tüm isteklere etkileşimli sunucu tarafı işleme (etkileşimli SSR) uygular.

<Routes @rendermode="RenderModeForPage" />

...

@code {
    private IComponentRenderMode? RenderModeForPage => InteractiveServer;
}

İşleme modu yayma hakkında ek bilgiler, bu makalenin devamında İşleme modu yayma bölümünde sağlanır. İşleme modlarının ince denetimi bölümünde, uygulamanın belirli alanlarında (klasörler) statik SSR'yi benimsemek için veya bileşen başına işleme modu atamalarıyla uygulama genelinde yayılan belirli bileşenler için önceki yaklaşımın nasıl kullanılacağı gösterilir.

Ön Kayıt

Ön kayıt , işlenen denetimler için olay işleyicilerini etkinleştirmeden başlangıçta sunucudaki sayfa içeriğini işleme işlemidir. Sunucu, uygulamanın kullanıcılara daha duyarlı hissetmesini sağlayan ilk isteğe yanıt olarak sayfanın HTML kullanıcı arabirimini mümkün olan en kısa sürede verir. Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullandığı ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) da geliştirebilir.

Prerendering, etkileşimli bileşenler için varsayılan olarak etkindir.

Bileşen örneğinde ön kayıt özelliğini devre dışı bırakmak için işleme moduna değeri false olan bayrağını geçirinprerender:

  • <... @rendermode="new InteractiveServerRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
  • <... @rendermode="new InteractiveAutoRenderMode(prerender: false)" />

Bileşen tanımında ön kayıt özelliğini devre dışı bırakmak için:

  • @rendermode @(new InteractiveServerRenderMode(prerender: false))
  • @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
  • @rendermode @(new InteractiveAutoRenderMode(prerender: false))

Uygulamanın tamamında ön kayıt özelliğini devre dışı bırakmak için, uygulamanın bileşen hiyerarşisinde kök bileşen olmayan en üst düzey etkileşimli bileşende işleme modunu belirtin.

Web Uygulaması proje şablonunu temel alan uygulamalar için, bileşenin Blazor bileşende App ()Components/App.razor kullanıldığı uygulamanın tamamına Routes atanmış bir işleme modu belirtilir. Aşağıdaki örnek, uygulamanın işleme modunu Etkileşimli Sunucu olarak ayarlar ve ön kayıt devre dışı bırakılır:

<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Ayrıca, bileşendeki App bileşen için HeadOutlet ön kayıt özelliğini devre dışı bırakın:

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Bileşen gibi bir kök bileşenin App , kök bileşenin tanım dosyasının @rendermode (.razor) en üstündeki yönergeyle etkileşimli hale getirilmesi desteklenmez. Bu nedenle, prerendering bileşeni tarafından App doğrudan devre dışı bırakılamaz.

Statik sunucu tarafı işleme (statik SSR)

Varsayılan olarak, bileşenler statik sunucu tarafı işleme (statik SSR) kullanır. Bileşen yanıt akışına işlenir ve etkileşim etkinleştirilmez.

Aşağıdaki örnekte, bileşenin işleme modu için bir atama yoktur, bu nedenle bileşen işleme modunu üst öğesinden devralır. Hiçbir ata bileşeni işleme modunu belirtmediğinden, aşağıdaki bileşen sunucuda statik olarak işlenir . Düğme etkileşimli değildir ve seçildiğinde yöntemini çağırmaz UpdateMessage . değeri message değişmez ve kullanıcı arabirimi olaylarına yanıt olarak bileşen yeniden kaydedilmez.

RenderMode1.razor:

@page "/render-mode-1"

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Önceki bileşeni bir Blazor Web Uygulamasında yerel olarak kullanıyorsanız, bileşeni sunucu projesinin Components/Pages klasörüne yerleştirin. Sunucu projesi, çözümün ile bitmeyecek .Clientbir ada sahip projesidir. Uygulama çalışırken, tarayıcının adres çubuğunda adresine gidin /render-mode-1 .

Statik SSR sırasında, Razor bileşen sayfası istekleri yönlendirme ve yetkilendirme için sunucu tarafı ASP.NET Core ara yazılım işlem hattı isteği işlemesi tarafından işlenir. Bileşenler sunucu tarafı istek işleme sırasında işlenmediğinden Razor yönlendirme ve yetkilendirme için ayrılmış Blazor özellikler çalışmaz. Blazor statik SSR sırasında bulunmayan bileşendeki Routes yönlendirici özellikleri şunları görüntülemeyi içerir:

Uygulama kök düzeyinde etkileşim sergiliyorsa, ilk statik SSR'nin ardından sunucu tarafı ASP.NET Çekirdek istek işleme dahil değildir; bu da önceki Blazor özelliklerin beklendiği gibi çalıştığı anlamına gelir.

Statik SSR ile gelişmiş gezinti , JavaScript yüklenirken özel dikkat gerektirir. Daha fazla bilgi için bkz . ASP.NET Core Blazor JavaScript ile statik sunucu tarafı işleme (statik SSR).

Etkileşimli sunucu tarafı işleme (etkileşimli SSR)

Etkileşimli sunucu tarafı işleme (etkileşimli SSR), kullanarak Blazor Serverbileşeni sunucudan etkileşimli olarak işler. Kullanıcı etkileşimleri, tarayıcıyla gerçek zamanlı bir bağlantı üzerinden işlenir. Bağlantı hattı bağlantısı, Sunucu bileşeni işlendiğinde kurulur.

Aşağıdaki örnekte, bileşen tanımına ekleyerek @rendermode InteractiveServer işleme modu etkileşimli SSR olarak ayarlanmıştır. Düğme seçildiğinde yöntemini çağırır UpdateMessage . Değişikliklerin değeri message ve bileşeni, kullanıcı arabirimindeki iletiyi güncelleştirmek için yeniden oluşturulur.

RenderMode2.razor:

@page "/render-mode-2"
@rendermode InteractiveServer

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Önceki bileşeni bir Blazor Web Uygulamasında yerel olarak kullanıyorsanız, bileşeni sunucu projesinin Components/Pages klasörüne yerleştirin. Sunucu projesi, çözümün ile bitmeyecek .Clientbir ada sahip projesidir. Uygulama çalışırken, tarayıcının adres çubuğunda adresine gidin /render-mode-2 .

İstemci tarafı işleme (CSR)

İstemci tarafı işleme (CSR), kullanarak Blazor WebAssemblybileşeni istemcide etkileşimli olarak işler. .NET çalışma zamanı ve uygulama paketi, WebAssembly bileşeni başlangıçta işlendiğinde indirilir ve önbelleğe alınır. CSR kullanan bileşenler, konağı ayarlayan Blazor WebAssembly ayrı bir istemci projesinden oluşturulmalıdır.

Aşağıdaki örnekte, işleme modu ile @rendermode InteractiveWebAssemblyCSR olarak ayarlanmıştır. Düğme seçildiğinde yöntemini çağırır UpdateMessage . Değişikliklerin değeri message ve bileşeni, kullanıcı arabirimindeki iletiyi güncelleştirmek için yeniden oluşturulur.

RenderMode3.razor:

@page "/render-mode-3"
@rendermode InteractiveWebAssembly

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Önceki bileşeni bir Blazor Web Uygulamasında yerel olarak kullanıyorsanız, bileşeni istemci projesinin Pages klasörüne yerleştirin. İstemci projesi, çözümün ile biten .Clientbir adı olan projesidir. Uygulama çalışırken, tarayıcının adres çubuğunda adresine gidin /render-mode-3 .

Otomatik (Otomatik) işleme

Otomatik (Otomatik) işleme, bileşenin çalışma zamanında nasıl işleneceğini belirler. Bileşen başlangıçta barındırma modeli kullanılarak Blazor Server etkileşimli sunucu tarafı işleme (etkileşimli SSR) ile işlenir. .NET çalışma zamanı ve uygulama paketi, istemciye arka planda indirilir ve gelecekteki ziyaretlerde kullanılabilmesi için önbelleğe alınır.

Otomatik işleme modu, zaten sayfada olan bir bileşenin işleme modunu hiçbir zaman dinamik olarak değiştirmez. Otomatik işleme modu, bir bileşen için kullanılacak etkileşim türü hakkında ilk kararı verir, ardından bileşen bu etkileşim türünü sayfada olduğu sürece korur. Bu ilk karardaki bir faktör, bileşenlerin WebAssembly/Sunucu etkileşimiyle sayfada zaten var olup olmadığını göz önünde bulundurmaktır. Otomatik mod, mevcut etkileşimli bileşenlerin işleme moduyla eşleşen bir işleme modu seçmeyi tercih eder. Otomatik modun mevcut bir etkileşim modunu kullanmayı tercih etme nedeni, mevcut çalışma zamanıyla durum paylaşmayan yeni bir etkileşimli çalışma zamanı tanıtmaktan kaçınmaktır.

Otomatik işleme modunu kullanan bileşenler, konağı ayarlayan Blazor WebAssembly ayrı bir istemci projesinden oluşturulmalıdır.

Aşağıdaki örnekte, bileşen işlem boyunca etkileşimlidir. Düğme seçildiğinde yöntemini çağırır UpdateMessage . Değişikliklerin değeri message ve bileşeni, kullanıcı arabirimindeki iletiyi güncelleştirmek için yeniden oluşturulur. Başlangıçta bileşen sunucudan etkileşimli olarak işlenir, ancak sonraki ziyaretlerde .NET çalışma zamanı ve uygulama paketi indirildikten ve önbelleğe alındıktan sonra istemciden işlenir.

RenderMode4.razor:

@page "/render-mode-4"
@rendermode InteractiveAuto

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Önceki bileşeni bir Blazor Web Uygulamasında yerel olarak kullanıyorsanız, bileşeni istemci projesinin Pages klasörüne yerleştirin. İstemci projesi, çözümün ile biten .Clientbir adı olan projesidir. Uygulama çalışırken, tarayıcının adres çubuğunda adresine gidin /render-mode-4 .

İşleme modu yayma

İşleme modları bileşen hiyerarşisini aşağı doğru yayılım.

İşleme modlarını uygulama kuralları:

  • Varsayılan işleme modu Statik'tir.
  • Interactive Server (InteractiveServer), Interactive WebAssembly (InteractiveWebAssembly ) ve Interactive Auto (InteractiveAuto) işleme modları, eşdüzey bileşenler için farklı işleme modları da dahil olmak üzere bir bileşenden kullanılabilir.
  • Alt bileşende farklı bir etkileşimli işleme moduna geçemezsiniz. Örneğin, Bir Sunucu bileşeni WebAssembly bileşeninin alt öğesi olamaz.
  • Statik üst öğeden etkileşimli bir alt bileşene geçirilen parametreler ON serileştirilebilir olmalıdır JS. Başka bir deyişle, statik üst bileşenden işleme parçalarını veya alt içeriği etkileşimli bir alt bileşene geçiremezsiniz.

Aşağıdaki örneklerde yönlendirilemeyen, sayfa SharedMessage dışı bir bileşen kullanılır. İşleme modu belirsiz SharedMessage bileşeni, yönergesi olan @attribute bir işleme modu uygulamaz. Bu senaryoları bir Blazor Web Uygulaması ile test ediyorsanız aşağıdaki bileşeni uygulamanın Components klasörüne yerleştirin.

SharedMessage.razor:

<p>@Greeting</p>

<button @onclick="UpdateMessage">Click me</button> @message

<p>@ChildContent</p>

@code {
    private string message = "Not updated yet.";

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string Greeting { get; set; } = "Hello!";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

İşleme modu devralma

SharedMessage Bileşen statik olarak işlenmiş bir üst bileşene yerleştirilirse, SharedMessage bileşen statik olarak da işlenir ve etkileşimli değildir. Düğme öğesini çağırmaz UpdateMessageve ileti güncelleştirilmez.

RenderMode5.razor:

@page "/render-mode-5"

<SharedMessage />

SharedMessage Bileşen, işleme modunu tanımlayan bir bileşene yerleştirilirse, uygulanan işleme modunu devralır.

Aşağıdaki örnekte, SharedMessage bileşen istemciye bağlantı SignalR üzerinden etkileşimlidir. Düğme öğesini çağırır UpdateMessageve ileti güncelleştirilir.

RenderMode6.razor:

@page "/render-mode-6"
@rendermode InteractiveServer

<SharedMessage />

Farklı işleme modlarına sahip alt bileşenler

Aşağıdaki örnekte, her iki bileşen de SharedMessage önceden oluşturulur (varsayılan olarak) ve sayfa tarayıcıda görüntülendiğinde görüntülenir.

  • Etkileşimli sunucu tarafı işlemeye (etkileşimli SSR) sahip ilk SharedMessage bileşen, bağlantı hattı oluşturulduktan sonra SignalR etkileşimlidir.
  • İstemci tarafı işlemeye (CSR) sahip ikinci SharedMessage bileşen, uygulama paketi indirildikten ve .NET çalışma zamanı istemcide etkin olduktan sonraBlazor etkileşimlidir.

RenderMode7.razor:

@page "/render-mode-7"

<SharedMessage @rendermode="InteractiveServer" />
<SharedMessage @rendermode="InteractiveWebAssembly" />

Seri hale getirilebilir parametresi olan alt bileşen

Aşağıdaki örnek, parametre alan etkileşimli bir alt bileşeni gösterir. Parametreler serileştirilebilir olmalıdır.

RenderMode8.razor:

@page "/render-mode-8"

<SharedMessage @rendermode="InteractiveServer" Greeting="Welcome!" />

Alt içerik veya işleme parçası gibi serileştirilebilir olmayan bileşen parametreleri desteklenmez . Aşağıdaki örnekte, alt içeriğin bileşene SharedMessage geçirilmesi çalışma zamanı hatasına neden olur.

RenderMode9.razor:

@page "/render-mode-9"

<SharedMessage @rendermode="InteractiveServer">
    Child content
</SharedMessage>

Hata:

System.InvalidOperationException: 'InteractiveServerRenderMode' rendermode ile 'SharedMessage' bileşenine 'ChildContent' parametresi geçirilemiyor. Bunun nedeni, parametrenin rastgele kod olan ve serileştirilemeyen 'Microsoft.AspNetCore.Components.RenderFragment' temsilci türünde olmasıdır.

Yukarıdaki sınırlamayı aşmak için alt bileşeni parametresi olmayan başka bir bileşende sarmalar. Bu, bileşeni sarmalama bileşeniyle Routes (Components/Routes.razor) Web Uygulaması proje şablonunda hesaba Blazor katılınan yaklaşımdırRouter.

WrapperComponent.razor:

<SharedMessage>
    Child content
</SharedMessage>

RenderMode10.razor:

@page "/render-mode-10"

<WrapperComponent @rendermode="InteractiveServer" />

Yukarıdaki örnekte:

  • Alt içerik, çalışma zamanı hatası oluşturmadan bileşene SharedMessage geçirilir.
  • Bileşen SharedMessage sunucuda etkileşimli olarak işlenir.

Üst öğesinden farklı işleme moduna sahip alt bileşen

Alt bileşene üst öğesinin işleme modundan farklı bir etkileşimli işleme modu uygulamayı denemeyin.

Aşağıdaki bileşen, bileşen işlendiğinde çalışma zamanı hatasıyla sonuçlanır:

RenderMode11.razor:

@page "/render-mode-11"
@rendermode InteractiveServer

<SharedMessage @rendermode="InteractiveWebAssembly" />

Hata:

Cannot create a component of type 'BlazorSample.Components.SharedMessage' because its render mode 'Microsoft.AspNetCore.Components.Web.InteractiveWebAssemblyRenderMode' is not supported by Interactive Server rendering.

İşleme modlarında ince denetim

Uygulamanın belirtiminin statik sunucu tarafı işlemeyi (statik SSR) benimsemesi ve yalnızca sunucuda çalışması için bileşenleri çağırdığı durumlar vardır; uygulamanın geri kalanı etkileşimli işleme modunu kullanır.

İşleme modlarının ayrıntılı denetimi için alınabilecek iki yaklaşım vardır ve bunların her biri aşağıdaki alt bölümlerde açıklanmıştır:

  • Statik SSR bileşenlerinin alanı (klasörü): Statik SSR'yi benimsemesi ve aynı yol yolu ön ekini paylaşması gereken bileşenlere sahip bir uygulama alanınız (klasörü) vardır. Uygulama, bileşendeki işleme App modunu klasörün yoluna göre ayarlayarak işleme modunu Routes genel olarak denetler.

  • Uygulamaya yayılan statik SSR bileşenleri: Statik SSR'yi benimsemesi ve yalnızca sunucuda çalışması gereken çeşitli konumlarda uygulamanın etrafına yayılmış bileşenleriniz vardır. Yalnızca statik SSR bileşenleri tek bir klasörde değildir ve ortak yol ön ekini paylaşmaz. Uygulama, bileşen örneklerinde yönergesi ile @rendermode işleme modunu ayarlayarak işleme modunu bileşen başına belirli bir şekilde denetler. Düşünceler, bileşende App işleme modunu ayarlamak için bileşende Routes kullanılır.

Her iki durumda da statik SSR'yi benimsemesi gereken bileşenin de tam sayfa yeniden yüklemeyi zorlaması gerekir.

Aşağıdaki örneklerde, sayfanın statik olarak işlenip işlenmediğini belirlemek için basamaklı parametresi kullanılır HttpContext . A nullHttpContext , bileşenin etkileşimli olarak işlendiğini gösterir. Bu, uygulama kodunda tam sayfa yeniden yüklemeyi tetikleyen bir sinyal olarak kullanışlıdır.

Statik SSR bileşenlerinin alanı (klasörü)

Bu alt bölümde açıklanan yaklaşım, web uygulaması proje şablonu tarafından Blazor bireysel kimlik doğrulaması ve genel etkileşim ile kullanılır.

Uygulamanın bir alanı (klasörü), statik SSR'yi benimsemesi ve yalnızca sunucuda çalışması gereken bileşenleri içerir. Klasördeki bileşenler aynı yol yolu ön ekini paylaşır. Örneğin, IdentityRazor Web Uygulaması proje şablonunun Blazor bileşenleri klasöründedir Components/Account/Pages ve kök yol ön ekini /Accountpaylaşır.

Klasör, klasördeki bileşenlere özel bir hesap düzeni uygulayan bir _Imports.razor dosya da içerir:

@using BlazorSample.Components.Account.Shared
@layout AccountLayout

Shared Klasör, düzen bileşenini korurAccountLayout. Bileşen, bileşenin HttpContext sunucuda işlenip işlenmediğini belirlemek için öğesini kullanır. Identity bileşenleri, s ayarladıkları Identitycookieiçin statik SSR ile sunucuda işlenmelidir. değeri HttpContext isenull, bileşeni etkileşimli olarak işlenir ve olarak ayarlanmış trueolarak forceLoad çağrılarak NavigationManager.Refresh tam sayfa yeniden yükleme gerçekleştirilir. Bu, statik SSR kullanarak sayfanın tam bir rerender'ını zorlar.

Components/Account/Shared/AccountLayout.razor:

@inherits LayoutComponentBase
@layout BlazorSample.Components.Layout.MainLayout
@inject NavigationManager NavigationManager

@if (HttpContext is null)
{
    <p>Loading...</p>
}
else
{
    @Body
}

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    protected override void OnParametersSet()
    {
        if (HttpContext is null)
        {
            NavigationManager.Refresh(forceReload: true);
        }
    }
}

Not

Web Uygulaması proje şablonundaBlazor, klasördeki Components/Account/Shared bileşenler Components/Account/Pages/Manage için Identity ikinci bir düzen dosyası (ManageLayout.razorklasörde) bulunur. KlasörünManage, klasördeki bileşenlere ManageLayout uygulanacak kendi _Imports.razor dosyası vardır. Kendi uygulamalarınızda iç içe _Imports.razor dosya kullanmak, sayfa gruplarına özel düzenler uygulamak için kullanışlı bir yaklaşımdır.

Bileşende App , klasördeki Account bir bileşene yönelik tüm istekler, statik SSR'yi zorlayan bir null işleme modu uygular. Diğer bileşen istekleri etkileşimli SSR işleme modunun (InteractiveServer) genel bir uygulamasını alır.

Önemli

İşleme modunun null uygulanması her zaman statik SSR'yi zorlamaz. Yalnızca bu bölümde gösterilen yaklaşımı kullanarak bu şekilde davranır.

İşleme null modu, etkili bir şekilde bir işleme modu belirtmemeyle aynıdır ve bu da bileşenin üst öğesinin işleme modunu devralmasıyla sonuçlanır. Bu durumda, App bileşen statik SSR kullanılarak işlenir, bu nedenle işleme null modu bileşenin Routes bileşenden statik SSR devralmasıyla App sonuçlanır. Üst öğesi etkileşimli işleme modu kullanan bir alt bileşen için null işleme modu belirtilirse, alt öğe aynı etkileşimli işleme modunu devralır.

Components/App.razor:

<Routes @rendermode="RenderModeForPage" />

...

@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? RenderModeForPage => 
        HttpContext.Request.Path.StartsWithSegments("/Account")
            ? null
            : {INTERACTIVE RENDER MODE};
}

Önceki kodda, uygulamanın geri kalanının {INTERACTIVE RENDER MODE} genel InteractiveServer, InteractiveWebAssemblyveya InteractiveAuto işlemeyi benimsemesi gerektiğine bağlı olarak yer tutucuyu uygun değerle değiştirin.

Dosya aracılığıyla uygulandığından ve bileşenler statik SSR ile işlenmeleri gerektiğinden, klasördeki Account statik SSR'yi benimsemesi gereken bileşenlerin düzeni ayarlamak için gerekli değildir._Imports.razor Statik SSR'yi zorlamak için klasördeki Account bileşenler için başka bir işlem yapılmamalıdır.

Uygulamaya yayılmış statik SSR bileşenleri

Önceki alt bölümünde uygulama, bileşende işleme modunu genel olarak App ayarlayarak bileşenlerin işleme modunu denetler. Alternatif olarak, App bileşen işleme modunu ayarlamak için bileşen başına işleme modlarını da benimseyerek, statik SSR'nin benimsenmesini zorlamak için uygulamaya yayılmış bileşenlere izin verir. Bu alt bölümde yaklaşımı açıklanmaktadır.

Uygulamanın çevresindeki bileşenlere uygulanabilen özel bir düzeni vardır. Genellikle, uygulama için paylaşılan bir bileşen klasöre Components/Layout yerleştirilir. Bileşen, bileşenin HttpContext sunucuda işlenip işlenmediğini belirlemek için öğesini kullanır. değeri HttpContext isenull, bileşeni etkileşimli olarak işlenir ve olarak ayarlanmış trueolarak forceLoad çağrılarak NavigationManager.Refresh tam sayfa yeniden yükleme gerçekleştirilir. Bu, bileşen için sunucuya bir istek tetikler.

Components/Layout/StaticSsrLayout.razor:

@inherits LayoutComponentBase
@layout MainLayout
@inject NavigationManager NavigationManager

@if (HttpContext is null)
{
    <p>Loading...</p>
}
else
{
    @Body
}

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    protected override void OnParametersSet()
    {
        if (HttpContext is null)
        {
            NavigationManager.Refresh(forceReload: true);
        }
    }
}

Bileşende App , işleme modunu ayarlamak için yansıma kullanılır. Bileşen tanım dosyasına atanan işleme modu bileşene Routes uygulanır.

Components/App.razor:

<Routes @rendermode="RenderModeForPage" />

...

@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? RenderModeForPage =>
        HttpContext.GetEndpoint()?.Metadata.GetMetadata<RenderModeAttribute>()?
            .Mode;
}

Statik SSR'yi benimsemesi gereken her bileşen özel düzeni ayarlar ve bir işleme modu belirtmez. İşleme modunun null belirtilmemesi, bileşende değerinin RenderModeAttribute.Mode oluşturulmasına App neden olur ve bu da bileşen örneğine Routes hiçbir işleme modu atanmaması ve statik SSR'nin uygulanmasına neden olur.

Önemli

İşleme modunun null uygulanması her zaman statik SSR'yi zorlamaz. Yalnızca bu bölümde gösterilen yaklaşımı kullanarak bu şekilde davranır.

İşleme null modu, etkili bir şekilde bir işleme modu belirtmemeyle aynıdır ve bu da bileşenin üst öğesinin işleme modunu devralmasıyla sonuçlanır. Bu durumda, App bileşen statik SSR kullanılarak işlenir, bu nedenle işleme null modu bileşenin Routes bileşenden statik SSR devralmasıyla App sonuçlanır. Üst öğesi etkileşimli işleme modu kullanan bir alt bileşen için null işleme modu belirtilirse, alt öğe aynı etkileşimli işleme modunu devralır.

Bileşenlerin statik SSR'yi zorlaması için etkileşimli işleme modu ayarlamadan özel düzeni uygulamaktan başka bir şey yapılmamalıdır:

@layout BlazorSample.Components.Layout.StaticSsrLayout

Uygulamanın etrafındaki etkileşimli bileşenler özel statik SSR düzeninin uygulanmasını önler ve yalnızca bileşendeki App yansımanın bileşene Routes uygulandığı uygun etkileşimli işleme modunu ayarlar:

@rendermode {INTERACTIVE RENDER MODE}

Yukarıdaki kodda, bileşenin {INTERACTIVE RENDER MODE} , InteractiveWebAssemblyveya InteractiveAuto işlemeyi benimsemesi InteractiveServergerektiğine bağlı olarak yer tutucuyu uygun değerle değiştirin.

İstemci tarafı hizmetleri, ön kayıt sırasında çözümlenememesi

Bir bileşen veya uygulama için prerendering'in devre dışı bırakılmadığını varsayarsak, projedeki .Client bir bileşen sunucuda önceden oluşturulur. Sunucunun kayıtlı istemci tarafı Blazor hizmetlerine erişimi olmadığından, hizmetin ön kayıt sırasında bulunamadığına ilişkin bir hata almadan bu hizmetleri bir bileşene eklemek mümkün değildir.

Örneğin, genel Etkileşimli WebAssembly veya Etkileşimli Otomatik işleme içeren bir Blazor Web Uygulamasındaki projede aşağıdaki Home bileşeni .Client göz önünde bulundurun. Bileşen, ortamın adını almak için eklemeye IWebAssemblyHostEnvironment çalışır.

@page "/"
@inject IWebAssemblyHostEnvironment Environment

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    Environment: @Environment.Environment
</p>

Derleme zamanı hatası oluşmaz, ancak ön kayıt sırasında bir çalışma zamanı hatası oluşur:

'Sample.Client.Pages.Home türündeki 'BlazorEnvironment' özelliği için bir değer sağlanamaz. 'Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment' türünde kayıtlı bir hizmet yok.

Bu hata, bileşenin ön kayıt sırasında sunucuda derlenmesi ve yürütülmesi gerektiğinden, ancak IWebAssemblyHostEnvironment sunucuda kayıtlı bir hizmet olmadığından oluşur.

Uygulama, ön kayıt sırasında değeri gerektirmiyorsa, hizmet türünün kendisi yerine hizmeti almak için eklenerek IServiceProvider bu sorun çözülebilir:

@page "/"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IServiceProvider Services

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<p>
    <b>Environment:</b> @environmentName
</p>

@code {
    private string? environmentName;

    protected override void OnInitialized()
    {
        if (Services.GetService<IWebAssemblyHostEnvironment>() is { } env)
        {
            environmentName = env.Environment;
        }
    }
}

Ancak, önceki yaklaşım, mantığınız ön kayıt sırasında bir değer gerektiriyorsa kullanışlı değildir.

Bileşen için ön giriş özelliğini devre dışı bırakırsanız da sorundan kaçınabilirsiniz, ancak bu, bileşeninizin belirtimlerine uymayan birçok durumda alınması gereken aşırı bir ölçüdür.

Bu senaryoya yönelik olarak kullanabileceğiniz üç yaklaşım vardır. En çok önerilenden en az önerilene kadar aşağıdakiler listelenir:

  • Paylaşılan çerçeve hizmetleri için önerilir : Yalnızca ana projede sunucu tarafında kayıtlı olmayan paylaşılan çerçeve hizmetleri için, hizmetleri ana projeye kaydedin; bu da hizmetleri ön kayıt sırasında kullanılabilir hale getirir. Bu senaryoya örnek olarak, ASP.NET Core Blazor uygulamasından web API'sini çağırma'daki hizmetlere HttpClient yönelik yönergelere bakın.

  • Paylaşılan çerçeve dışındaki hizmetler için önerilir : Sunucuda hizmet için özel bir hizmet uygulaması oluşturun. Hizmeti normalde projenin etkileşimli bileşenlerinde .Client kullanın. Bu yaklaşımın bir gösterimi için bkz . ASP.NET Core Blazor ortamları.

  • Bir hizmet soyutlaması oluşturun ve ve sunucu projelerinde .Client hizmet için uygulamalar oluşturun. Hizmetleri her projeye kaydedin. Özel hizmeti bileşene ekleme.

  • Sunucu tarafı paketine proje .Client paketi başvurusu ekleyebilir ve sunucuda ön oturum açma sırasında sunucu tarafı API'sini kullanmaya geri dönebilirsiniz.

Ek derlemelerden bileşenleri bulma

Başvurulan projelerdeki yönlendirilebilir Razor bileşenleri bulmak için Blazor ek derlemeler çerçeveye açıklanmalıdır. Daha fazla bilgi için bkz . ASP.NET Temel Blazor yönlendirme ve gezinti.

Etkileşimli Sunucu bileşenleri kalmadığında devrelerin kapatılması

Etkileşimli Sunucu bileşenleri, tarayıcıyla bağlantı hattı adı verilen gerçek zamanlı bir bağlantı kullanarak web kullanıcı arabirimi olaylarını işler. Bir kök Etkileşimli Sunucu bileşeni işlendiğinde bir bağlantı hattı ve ilişkili durumu oluşturulur. Bağlantı hattı, sayfada kalan Etkileşimli Sunucu bileşenleri olmadığında kapatılır ve bu da sunucu kaynaklarını serbest bırakır.

Özel kısa işleme modları

yönergesi @rendermode , türünün IComponentRenderModestatik örneği olan tek bir parametre alır. @rendermode Yönerge özniteliği statik veya değil herhangi bir işleme modu örneğini alabilir. Çerçeve, Blazor kolaylık sağlamak için statik sınıfa önceden tanımlanmış bazı işleme modları sağlar RenderMode , ancak kendiniz oluşturabilirsiniz.

Normalde bir bileşen, ön kayıt işlemini devre dışı bırakmak için aşağıdaki @rendermode yönergeyi kullanır:

@rendermode @(new InteractiveServerRenderMode(prerender: false))

Ancak, uygulamanın _Imports dosyası (Components/_Imports.razor) aracılığıyla önceden girmeden kısa etkileşimli bir sunucu tarafı işleme modu oluşturan aşağıdaki örneği göz önünde bulundurun:

public static IComponentRenderMode InteractiveServerWithoutPrerendering { get; } = 
    new InteractiveServerRenderMode(prerender: false);

Klasör genelindeki Components bileşenlerde kısa işleme modunu kullanın:

@rendermode InteractiveServerWithoutPrerendering

Alternatif olarak, tek bir bileşen örneği özel bir alan aracılığıyla özel işleme modu tanımlayabilir:

@rendermode interactiveServerWithoutPrerendering

...

@code {
    private static IComponentRenderMode interactiveServerWithoutPrerendering = 
        new InteractiveServerRenderMode(prerender: false);
}

Şu anda, kısa işleme modu yaklaşımı büyük olasılıkla yalnızca bayrağı belirtme prerender ayrıntı düzeyini azaltmak için yararlıdır. Etkileşimli işleme için ek bayraklar kullanılabilir hale gelirse ve farklı bayrak bileşimleriyle kısa işleme modları oluşturmak istiyorsanız, kısaltma yaklaşımı gelecekte daha yararlı olabilir.

Üst düzey içeri aktarma dosyası (_Imports.razor) aracılığıyla hizmet ekleme

Bu bölüm yalnızca Web Apps için Blazor geçerlidir.

() klasöründeki ComponentsComponents/_Imports.razorbir üst düzey içeri aktarma dosyası, başvurularını bileşen (App.razor) içeren klasör hiyerarşisindeki tüm bileşenlere App ekler. Sayfa App bileşeninin önceden oluşturulması devre dışı bırakıldığında bile bileşen her zaman statik olarak işlenir. Bu nedenle, üst düzey içeri aktarma dosyası aracılığıyla hizmet eklemek, hizmetin iki örneğinin sayfa bileşenlerinde çözümlenmesine neden olur.

Bu senaryoyu ele almak için, hizmeti klasörüne () yerleştirilen Pages yeni bir içeri aktarma dosyasına ekleyinComponents/Pages/_Imports.razor. Bu konumdan hizmet, sayfa bileşenlerinde yalnızca bir kez çözümlenir.

Ek kaynaklar