ASP.NET Core Blazor işleme modları

Bu makalede, derleme veya çalışma zamanında Razor komponent işlemlerinin kontrolüBlazor Web App açıklanmaktadır.

Bu kılavuz tek başına Blazor WebAssembly uygulamalar için geçerli değildir. Blazor WebAssemblyuygulamalar sadece istemci tarafı WebAssembly tabanlı çalışma zamanı aracılığıyla istemcide işlenir ve bir işleme modu kavramına sahip değildir. 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ı

içindeki Blazor Web App her bileşen kullandığı barındırma modelini, nerede işlendiğini ve etkileşimli olup olmadığını belirlemek için bir işleme modunu benimser. Etkileşim, kullanıcıların işlenmiş bileşenlerle etkileşim kurmasını mümkün kılar. Bu, Belge Nesne Modeli (DOM) olaylara yönelik uygulama yanıtlarını ve Blazorolay işleyicileri ve bağlama yoluyla C# üyelerine bağlı durum değişikliklerini içerir.

Aşağıdaki tabloda, Razor içinde Blazor Web App bileşenlerini render etmek için kullanılabilir render 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.

İsim	Açıklama	Render konumu	Etkileşimli
Statik Sunucu	Statik sunucu tarafı işleme (statik SSR)	Sunucu	❌ Hayır
Etkileşimli Sunucu	Etkileşimli sunucu tarafı işleme (etkileşimli SSR), Blazor Server kullanarak.	Sunucu	✔️Evet
Etkileşimli WebAssembly	Blazor WebAssembly kullanarak istemci taraflı işleme (CSR).	Müşteri	✔️Evet
Etkileşimli Otomatik	Blazor Server kullanılarak başlangıçta etkileşimli SSR yapılır ve Blazor paketi indirildikten sonraki ziyaretlerde CSR kullanılır.	Sunucu, ardından istemci	✔️Evet

†İstemci tarafı işlemenin (CSR) etkileşimli olduğu varsayılır. "Etkileşimli istemci tarafı oluşturma" ve "etkileşimli CSR" sektör tarafından veya Blazor belgelerde 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 proje şablonundan Blazor Web App 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. Blazor Web App nasıl oluşturulacağınıza yönelik yönergeler için ASP.NET Core için Araç OluşturmaBlazor bölümüne bakın.

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

Bir Blazor Web App , 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 proje şablonundan Blazor Web App oluşturulan uygulamalara otomatik olarak uygulanır. Uygulamanın dosyasında bileşen hizmetleri ve uç noktaları yapılandırıldıktan sonra, bölümü uyarınca her bir bileşenin işleme modunu ilan etmesi gerekmektedir.

Razor bileşenlerine yönelik hizmetler, AddRazorComponents çağrılarak eklenir.

Bileşen oluşturucu uzantıları:

• AddInteractiveServerComponents Etkileşimli Sunucu bileşenlerinin işlenmesini desteklemek için hizmetler ekler.
• AddInteractiveWebAssemblyComponents Etkileşimli WebAssembly bileşenlerinin işlenmesini desteklemek için hizmetler ekler.

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ı:

• AddInteractiveServerRenderMode uygulama için etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) yapılandırıyor.
• AddInteractiveWebAssemblyRenderMode uygulama için Interactive WebAssembly işleme modunu yapılandırıyor.

Not

Aşağıdaki örneklerde API'nin konumlandırılması konusunda yönlendirme için Program proje şablonundan oluşturulan bir uygulamanın Blazor Web App dosyasını inceleyin. Blazor Web App nasıl oluşturulacağınıza yönelik yönergeler için ASP.NET Core için Araç OluşturmaBlazor bölümüne bakın.

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

Blazor Blazor 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 Blazor WebAssembly barındırmayı ayarlamak amacıyla ayrı bir istemci projesi gereklidir. İ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 App WebAssembly etkileşimini etkinleştirme seçeneğini belirlediğinizde şablon 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, Dialog bileşen örneğine etkileşimli sunucu tarafı işleme (etkileşimli SSR) uygulanır.

<Dialog @rendermode="InteractiveServer" />

Not

Blazor şablonlar, uygulamanın using dosyasındaki (RenderMode) daha kısa _Imports söz dizimi için Components/_Imports.razor statik 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 başlatılmış özel işleme modu örneklerine de referans verebilirsiniz. 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, sayfayı işleyen bileşenle Router aynı işleme modunu kullanır.

Teknik olarak, @rendermode hem Razoryönerge hem de Razoryö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.

Proje şablonunu temel alan Blazor Web App uygulamalar için, genellikle Routes bileşeni App bileşeninde kullanıldığında, uygulamanın tamamına atanmış bir işleme modu belirtilir (Components/App.razor):

<Routes @rendermode="InteractiveServer" />

Router bileşeni, işleme modunu yönlendirdiği sayfalara yayar.

Ayrıca genellikle, HeadOutlet proje şablonundan oluşturulan bileşeninde de bulunan App bileşeninin Blazor Web App bileşeninde aynı etkileşimli işlem 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 .Client klasörüne Layout yerleştirin veya taşıyın. Eğer Layout klasörü mevcut değilse .Client projesi içinde bir klasör oluşturun.
• Sunucu uygulamasının Components/Pages klasörünün bileşenlerini projenin .Client klasörüne Pages yerleştirin veya taşıyın. Eğer Pages klasörü mevcut değilse .Client projesi içinde bir 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.

Genel etkileşimi etkinleştirmek için Blazor Web App oluştururken:

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

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 başka bir etkileşimli uygulamada statik SSR'yi benimsemek için bir veya daha fazla bileşeni çağırdığında özellikle yararlıdır. Bu senaryo, bu makalenin ilerleyen bölümlerindeki, etkileşimli uygulama bölümünde bulunan Statik SSR sayfalarında ele alınmaktadı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 pageRenderMode

...

@code {
    private static IComponentRenderMode pageRenderMode = 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="PageRenderMode" />

...

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

İşleme modu yayma hakkında ek bilgiler, bu makalenin devamında İşleme modu yayma bölümünde sağlanır. Static SSR sayfaları, etkileşimli bir uygulamada bölümü, aksi durumda etkileşimli bir uygulamada statik SSR'yi benimsemek için önceki yaklaşımın nasıl kullanılacağını gösterir.

Blazor dokümantasyon Blazor Web App için örnekler

"Bir Blazor Web App kullanırken, çoğu Blazor belge örneği bileşeni, makalelerde ele alınan kavramların çalışabilmesi ve gösterilebilmesi için etkileşim gerektirir." Bir makale tarafından sağlanan örnek bir bileşeni test ederken, uygulamanın genel etkileşimi benimsediğinden veya bileşenin etkileşimli işleme modunu benimsediğinden emin olun.

Önceden İşleme

Etkileşimli işleme modları (Interactive Server, Interactive WebAssembly, Interactive Auto), başlangıçta ilk yükleme deneyimini geliştirmek için sayfa içeriğini sunucudan statik olarak işleyen ön kayıt işlemini varsayılan olarak destekler. Daha fazla bilgi için bkz. Prerender ASP.NET Core Razor bileşenleri.

Çalışma zamanında işleme konumunu, etkileşimini ve atanan işleme modunu algılama

ComponentBase.RendererInfo ve ComponentBase.AssignedRenderMode özellikleri, uygulamanın bir bileşenin konumu, etkileşimi ve atanmış işleme modu hakkındaki ayrıntıları algılamasına izin verir:

• RendererInfo.Name bileşenin yürütüldüğü konumu döndürür:
  • Static: Sunucuda (SSR) ve etkileşim kuramaz.
  • Server: Sunucu tarafında (SSR) ve ön işleme sonrasında etkileşim sağlayabilen.
  • WebAssembly: İstemcide (CSR) ve önyükleme sonrası etkileşim kurma yetisine sahip olan.
  • WebView: Yerel cihazda ve önceden işleme sonrasında etkileşime girebilen.
• RendererInfo.IsInteractive , bileşenin işleme sırasında etkileşimi desteklediğini gösterir. Değer, etkileşimli olarak işlenirken true, ön kayıt sırasında veya statik SSR için false (RendererInfo.Name - Static) şeklindedir.
• AssignedRenderMode bileşenin atanan işleme modunu kullanıma sunar:
  • InteractiveServerRenderMode etkileşimli sunucu için.
  • Etkileşimli Otomatik için InteractiveAutoRenderMode.
  • InteractiveWebAssemblyRenderMode Interactive WebAssembly için.
  • İşleme modu atanmamışsa null.

Bileşenler, konumlarına veya etkileşim durumlarına bağlı olarak içeriği işlemek için bu özellikleri kullanır. Aşağıdaki örneklerde tipik kullanım örnekleri gösterilmiştir.

Bir bileşen etkileşimli olana kadar içeriği görüntüleyin:

@if (!RendererInfo.IsInteractive)
{
    <p>Connecting to the assistant...</p>
}
else
{
    ...
}

Bileşen etkileşimli olana kadar düğmeyi devre dışı bırakın:

<button @onclick="Send" disabled="@(!RendererInfo.IsInteractive)">
    Send
</button>

Ön kayıt sırasında formu devre dışı bırakın ve bileşen etkileşimli olduğunda formu etkinleştirin:

<EditForm Model="Movie" ...>
    <fieldset disabled="@disabled">

        ...

        <button type="submit" >Save</button>
    </fieldset>
</EditForm>

@code {
    private bool disabled = true;

    [SupplyParameterFromForm]
    private Movie? Movie { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Movie ??= await ...;

        if (RendererInfo.IsInteractive)
        {
            disabled = false;
        }
    }
}

Bileşen statik olarak rendere edilmişse, normal bir HTML eylemi gerçekleştirmeye destek sağlamak için HTML kodunu rendere edin.

@if (AssignedRenderMode is null)
{
    // The render mode is Static Server
    <form action="/movies">
        <input type="text" name="titleFilter" />
        <input type="submit" value="Search" />
    </form>
}
else
{
    // The render mode is Interactive Server, WebAssembly, or Auto
    <input @bind="titleFilter" />
    <button @onclick="FilterMovies">Search</button>
}

Yukarıdaki örnekte:

• değeri AssignedRenderMode olduğunda null, bileşen statik SSR'yi benimser. Blazorolay işleme, statik SSR'ye sahip bir tarayıcıda işlevsel olmadığından, bileşen kullanıcının titleFilter değerine ayarlanmış bir sorgu dizesi içeren bir <input> form (GET isteği) gönderir. Movie bileşeni (/movie), sorgu dizesini okuyabilir ve bileşeni filtrelenmiş sonuçlarla göstermek için titleFilter değerini kullanabilir.
• Aksi takdirde, işleme modu herhangi bir InteractiveServer, InteractiveWebAssemblyveya InteractiveAutoşeklindedir. Bileşen, arka plan FilterMovies bağlantısı üzerinden filmleri etkileşimli olarak filtrelemek için bir olay işleyicisi temsilcisi (<input>) ve titleFilter öğesine bağlı değeri (SignalR) kullanabilir.

Statik sunucu tarafı işleme (statik SSR)

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 Appiçinde yerel olarak kullanıyorsanız, bileşeni sunucu projesinin Components/Pages klasörüne yerleştirin. Sunucu projesi, adı .Client ile bitmeyen çözüm projesidir. Uygulama çalışırken, tarayıcının adres çubuğuna /render-mode-1 yazın ve gidin.

Statik SSR sırasında bileşenlere ait sayfa istekleri, yetkilendirme kapsamında sunucu tarafı ASP.NET Core ara yazılım işlem hattı tarafından yapılan istek işlemesiyle işlenir. Yetkilendirme için ayrılmış Blazor özellikler, sunucu tarafı istek işleme sırasında Razor bileşenler işlenmediğinden çalışmaz. Blazor statik SSR sırasında kullanılamayan Routes bileşenindeki yönlendirici özellikler, Yetkili Değil içeriği (<NotAuthorized>...</NotAuthorized>)NotAuthorized görüntülemeyi içermez. Blazor Web Appgenellikle Yetkilendirme Ara Yazılımının davranışını özelleştirerek sunucudaki yetkisiz istekleri işler.

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), Blazor Server kullanarak bileşeni sunucudan etkileşimli olarak işler. Kullanıcı etkileşimleri, tarayıcıyla gerçek zamanlı bir bağlantı üzerinden işlenir. Devre bağlantısı, Sunucu bileşeni görüntülendiğinde kurulur.

Aşağıdaki örnekte, bileşen tanımına @rendermode InteractiveServer ekleyerek render modu etkileşimli SSR olarak ayarlanmıştır. Düğme seçildiğinde yöntemini çağırır UpdateMessage . message değerinin değişmesiyle bileşen yeniden render edilir ve mesaj kullanıcı arayüzünde güncellenir.

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 içinde Blazor Web Appkullanıyorsanız, bileşeni sunucu projesinin Components/Pages klasörüne yerleştirin. Sunucu projesi, adı .Client ile bitmeyen çözüm projesidir. Uygulama çalışırken, tarayıcının adres çubuğuna /render-mode-2 yazın ve gidin.

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 devre 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.

İstemci tarafı işleme (CSR)

İstemci tarafı işleme (CSR), Blazor WebAssembly kullanarak bileş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, @rendermode InteractiveWebAssembly ile görüntüleme modu CSR olarak ayarlanmıştır. Düğme seçildiğinde yöntemini çağırır UpdateMessage . message değerinin değişmesiyle bileşen yeniden render edilir ve mesaj kullanıcı arayüzünde güncellenir.

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 yerel olarak bir Blazor Web Appiçinde kullanıyorsanız, bileşeni istemci projesinin Pages klasörüne yerleştirin. İstemci projesi, adı .Client ile biten çözüm projesidir. Uygulama çalışırken, tarayıcının adres çubuğuna /render-mode-3 yazın ve gidin.

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 . message değerinin değişmesiyle bileşen yeniden render edilir ve mesaj kullanıcı arayüzünde güncellenir. 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 yerel olarak bir Blazor Web Appiçinde kullanıyorsanız, bileşeni istemci projesinin Pages klasörüne yerleştirin. İstemci projesi, adı .Client ile biten çözüm projesidir. Uygulama çalışırken, tarayıcının adres çubuğuna /render-mode-4 yazın ve gidin.

İşleme Modu Yayılımı

İşleme modları, bileşen hiyerarşisi boyunca yayılır.

İş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.
• Bir 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 JSON serileştirilebilir olmalıdır. 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 bağımsız bileşeni, yönergesi ile bir işleme modu uygulamaz. Bu senaryoları Blazor Web App 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 UpdateMessage çağrısını yapmaz ve ileti güncellenmez.

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 UpdateMessage öğesini çağırır ve iletiyi günceller.

RenderMode6.razor:

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

<SharedMessage />

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

Aşağıdaki örnekte, her iki SharedMessage bileşen de önceden render ediliyor ve sayfa tarayıcıda görüntülendiğinde görünürler.

• Etkileşimli sunucu tarafı işlemeye (etkileşimli SSR) sahip ilk SharedMessage bileşen, Blazor'nin SignalR devresi kurulduktan sonra etkileşimlidir.
• İstemci tarafı işlemeye (CSR) sahip ikinci SharedMessage bileşen, uygulama paketi indirildikten ve .NET çalışma zamanı istemcide etkin olduktan sonra etkileşimli hale gelir.

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!" />

Seri hale getirilemeyen bileşen parametreleri, örneğin alt içerik veya işlenmiş parça, desteklenmez. Aşağıdaki örnekte, alt içeriğin SharedMessage bileşenine geçirilmesi bir çalışma zamanı hatasına neden olur.

RenderMode9.razor:

@page "/render-mode-9"

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

❌ Hata:

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

Aynı şey, sayfa veya bileşen bazlı işlemeyi benimseyen bir uygulamada, uygulamanın LayoutComponentBase bileşeni gibi MainLayout öğesinden devralan bir düzende etkileşimli işlemeyi uygulamaya çalışırsanız da meydana gelir. Daha fazla bilgi için bkz . ASP.NET Çekirdek Blazor düzenleri.

Önceki sınırlamayı atlatmak için, alt bileşeni parametresi bulunmayan başka bir bileşende sarın. Bu, Blazor Web App bileşeni sarmalamak için Routes bileşeniyle (Components/Routes.razor) Router proje şablonunda alınan yaklaşımdır.

WrapperComponent.razor:

<SharedMessage>
    Child content
</SharedMessage>

RenderMode10.razor:

@page "/render-mode-10"

<WrapperComponent @rendermode="InteractiveServer" />

Yukarıdaki örnekte:

• Çocuk içeriği, çalışma zamanı hatası oluşturmadan SharedMessage bileşene aktarılır.
• Sunucuda SharedMessage bileşeni etkileşimli olarak çalışır.

Üstdüzeyinden farklı işleme moduna sahip alt bileşen

Alt bileşene, ebeveyn bileşeninin işleme modundan farklı bir etkileşimli işleme modu uygulamayı denemeyin.

Aşağıdaki bileşen, bileşen işlendiğinde bir çalışma zamanı hatasına neden olur.

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.

Etkileşimli bir uygulamada statik SSR sayfaları

Uygulama belirtimi, bileşenlerin statik sunucu tarafı işleme (static SSR) benimsemesini ve yalnızca sunucuda çalışmasını gerektirdiği durumlar vardır; uygulamanın geri kalanının ise etkileşimli işleme modunu kullandığı durumlar vardır.

Bu yaklaşım, uygulamanın etkileşimli Sunucu veya WebAssembly işleme ile çalışamayan belirli sayfaları olduğunda yararlıdır. Örneğin, okuma/yazma HTTP tanımlama bilgilerine bağımlı olan ve etkileşimli işleme yerine yalnızca istem/yanıt döngüsünde çalışabilen sayfalar için bu yaklaşımı benimseyin. Etkileşimli işlemeyle çalışan sayfalar için, son kullanıcı için daha az verimli ve daha az yanıt veren olduğundan, bunları statik SSR kullanmaya zorlamamalısınız.

Herhangi bir Razor bileşen sayfasını yönergesi [ExcludeFromInteractiveRouting] ile atanan özniteliğiyle@attributeRazor işaretleyin:

@attribute [ExcludeFromInteractiveRouting]

Bir özniteliğin uygulanması, sayfada gezintinin etkileşimli yönlendirmeden çıkmasına neden olur. Gelen gezinti trafiği, etkileşimli yönlendirme kullanmak yerine tam sayfa yeniden yükleme gerçekleştirmeye zorlanır. Tam sayfa yeniden yükleme, genellikle App bileşeni ()App.razor olan üst düzey kök bileşeni sunucudan yeniden yüklemeye zorlayarak uygulamanın farklı bir üst düzey işleme moduna geçmesini sağlar.

RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting uzantı yöntemi, bileşenin özniteliğin [ExcludeFromInteractiveRouting] geçerli sayfaya uygulanıp uygulanmadığını algılamasına olanak tanır.

Bileşeninde App , aşağıdaki örnekteki deseni kullanın:

• [ExcludeFromInteractiveRouting] özniteliği ile ek açıklama eklememiş sayfalar, varsayılan olarak genel etkileşime sahip InteractiveServer oluşturma moduna geçer. InteractiveServer'ı InteractiveWebAssembly veya InteractiveAuto ile değiştirerek farklı bir varsayılan genel işleme modu belirtebilirsiniz.
• Ek açıklamalı sayfalar, [ExcludeFromInteractiveRouting] özniteliğiyle statik SSR'yi benimser (PageRenderMode, null olarak atanır).

<!DOCTYPE html>
<html>
<head>
    ...
    <HeadOutlet @rendermode="@PageRenderMode" />
</head>
<body>
    <Routes @rendermode="@PageRenderMode" />
    ...
</body>
</html>

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

    private IComponentRenderMode? PageRenderMode
        => HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}

RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting uzantı yöntemini kullanmanın bir alternatifi, HttpContext.GetEndpoint()?.Metadata kullanarak uç nokta meta verilerini el ile okumaktır.

Özel kısayol işleme modları

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

Normalde bir bileşen, ön işleme 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 işleme yapmadan şablonlu 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);

Components klasörü genelindeki bileşenlerde kısaltılmış render 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);
}

Mevcut durumda, özet işleme modu yaklaşımı büyük olasılıkla yalnızca prerender bayrağını belirtme uzunluğunu 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.

Ek kaynaklar

• WebSocket sıkıştırması
  • ASP.NET Temel BlazorSignalR kılavuzu
  • ASP.NET Core Blazor etkileşimli sunucu tarafı işleme için tehdit azaltma kılavuzu
• ASP.NET Core Blazor JavaScript ile statik sunucu tarafı işleme (statik SSR)
• Basamaklı değerler/parametreler ve işleme modu sınırları: Ayrıca makalenin önceki bölümlerindeki Kök düzeyinde basamaklı değerler ve bildirim bölümleriyle Kök düzeyinde basamaklama değerlerine de bakın.
• statik sunucu tarafı işleme (statik SSR) ile ASP.NET Core Razor sınıf kitaplıkları (RCL)
• Verileri Blazor Web App'lerde etkileşimli otomatik işleme ile güvence altına almak