ASP.NET Core Blazor işleme modları

Bu makalede derleme zamanında veya çalışma zamanında bileşenleri işleme Blazor Web Appdenetiminin açıklanmaktadırRazor.

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ı

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.

Aşağıdaki tabloda, içindeki Blazor Web Appbileş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.

†İ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 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. oluşturma Blazor Web Appyönergeleri için bkz . ASP.NET Core Blazoriçin araç oluşturma.

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

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

Ö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 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, bileşen örneğine etkileşimli sunucu tarafı işleme (etkileşimli SSR) uygulanır Dialog :

<Dialog @rendermode="InteractiveServer" />

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

<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, sayfayı işleyen bileşenle Router aynı işleme modunu kullanır.

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

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.

Proje şablonunu temel alan Blazor Web App 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 App bileşenin bileşeninde de bulunan bileşendeApp aynı etkileşimli işleme modunu HeadOutlet 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 Routes Components klasörünün .Client bileşenini projenin kök klasörüne yerleştirin veya taşıyın.

oluştururken Blazor Web Appgenel 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, özellikle uygulama belirtiminiz küresel olarak etkileşimli bir uygulamada statik SSR'yi benimsemek için bir veya daha fazla bileşeni çağırdığında kullanışlıdır. Bu senaryo, bu makalenin devamında yer alan genel olarak etkileşimli bir uygulamanın Statik SSR sayfalarında ele alınmıştı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. Genel olarak etkileşimli bir uygulama bölümündeki Statik SSR sayfaları, genel olarak etkileşimli bir uygulamada statik SSR'yi benimsemek için önceki yaklaşımın nasıl kullanılacağını gösterir.

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

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

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

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

Blazor belgeler için Blazor Web Appörnekler

kullanırken Blazor Web App, belge örneği bileşenlerinin Blazor çoğu, makalelerde ele alınan kavramların çalışması ve gösterilmesi 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.

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

Etkileşimli yönlendirme için iç gezinti, sunucudan yeni sayfa içeriği istemeyi içermez. Bu nedenle, gelişmiş gezinti dahil olmak üzere iç sayfa istekleri için ön kayıt gerçekleşmez. Daha fazla bilgi için bkz . Statik ve etkileşimli yönlendirme, Etkileşimli yönlendirme ve ön kayıt ve Gelişmiş gezinti ve form işleme.

Aşağıdaki teknikleri kullanarak prerendering'in devre dışı bırakılması yalnızca üst düzey işleme modları için geçerli olur. Bir üst bileşen işleme modunu belirtirse, alt öğelerinin ön kayıt ayarları yoksayılır. Bu davranış, Kasım 2025'te .NET 10 sürümüyle olası değişiklikler için araştırılıyor.

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.

Proje şablonunu temel alan uygulamalar için, bileşenin Blazor Web App 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)

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, çö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:

• Yetkilendirilmemiş içerik () (NotAuthorized<NotAuthorized>...</NotAuthorized>): Blazor Web Appgenellikle Yetkilendirme Ara Yazılımının davranışını özelleştirerek sunucudaki yetkisiz istekleri işler.

• Bulunamaz içerik () (NotFound<NotFound>...</NotFound>): Blazor Web Appgenellikle tarayıcının yerleşik 404 kullanıcı arabirimini görüntüleyerek veya ASP.NET Core ara yazılımı (örneğin API UseStatusCodePagesWithRedirects / belgeleri) aracılığıyla özel bir 404 sayfası (veya başka bir yanıt) döndürerek sunucuda hatalı URL isteklerini 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), 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 içinde Blazor Web Appkullanı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 yerel olarak bir Blazor Web Appiçinde 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 yerel olarak bir Blazor Web Appiçinde 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 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 belirsiz SharedMessage bileşeni, yönergesi olan @attribute bir işleme modu uygulamaz. Bu senaryoları ile Blazor Web Apptest 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 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 Blazoretkileşimlidir.
• İstemci tarafı işlemeye (CSR) sahip ikinci SharedMessage bileşen, uygulama paketi indirildikten ve .NET çalışma zamanı istemcide etkin olduktan sonra Blazor 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 seri hale getirilemez 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) proje şablonunda kullanılan Blazor Web App 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.

Genel olarak etkileşimli bir uygulamada statik SSR sayfaları

Uygulamanın belirtiminin, bileşenlerin statik sunucu tarafı işlemeyi (statik SSR) benimsemesini ve yalnızca sunucuda rest çalışmasını, uygulamanın belirtiminin ise etkileşimli işleme modunu kullandığı durumlar vardır.

Bu yaklaşım yalnızca uygulamanın etkileşimli Sunucu veya WebAssembly işleme ile çalışamaz 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 istek/yanıt döngüsünde çalışabilen sayfalar için bu yaklaşımı benimseyin. Etkileşimli işleme ile çalışan sayfalar için, son kullanıcı için daha az verimli ve daha az yanıt veren olduğundan, bunları statik SSR işleme kullanmaya zorlamamalısınız.

@attribute [ExcludeFromInteractiveRouting]

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

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

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

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

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

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

<Routes @rendermode="RenderModeForPage" />

...

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

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

@inherits LayoutComponentBase
@layout MainLayout
@inject NavigationManager Navigation

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

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

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

<Routes @rendermode="RenderModeForPage" />

...

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

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

@layout BlazorSample.Components.Layout.StaticSsrLayout

@rendermode {INTERACTIVE RENDER MODE}

İ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 ile içindeki projede Blazor Web App 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:

'BlazorSample.Client.Pages.Home' türünde 'Environment' ö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 s için Blazor Web Appgeç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