ASP.NET Core Blazor durum yönetimi

Bir uygulamada oluşturulan kullanıcı durumu Blazor WebAssembly tarayıcının belleğinde tutulur.

Tarayıcı belleğinde tutulan Kullanıcı durumu örnekleri şunları içerir:

• Oluşturulan kullanıcı arabirimindeki bileşen örneklerinin ve en son işleme çıktılarının hiyerarşisi.
• Bileşen örneklerinde alanların ve özelliklerin değerleri.
• Bağımlılık ekleme (dı) hizmet örneklerinde tutulan veriler.
• JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanan değerler.

Kullanıcı tarayıcısını kapatıp yeniden açtığında veya sayfayı yeniden yüklediğinde, tarayıcının belleğinde tutulan Kullanıcı durumu kaybedilir.

Tarayıcı oturumlarında durumu kalıcı yap

Genellikle, kullanıcıların, zaten mevcut olan verileri okurken değil, etkin bir şekilde veri oluşturmakta olduğu tarayıcı oturumlarında durumu koruyun.

Tarayıcı oturumlarında durumu korumak için, uygulamanın verileri tarayıcı belleğinden başka bir depolama konumuna kalıcı hale vermelidir. Durum kalıcılığı otomatik değildir. Durum bilgisi olan veri kalıcılığını uygulamak üzere uygulamayı geliştirirken adımları uygulamanız gerekir.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturma çabasında olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcı durum ticari etkinliklerdeki zaman veya yardımlarını kaydeder:

• Çok adımlı Web formları: bir kullanıcının, durumları kaybedilmişse, çok adımlı bir Web formunun birkaç tamamlanmış adımı için verileri yeniden girmesi zaman alır. Kullanıcı formdan ayrıldıklarında ve daha sonra geri dönüp Bu senaryodaki durumu kaybeder.
• Alışveriş sepetlerini: olası geliri temsil eden bir uygulamanın ticari olarak önemli bileşenleri korunabilir. Durumlarını kaybettikleri bir Kullanıcı ve bu nedenle alışveriş sepeti, siteye daha sonra geri döntiklerinde daha az ürün veya hizmet satın alabilir.

Uygulama, uygulama durumunu yalnızca kalıcı hale getirebilirler. Usıs, bileşen örnekleri ve bunların işleme ağaçları gibi kalıcı hale getirilir. Bileşenler ve işleme ağaçları genellikle seri hale getirilebilir değildir. Ağaç görünümü denetiminin genişletilmiş düğümleri gibi UI durumunu kalıcı hale getirmek için, uygulamanın kullanıcı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemek üzere özel kod kullanması gerekir.

Durumun nerede kalıcı olduğu

Kalıcı durum için genel konumlar mevcuttur:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolama
• Bellek içi durum kapsayıcısı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcı ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama bir Web API 'SI aracılığıyla erişilen bağımsız sunucu tarafı depolama kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolaması
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra, kullanıcının durumu korunur ve herhangi bir yeni tarayıcı oturumunda kullanılabilir.

Blazor WebAssemblyUygulamalar tamamen kullanıcının tarayıcısında çalıştığı için, depolama hizmetleri ve veritabanları gibi güvenli dış sistemlere erişmek için ek ölçüler gerektirir. Blazor WebAssembly uygulamalar, tek sayfalı uygulamalarla (maça 'Lar) aynı şekilde güvenli hale getirilir. genellikle, bir uygulama OAuth / openıd Bağlan (oıdc) aracılığıyla bir kullanıcının kimliğini doğrular ve ardından sunucu tarafı bir uygulamaya web apı çağrıları aracılığıyla depolama hizmetleri ve veritabanlarıyla etkileşime girer. Sunucu tarafı uygulama, Blazor WebAssembly uygulama ve depolama hizmeti ya da veritabanı arasında veri aktarımını gösterir. Sunucu tarafı uygulamasının Blazor WebAssembly depolamaya kalıcı bir bağlantısı olduğunda uygulama, sunucu tarafı uygulamasına kısa ömürlü bir bağlantı sağlar.

Daha fazla bilgi için aşağıdaki kaynaklara bakın:

• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly
• BlazorGüvenlik ve Identity makaleleri

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için, verileri URL 'nin bir parçası olarak modelleyin. URL 'de modellenen Kullanıcı durumu örnekleri şunları içerir:

• Görüntülenen varlığın KIMLIĞI.
• Disk belleğine alınmış bir kılavuzdaki geçerli sayfa numarası.

Kullanıcı sayfayı el ile yeniden yüklediğinde tarayıcının adres çubuğunun içeriği korunur.

Yönergeyle URL desenleri tanımlama hakkında bilgi için @page bkz ASP.NET Core Blazor Yönlendirme ..

Tarayıcı depolama

Kullanıcının etkin şekilde oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan bir depolama konumu tarayıcının localStorage ve sessionStorage koleksiyonlarıdır:

• localStorage tarayıcı penceresinin kapsamına alınır. Kullanıcı sayfayı yeniden yüklediğinde veya tarayıcıyı kapatıp yeniden açarsa durum devam ettirir. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler localStorage Açık olarak temizlenene kadar içinde devam ediyor.
• sessionStorage , tarayıcı sekmesinin kapsamına alınır. Kullanıcı sekmeyi yeniden yüklediğinde durum devam ettirir. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybedilir. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin kendi bağımsız bir veri sürümü vardır.

Genellikle, sessionStorage kullanmak daha güvenlidir. sessionStorage bir kullanıcının birden çok sekme açmasını ve aşağıdaki gibi karşılaştığı riskleri önler:

• Sekmelerde durum depolamadaki hatalar.
• Sekme diğer sekmelerin durumunun üzerine yazdığınızda kafa karıştırıcı davranışı.

localStorage uygulamanın kapatma ve tarayıcıyı yeniden açma genelinde durumu kalıcı hale getirilmesi gerekiyorsa, daha iyi bir seçenektir.

Bellek içi durum kapsayıcısı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Ek kaynaklar

• Bir kimlik doğrulama işleminden önce uygulama durumunu Kaydet
• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly

Blazor Server durum bilgisi olan bir uygulama çerçevesidir. Çoğu zaman, uygulama sunucusuyla bir bağlantı sağlar. Kullanıcının durumu, sunucu belleğinde bir devrende tutulur.

Bir devreye sahip kullanıcı durumu örnekleri şunları içerir:

• Oluşturulan kullanıcı arabirimindeki bileşen örneklerinin ve en son işleme çıktılarının hiyerarşisi.
• Bileşen örneklerinde alanların ve özelliklerin değerleri.
• Devre kapsamına alınan bağımlılık ekleme (dı) hizmet örneklerinde tutulan veriler.

Kullanıcı durumu, JavaScript birlikte çalışma çağrıları aracılığıyla tarayıcının bellek kümesindeki JavaScript değişkenlerinde de bulunabilir.

Bir Kullanıcı geçici bir ağ bağlantısı kaybıyla karşılaşıyorsa, Blazor özgün durumlarındaki kullanıcıyı özgün devresine yeniden bağlamaya çalışır. Ancak, bir kullanıcıyı sunucunun belleğindeki özgün devresine yeniden bağlamak her zaman mümkün değildir:

• Sunucu, bağlantısı kesilen bir devreni süresiz olarak sürdüremez. Sunucu, bir zaman aşımından sonra veya sunucu bellek baskısı altında olduğunda, bağlantısı kesilen bir bağlantı hattını serbest bırakmalıdır.
• Çok sunuculu, yük dengeli dağıtım ortamlarında, tek tek sunucular başarısız olabilir veya artık tüm istek hacminin işlenmesi gerekmiyorsa otomatik olarak kaldırılabilir. Kullanıcı yeniden bağlanmayı denediğinde, bir kullanıcı için özgün sunucu işleme istekleri kullanılamaz hale gelebilir.
• Kullanıcı tarayıcıyı kapatabilir ve yeniden açabilir veya sayfayı yeniden yükleyerek tarayıcı belleğinde tutulan tüm durumları kaldırır. Örneğin, JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanan JavaScript değişken değerleri kaybolur.

Kullanıcı özgün devresine yeniden bağlanalınmayacaksa, Kullanıcı boş duruma sahip yeni bir devre alır. Bu, bir masaüstü uygulamasını kapatıp yeniden açmaya eşdeğerdir.

Devreler arasında durumu kalıcı yap

Genellikle, kullanıcıların, zaten mevcut olan verileri okumadan değil, etkin bir şekilde veri oluşturmakta olduğu devrelerde durumu koruyun.

Uygulama, durumu devrelerde korumak için, verilerin sunucu belleğinden başka bir depolama konumuna kalıcı hale gelmelidir. Durum kalıcılığı otomatik değildir. Durum bilgisi olan veri kalıcılığını uygulamak üzere uygulamayı geliştirirken adımları uygulamanız gerekir.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturma çabasında olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcılık durumu zaman kazandırır veya ticari etkinliklere yardımcı olur:

• Çok adımlı web formları: Bir kullanıcının durumu kaybolursa çok adımlı bir web formunun tamamlanmış birkaç adımı için verileri yeniden girmek zaman alır. Kullanıcı forma dönüp daha sonra geri dönerse bu senaryoda durumu kaybeder.
• Alışveriş sepetleri: Bir uygulamanın potansiyel geliri temsil eden ticari olarak önemli bileşenleri korunabilirsiniz. Durumunu ve dolayısıyla alışveriş sepetini kaybeden bir kullanıcı, siteye daha sonra geri dönerek daha az ürün veya hizmet satın almalarına neden olabilir.

Bir uygulama yalnızca uygulama durumunu kalıcı olarak kalıcı olarak bulundurabilirsiniz. Bileşen örnekleri ve bunların işleme ağaçları gibi UI'ler kalıcı olarak tutulamaz. Bileşenler ve işleme ağaçları genellikle serileştirilebilir değildir. Ağaç görünümü denetimi genişletilmiş düğümleri gibi kullanıcı arabirimi durumunu kalıcı hale getirmesi için, uygulamanın özel kod kullanarak kullanıcı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemesi gerekir.

Durum nerede kalıcıdır?

Kalıcı durum için ortak konumlar vardır:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolaması
• Bellek içinde durum kapsayıcı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcı ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama sunucu tarafı depolamayı kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolama
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra kullanıcının durumu korunur ve yeni bağlantı hatlarında kullanılabilir.

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure Veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için verileri URL'nin bir parçası olarak modelle. URL'de modelli kullanıcı durumu örnekleri şunlardır:

• Görüntülenen varlığın kimliği.
• Sayfalı kılavuzda geçerli sayfa numarası.

Tarayıcının adres çubuğunun içeriği korunur:

• Kullanıcı sayfayı el ile yeniden yüklese.
• Web sunucusu kullanılamaz duruma gelirse ve kullanıcı farklı bir sunucuya bağlanmak için sayfayı yeniden yüklemek zorunda kalan bir sunucudur.

yönergesi ile URL desenlerini tanımlama hakkında bilgi @page için bkz. ASP.NET Core Blazor Yönlendirme .

Tarayıcı depolaması

Kullanıcının etkin olarak oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan depolama konumu tarayıcının ve localStorage sessionStorage koleksiyonlarının konumudur:

• localStorage kapsamı tarayıcının penceresine göredir. Kullanıcı sayfayı yeniden yüklese veya kapatırsa ve tarayıcıyı yeniden açarsa, durum devam eder. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler açıkça localStorage temizlenene kadar içinde kalıcı olur.
• sessionStorage , tarayıcı sekmesinin kapsamına göredir. Kullanıcı sekmeyi yeniden yükleyene kadar durum devam eder. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybolur. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin verilerin kendi bağımsız sürümü vardır.

Genellikle, sessionStorage kullanımı daha güvenlidir. sessionStorage , bir kullanıcının birden çok sekme açması ve aşağıdakilerle karşılaşması riskini önlemez:

• Sekmeler arasında durum depolamadaki hatalar.
• Bir sekmenin diğer sekmelerin durumunun üzerine yazması kafa karıştırıcı bir davranıştır.

localStorage uygulamanın tarayıcıyı kapatıp yeniden açması için durum kalıcı olması gerekirse daha iyi bir seçenektir.

Tarayıcı depolamasını kullanmayla ilgili uyarılar:

• Sunucu tarafı veritabanının kullanımına benzer şekilde, verileri yükleme ve kaydetme zaman uyumsuzdur.
• Sunucu tarafı veritabanından farklı olarak, istenen sayfa, ön iş oluşturma aşamasında tarayıcıda mevcut olduğundan, önceden oluşturma sırasında depolama alanı kullanılamaz.
• Depolama kilobaytlarca verinin uygulamalar için kalıcı olduğu Blazor Server kabul edilebilir. Veriler ağ üzerinden yükleniyor ve kaydedi olduğundan birkaç kilobayt'ın ötesinde performans etkilerini göz önünde bulundurabilirsiniz.
• Kullanıcılar verileri görüntüleme veya üzerinde oynayabilirsiniz. ASP.NET Core Koruma, riski azaltabilirsiniz. Örneğin, ASP.NET Core Tarayıcı Depolama Veri Koruması ASP.NET Core kullanır.

Üçüncü taraf NuGet paketleri ve ile çalışmak için API'ler localStorage sessionStorage sağlar. Veri Koruması'nın saydam bir şekilde kullandığı bir paket ASP.NET Core göz önünde bulundurabilirsiniz. Data Protection, depolanan verileri şifreler ve depolanan verilerle oynanma riskini azaltır. JSON serileştirilmiş verileri düz metin halinde depolanıyorsa, kullanıcılar tarayıcı geliştirici araçlarını kullanarak verileri görebilir ve depolanan verileri değiştirebilir. Verilerin güvenliğini sağlamak her zaman sorun değildir çünkü veriler doğası gereği önemsiz olabilir. Örneğin, kullanıcı arabirimi öğesinin depolanan rengini okumak veya değiştirmek, kullanıcı veya kuruluş için önemli bir güvenlik riski oluşturmaz. Kullanıcıların hassas verileri incelemelerine veya üzerinde oynamalarına izin verme.

ASP.NET Core Protected Browser Depolama

ASP.NET Core Protected Browser Depolama ve için ASP.NET Core Koruması'ASP.NET Core'den localStorage sessionStorage yararlanıyor.

Bir bileşen içinde verileri kaydetme ve yükleme

Tarayıcı depolama alanına veri yükleme veya kaydetme gerektiren herhangi bir bileşende, aşağıdakilerden herhangi @inject birini örneği ekleme yönergesini kullanın:

• ProtectedLocalStorage
• ProtectedSessionStorage

Bu seçenek, hangi tarayıcı depolama konumunu kullanmak istediğinize bağlıdır. Aşağıdaki örnekte sessionStorage kullanılmıştır:

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@usingyönergesi, bileşeni yerine _Imports.razor uygulamanın dosyasına yer verilmiştir. Dosyanın _Imports.razor kullanımı, ad alanını uygulamanın daha büyük segmentleri veya uygulamanın tamamı için kullanılabilir yapar.

Proje şablonunu currentCount temel alarak bir uygulamanın bileşeninde değerini kalıcı Counter yapmak Blazor Server içinyöntemini kullanarak IncrementCount ProtectedSessionStore.SetAsync değiştirme:

private async Task IncrementCount()
{
    currentCount++;
    await ProtectedSessionStore.SetAsync("count", currentCount);
}

Daha büyük ve daha gerçekçi uygulamalarda tek tek alanların depolanması olası bir senaryodur. Uygulamaların karmaşık durum içeren model nesnelerinin tamamını depolama olasılığı daha fazladır. ProtectedSessionStore karmaşık durum nesnelerini depolamak için JSON verilerini otomatik olarak seri hale getirer ve seri durumdan oluşturur.

Yukarıdaki kod örneğinde currentCount veriler kullanıcının sessionStorage['count'] tarayıcısında olduğu gibi depolanır. Veriler düz metin olarak depolanmış değil, veri koruma ASP.NET Core korunur. Şifrelenmiş veriler tarayıcının geliştirici sessionStorage['count'] konsolunda değerlendirilirse inceleyebilirsiniz.

Kullanıcı daha sonra bileşene geri döndüğünde, kullanıcı yeni bir bağlantı hattında ise dahil olmak currentCount üzere verileri kurtarmak için Counter ProtectedSessionStore.GetAsync kullanın:

protected override async Task OnInitializedAsync()
{
    var result = await ProtectedSessionStore.GetAsync<int>("count");
    currentCount = result.Success ? result.Value : 0;
}

Bileşenin parametreleri gezinti durumunu içerirse, çağrısında ve içinde olmayan bir ProtectedSessionStore.GetAsync null sonuç atarak , OnParametersSetAsync OnInitializedAsync değil. OnInitializedAsync bileşen ilk kez örneği çağrıldıktan sonra yalnızca bir kez çağrılır. OnInitializedAsync kullanıcı aynı sayfadayken farklı bir URL'ye gitse daha sonra yeniden çağrılmayacaktır. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Yükleme durumunu işleme

Tarayıcı depolama alanına bir ağ bağlantısı üzerinden zaman uyumsuz olarak erişilir, verilerin bir bileşen tarafından yüklenmeden ve kullanılabilir olmadan önce her zaman bir süre vardır. En iyi sonuçlar için, boş veya varsayılan veriler görüntülemek yerine yükleme devam ederken bir yükleme durumu iletisi işleniyor.

Yaklaşımlardan biri, verilerin olup olmadığını null izlemektir. Bu da verilerin hala yükleniyor olduğu anlamına gelir. Varsayılan Counter bileşende, sayı bir içinde int tutulacak. türüne currentCount ( ) bir soru işareti ekleyerek ? null değere değiştirilebilir hale int geldi:

private int? currentCount;

Sayı ve düğmeyi koşulsuz olarak görüntülemek yerine, yalnızca veriler denetlenerek yüklendiğinde Increment bu öğeleri HasValue görüntüler:

@if (currentCount.HasValue)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

Ön işlemeyi işleme

İlke sırasında:

• Kullanıcının tarayıcısına etkileşimli bir bağlantı yok.
• Tarayıcıda henüz JavaScript kodu çalıştıracak bir sayfa yok.

localStorage veya sessionStorage prerendering sırasında kullanılamaz. Bileşen depolama ile etkileşim kurmayı denerse, bileşen önceden çıkarılmakta olduğundan JavaScript birlikte çalışma çağrılarının yayımlanamayacağını açıklayan bir hata oluşturulur.

Hatayı çözmek için bir yol prerendering devre dışı bırakılır. Bu genellikle uygulama tarayıcı tabanlı depolamanın yoğun bir şekilde kullanımını yapıyorsa en iyi seçenektir. Prerendering karmaşıklık ekler ve uygulama, kullanılabilir olana kadar faydalı içeriğe gidemediği için uygulamaya yarar localStorage sessionStorage .

Prerendering 'yi devre dışı bırakmak için, Pages/_Host.cshtml dosyayı açın ve render-mode bileşen etiketi Yardımcısı özniteliğini şu şekilde değiştirin Server :

<component type="typeof(App)" render-mode="Server" />

<head> İçerik prerendering içinde devre dışı bırakıldı Pages/_Layout.cshtml :

<component type="typeof(HeadOutlet)" render-mode="Server" />

Prerendering, veya kullanmayan diğer sayfalar için yararlı olabilir localStorage sessionStorage . Prerendering devam etmek için, tarayıcı devreye bağlanana kadar yükleme işlemini erteleyin. Aşağıda, bir sayaç değeri depolamak için bir örnek verilmiştir:

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage ProtectedLocalStore

@if (isConnected)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

@code {
    private int currentCount;
    private bool isConnected;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isConnected = true;
            await LoadStateAsync();
            StateHasChanged();
        }
    }

    private async Task LoadStateAsync()
    {
        var result = await ProtectedLocalStore.GetAsync<int>("count");
        currentCount = result.Success ? result.Value : 0;
    }

    private async Task IncrementCount()
    {
        currentCount++;
        await ProtectedLocalStore.SetAsync("count", currentCount);
    }
}

Durum korumasını ortak bir konuma ayırın

Birçok bileşen tarayıcı tabanlı depolamaya güveniyorsa, durum sağlayıcısı kodu birçok kez yeniden uygulama kod yinelemesi oluşturur. Kod çoğaltmaktan kaçınmanın bir seçeneği, durum sağlayıcısı mantığını kapsülleyen bir durum sağlayıcısı ana bileşeni oluşturmaktır. Alt bileşenler, durum kalıcılığı mekanizmasına bakılmaksızın kalıcı verilerle çalışabilir.

Aşağıdaki bir CounterStateProvider bileşen örneğinde, sayaç verileri şunlar için kalıcıdır sessionStorage :

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@if (isLoaded)
{
    <CascadingValue Value="@this">
        @ChildContent
    </CascadingValue>
}
else
{
    <p>Loading...</p>
}

@code {
    private bool isLoaded;

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

    public int CurrentCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var result = await ProtectedSessionStore.GetAsync<int>("count");
        CurrentCount = result.Success ? result.Value : 0;
        isLoaded = true;
    }

    public async Task SaveChangesAsync()
    {
        await ProtectedSessionStore.SetAsync("count", CurrentCount);
    }
}

CounterStateProviderBileşen, yükleme tamamlanana kadar alt içeriğini işlemeden Yükleme aşamasını işler.

Bileşeni kullanmak için CounterStateProvider , bileşenin bir örneğini sayaç durumuna erişimi gerektiren diğer tüm bileşenler etrafında sarmalayın. Durumu bir uygulamadaki tüm bileşenler için erişilebilir hale getirmek üzere bileşeni CounterStateProvider Router App bileşenin () etrafında sarmalayın App.razor :

<CounterStateProvider>
    <Router AppAssembly="@typeof(Program).Assembly">
        ...
    </Router>
</CounterStateProvider>

Sarmalanan bileşenler, kalıcı sayaç durumunu alır ve değiştirebilir. Aşağıdaki Counter Bileşen, bu kalıbı uygular:

@page "/counter"

<p>Current count: <strong>@CounterStateProvider.CurrentCount</strong></p>
<button @onclick="IncrementCount">Increment</button>

@code {
    [CascadingParameter]
    private CounterStateProvider CounterStateProvider { get; set; }

    private async Task IncrementCount()
    {
        CounterStateProvider.CurrentCount++;
        await CounterStateProvider.SaveChangesAsync();
    }
}

Yukarıdaki bileşen, ile etkileşimde bulunmak ProtectedBrowserStorage veya bir "yükleme" aşaması ile uğraşmak için gerekli değildir.

Daha önce açıklandığı gibi prerendering ile başa çıkmak için, CounterStateProvider sayaç verilerini kullanan tüm bileşenlerin prerendering ile otomatik olarak çalışmasını sağlayacak şekilde değiştirilebilir. Daha fazla bilgi için bkz. Handle prerendering bölümü.

Genel olarak, durum sağlayıcısı üst bileşen deseninin kullanılması önerilir:

• Birçok bileşen genelinde durumu kullanmak için.
• Kalıcı olacak yalnızca bir üst düzey durum nesnesi varsa.

Birçok farklı durum nesnesini kalıcı hale getirmek ve farklı yerlerde nesnelerin farklı alt kümelerini kullanmak için, kalıcı durumu küresel olarak önlemek daha iyidir.

Bellek içi durum kapsayıcısı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Bir uygulamada oluşturulan kullanıcı durumu Blazor WebAssembly tarayıcının belleğinde tutulur.

Tarayıcı belleğinde tutulan Kullanıcı durumu örnekleri şunları içerir:

• Oluşturulan kullanıcı arabirimindeki bileşen örneklerinin ve en son işleme çıktılarının hiyerarşisi.
• Bileşen örneklerinde alanların ve özelliklerin değerleri.
• Bağımlılık ekleme (dı) hizmet örneklerinde tutulan veriler.
• JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanan değerler.

Kullanıcı tarayıcısını kapatıp yeniden açtığında veya sayfayı yeniden yüklediğinde, tarayıcının belleğinde tutulan Kullanıcı durumu kaybedilir.

Tarayıcı oturumlarında durumu kalıcı yap

Genellikle, kullanıcıların, zaten mevcut olan verileri okurken değil, etkin bir şekilde veri oluşturmakta olduğu tarayıcı oturumlarında durumu koruyun.

Tarayıcı oturumlarında durumu korumak için, uygulamanın verileri tarayıcı belleğinden başka bir depolama konumuna kalıcı hale vermelidir. Durum kalıcılığı otomatik değildir. Durum bilgisi olan veri kalıcılığını uygulamak üzere uygulamayı geliştirirken adımları uygulamanız gerekir.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturma çabasında olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcı durum ticari etkinliklerdeki zaman veya yardımlarını kaydeder:

• Çok adımlı Web formları: bir kullanıcının, durumları kaybedilmişse, çok adımlı bir Web formunun birkaç tamamlanmış adımı için verileri yeniden girmesi zaman alır. Kullanıcı formdan ayrıldıklarında ve daha sonra geri dönüp Bu senaryodaki durumu kaybeder.
• Alışveriş sepetlerini: olası geliri temsil eden bir uygulamanın ticari olarak önemli bileşenleri korunabilir. Durumlarını kaybettikleri bir Kullanıcı ve bu nedenle alışveriş sepeti, siteye daha sonra geri döntiklerinde daha az ürün veya hizmet satın alabilir.

Uygulama, uygulama durumunu yalnızca kalıcı hale getirebilirler. Usıs, bileşen örnekleri ve bunların işleme ağaçları gibi kalıcı hale getirilir. Bileşenler ve işleme ağaçları genellikle seri hale getirilebilir değildir. Ağaç görünümü denetiminin genişletilmiş düğümleri gibi UI durumunu kalıcı hale getirmek için, uygulamanın kullanıcı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemek üzere özel kod kullanması gerekir.

Durumun nerede kalıcı olduğu

Kalıcı durum için genel konumlar mevcuttur:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolama
• Bellek içi durum kapsayıcısı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcı ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama bir Web API 'SI aracılığıyla erişilen bağımsız sunucu tarafı depolama kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolaması
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra, kullanıcının durumu korunur ve herhangi bir yeni tarayıcı oturumunda kullanılabilir.

Blazor WebAssemblyUygulamalar tamamen kullanıcının tarayıcısında çalıştığı için, depolama hizmetleri ve veritabanları gibi güvenli dış sistemlere erişmek için ek ölçüler gerektirir. Blazor WebAssembly uygulamalar, tek sayfalı uygulamalarla (maça 'Lar) aynı şekilde güvenli hale getirilir. genellikle, bir uygulama OAuth / openıd Bağlan (oıdc) aracılığıyla bir kullanıcının kimliğini doğrular ve ardından sunucu tarafı bir uygulamaya web apı çağrıları aracılığıyla depolama hizmetleri ve veritabanlarıyla etkileşime girer. Sunucu tarafı uygulama, Blazor WebAssembly uygulama ve depolama hizmeti ya da veritabanı arasında veri aktarımını gösterir. Sunucu tarafı uygulamasının Blazor WebAssembly depolamaya kalıcı bir bağlantısı olduğunda uygulama, sunucu tarafı uygulamasına kısa ömürlü bir bağlantı sağlar.

Daha fazla bilgi için aşağıdaki kaynaklara bakın:

• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly
• BlazorGüvenlik ve Identity makaleleri

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için, verileri URL 'nin bir parçası olarak modelleyin. URL 'de modellenen Kullanıcı durumu örnekleri şunları içerir:

• Görüntülenen varlığın KIMLIĞI.
• Disk belleğine alınmış bir kılavuzdaki geçerli sayfa numarası.

Kullanıcı sayfayı el ile yeniden yüklediğinde tarayıcının adres çubuğunun içeriği korunur.

Yönergeyle URL desenleri tanımlama hakkında bilgi için @page bkz ASP.NET Core Blazor Yönlendirme ..

Tarayıcı depolama

Kullanıcının etkin şekilde oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan bir depolama konumu tarayıcının localStorage ve sessionStorage koleksiyonlarıdır:

• localStorage tarayıcı penceresinin kapsamına alınır. Kullanıcı sayfayı yeniden yüklediğinde veya tarayıcıyı kapatıp yeniden açarsa durum devam ettirir. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler localStorage Açık olarak temizlenene kadar içinde devam ediyor.
• sessionStorage , tarayıcı sekmesinin kapsamına alınır. Kullanıcı sekmeyi yeniden yüklediğinde durum devam ettirir. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybedilir. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin kendi bağımsız bir veri sürümü vardır.

Genellikle, sessionStorage kullanmak daha güvenlidir. sessionStorage bir kullanıcının birden çok sekme açmasını ve aşağıdaki gibi karşılaştığı riskleri önler:

• Sekmelerde durum depolamadaki hatalar.
• Sekme diğer sekmelerin durumunun üzerine yazdığınızda kafa karıştırıcı davranışı.

localStorage uygulamanın kapatma ve tarayıcıyı yeniden açma genelinde durumu kalıcı hale getirilmesi gerekiyorsa, daha iyi bir seçenektir.

Bellek içi durum kapsayıcısı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Ek kaynaklar

• Bir kimlik doğrulama işleminden önce uygulama durumunu Kaydet
• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly

Blazor Server durum bilgisi olan bir uygulama çerçevesidir. Çoğu zaman, uygulama sunucusuyla bir bağlantı sağlar. Kullanıcının durumu, sunucu belleğinde bir devrende tutulur.

Bir devreye sahip kullanıcı durumu örnekleri şunları içerir:

• Oluşturulan kullanıcı arabirimindeki bileşen örneklerinin ve en son işleme çıktılarının hiyerarşisi.
• Bileşen örneklerinde alanların ve özelliklerin değerleri.
• Devre kapsamına alınan bağımlılık ekleme (dı) hizmet örneklerinde tutulan veriler.

Kullanıcı durumu, JavaScript birlikte çalışma çağrıları aracılığıyla tarayıcının bellek kümesindeki JavaScript değişkenlerinde de bulunabilir.

Bir Kullanıcı geçici bir ağ bağlantısı kaybıyla karşılaşıyorsa, Blazor özgün durumlarındaki kullanıcıyı özgün devresine yeniden bağlamaya çalışır. Ancak, bir kullanıcıyı sunucunun belleğindeki özgün devresine yeniden bağlamak her zaman mümkün değildir:

• Sunucu, bağlantısı kesilen bir devreni süresiz olarak sürdüremez. Sunucu, bir zaman aşımından sonra veya sunucu bellek baskısı altında olduğunda, bağlantısı kesilen bir bağlantı hattını serbest bırakmalıdır.
• Çok sunuculu, yük dengeli dağıtım ortamlarında, tek tek sunucular başarısız olabilir veya artık tüm istek hacminin işlenmesi gerekmiyorsa otomatik olarak kaldırılabilir. Kullanıcı yeniden bağlanmayı denediğinde, bir kullanıcı için özgün sunucu işleme istekleri kullanılamaz hale gelebilir.
• Kullanıcı tarayıcıyı kapatabilir ve yeniden açabilir veya sayfayı yeniden yükleyerek tarayıcı belleğinde tutulan tüm durumları kaldırır. Örneğin, JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanan JavaScript değişken değerleri kaybolur.

Kullanıcı özgün devresine yeniden bağlanalınmayacaksa, Kullanıcı boş duruma sahip yeni bir devre alır. Bu, bir masaüstü uygulamasını kapatıp yeniden açmaya eşdeğerdir.

Devreler arasında durumu kalıcı yap

Genellikle, kullanıcıların, zaten mevcut olan verileri okumadan değil, etkin bir şekilde veri oluşturmakta olduğu devrelerde durumu koruyun.

Uygulama, durumu devrelerde korumak için, verilerin sunucu belleğinden başka bir depolama konumuna kalıcı hale gelmelidir. Durum kalıcılığı otomatik değildir. Durum bilgisi olan veri kalıcılığını uygulamak üzere uygulamayı geliştirirken adımları uygulamanız gerekir.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturma çabasında olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcı durum ticari etkinliklerdeki zaman veya yardımlarını kaydeder:

• Çok adımlı Web formları: bir kullanıcının, durumları kaybedilmişse, çok adımlı bir Web formunun birkaç tamamlanmış adımı için verileri yeniden girmesi zaman alır. Kullanıcı formdan ayrıldıklarında ve daha sonra geri dönüp Bu senaryodaki durumu kaybeder.
• Alışveriş sepetlerini: olası geliri temsil eden bir uygulamanın ticari olarak önemli bileşenleri korunabilir. Durumlarını kaybettikleri bir Kullanıcı ve bu nedenle alışveriş sepeti, siteye daha sonra geri döntiklerinde daha az ürün veya hizmet satın alabilir.

Uygulama, uygulama durumunu yalnızca kalıcı hale getirebilirler. Usıs, bileşen örnekleri ve bunların işleme ağaçları gibi kalıcı hale getirilir. Bileşenler ve işleme ağaçları genellikle seri hale getirilebilir değildir. Ağaç görünümü denetiminin genişletilmiş düğümleri gibi UI durumunu kalıcı hale getirmek için, uygulamanın kullanıcı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemek üzere özel kod kullanması gerekir.

Durumun nerede kalıcı olduğu

Kalıcı durum için genel konumlar mevcuttur:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolama
• Bellek içi durum kapsayıcısı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcı ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama sunucu tarafı depolama kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolaması
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra, kullanıcının durumu korunur ve yeni bir devrede kullanılabilir.

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için, verileri URL 'nin bir parçası olarak modelleyin. URL 'de modellenen Kullanıcı durumu örnekleri şunları içerir:

• Görüntülenen varlığın KIMLIĞI.
• Disk belleğine alınmış bir kılavuzdaki geçerli sayfa numarası.

Tarayıcının adres çubuğunun içeriği korunur:

• Kullanıcı sayfayı el ile yeniden yükler.
• Web sunucusu kullanılamaz hale gelirse ve Kullanıcı farklı bir sunucuya bağlanmak için sayfayı yeniden yüklemeye zorlanır.

Yönergeyle URL desenleri tanımlama hakkında bilgi için @page bkz ASP.NET Core Blazor Yönlendirme ..

Tarayıcı depolama

Kullanıcının etkin şekilde oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan bir depolama konumu tarayıcının localStorage ve sessionStorage koleksiyonlarıdır:

• localStorage tarayıcı penceresinin kapsamına alınır. Kullanıcı sayfayı yeniden yüklediğinde veya tarayıcıyı kapatıp yeniden açarsa durum devam ettirir. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler localStorage Açık olarak temizlenene kadar içinde devam ediyor.
• sessionStorage , tarayıcı sekmesinin kapsamına alınır. Kullanıcı sekmeyi yeniden yüklediğinde durum devam ettirir. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybedilir. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin kendi bağımsız bir veri sürümü vardır.

Genellikle, sessionStorage kullanmak daha güvenlidir. sessionStorage bir kullanıcının birden çok sekme açmasını ve aşağıdaki gibi karşılaştığı riskleri önler:

• Sekmelerde durum depolamadaki hatalar.
• Sekme diğer sekmelerin durumunun üzerine yazdığınızda kafa karıştırıcı davranışı.

localStorage uygulamanın kapatma ve tarayıcıyı yeniden açma genelinde durumu kalıcı hale getirilmesi gerekiyorsa, daha iyi bir seçenektir.

Tarayıcı depolamayı kullanmaya yönelik uyarılar:

• Sunucu tarafı veritabanının kullanımına benzer şekilde veri yükleme ve kaydetme zaman uyumsuzdur.
• Sunucu tarafı veritabanının aksine, istenen sayfa prerendering aşamasında tarayıcıda bulunmadığından, depolama alanı prerendering sırasında kullanılamaz.
• birkaç kilobayt veri Depolama, uygulamalar için kalıcı hale getirilmesi mantıklıdır Blazor Server . Birkaç kilobayt dışında, veriler ağ üzerinden yüklenip kaydedildiğinden performans etkilerini göz önünde bulundurmanız gerekir.
• Kullanıcılar verileri görüntüleyebilir veya bunlarla karşılaşabilir. ASP.NET Core veri koruma riski azaltabilirler. örneğin, ASP.NET Core korumalı tarayıcı Depolama veri korumasını ASP.NET Core kullanır.

üçüncü taraf NuGet paketleri ve ile çalışmaya yönelik apı 'ler localStorage sağlar sessionStorage . ASP.NET Core veri korumasınısaydam olarak kullanan bir paket seçmeyi düşünülüyor. Veri koruma, depolanan verileri şifreler ve depolanan verilerle yapılan değişikliklere karşı olası riski azaltır. JSON seri hale getirilmiş veriler düz metin halinde depolanıyorsa, kullanıcılar tarayıcı geliştirici araçlarını kullanarak verileri görebilir ve depolanan verileri de değiştirebilir. Verilerin güvenliğini sağlamak her zaman bir sorun değildir çünkü veriler önemsiz olarak olabilir. Örneğin, bir kullanıcı ARABIRIMI öğesinin saklı rengini okumak veya değiştirmek, Kullanıcı veya kuruluş için önemli bir güvenlik riski değildir. Kullanıcıların hassas verileri incelemesine veya değiştirmesine izin vermeyi önleyin.

ASP.NET Core korumalı tarayıcı Depolama

ASP.NET Core korumalı tarayıcı Depolama ve için veri koruma ASP.NET Core yararlanır localStorage sessionStorage .

Bir bileşen içindeki verileri kaydetme ve yükleme

Tarayıcı depolamaya veri yüklemeyi veya kaydetmeyi gerektiren herhangi bir bileşende, @inject aşağıdakilerden birini bir örnek eklemek için yönergesini kullanın:

• ProtectedLocalStorage
• ProtectedSessionStorage

Seçim, hangi tarayıcı depolama konumuna kullanmak istediğinize bağlıdır. Aşağıdaki örnekte, sessionStorage kullanılır:

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@usingYönergesi _Imports.razor bileşen yerine uygulamanın dosyasına yerleştirilebilir. _Imports.razorDosya kullanımı, ad alanını uygulamanın daha büyük kesimlerine veya uygulamanın tamamına kullanılabilir hale getirir.

currentCount Counter Blazor Server Proje şablonunutemel alan bir uygulamanın bileşenindeki değeri kalıcı hale getirmek için, IncrementCount kullanmak üzere yöntemi değiştirin ProtectedSessionStore.SetAsync :

private async Task IncrementCount()
{
    currentCount++;
    await ProtectedSessionStore.SetAsync("count", currentCount);
}

Daha büyük, daha gerçekçi uygulamalar, tek tek alanların depolanması ise olası bir senaryodur. Uygulamaların karmaşık durum içeren model nesnelerinin tamamını depolama olasılığı daha fazladır. ProtectedSessionStore karmaşık durum nesnelerini depolamak için JSON verilerini otomatik olarak seri hale getirer ve seri durumdan oluşturur.

Yukarıdaki kod örneğinde currentCount veriler kullanıcının sessionStorage['count'] tarayıcısında olduğu gibi depolanır. Veriler düz metin olarak depolanmış değil, veri koruma ASP.NET Core korunur. Şifrelenmiş veriler tarayıcının geliştirici sessionStorage['count'] konsolunda değerlendirilirse inceleyebilirsiniz.

Kullanıcı daha sonra bileşene geri döndüğünde, kullanıcı yeni bir bağlantı hattında ise dahil olmak currentCount üzere verileri kurtarmak için Counter ProtectedSessionStore.GetAsync kullanın:

protected override async Task OnInitializedAsync()
{
    var result = await ProtectedSessionStore.GetAsync<int>("count");
    currentCount = result.Success ? result.Value : 0;
}

Bileşenin parametreleri gezinti durumunu içerirse, çağrısında ve içinde olmayan bir ProtectedSessionStore.GetAsync null sonuç atarak , OnParametersSetAsync OnInitializedAsync değil. OnInitializedAsync bileşen ilk kez örneği çağrıldıktan sonra yalnızca bir kez çağrılır. OnInitializedAsync kullanıcı aynı sayfadayken farklı bir URL'ye gitse daha sonra yeniden çağrılmayacaktır. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Yükleme durumunu işleme

Tarayıcı depolama alanına bir ağ bağlantısı üzerinden zaman uyumsuz olarak erişilir, verilerin bir bileşen tarafından yüklenmeden ve kullanılabilir olmadan önce her zaman bir süre vardır. En iyi sonuçlar için, boş veya varsayılan veriler görüntülemek yerine yükleme devam ederken bir yükleme durumu iletisi işleniyor.

Yaklaşımlardan biri, verilerin olup olmadığını null izlemektir. Bu da verilerin hala yükleniyor olduğu anlamına gelir. Varsayılan Counter bileşende, sayı bir içinde int tutulacak. türüne currentCount ( ) bir soru işareti ekleyerek ? null değere değiştirilebilir hale int geldi:

private int? currentCount;

Sayı ve düğmeyi koşulsuz olarak görüntülemek yerine, yalnızca veriler denetlenerek yüklendiğinde Increment bu öğeleri HasValue görüntüler:

@if (currentCount.HasValue)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

Ön işlemeyi işleme

İlke sırasında:

• Kullanıcının tarayıcısına etkileşimli bir bağlantı yok.
• Tarayıcıda henüz JavaScript kodu çalıştıracak bir sayfa yok.

localStorage``sessionStorageveya , ön iş sırasında kullanılamaz. Bileşen depolama alanıyla etkileşime geçmeyi denerse, bileşenin önceden oluşturulmuş olması nedeniyle JavaScript birlikte çalışma çağrılarının verilenenemlerini açıklayan bir hata oluşturulur.

Hatayı çözmenin bir yolu, önceden inceleyi devre dışı bırakmakdır. Uygulama, tarayıcı tabanlı depolamayı yoğun olarak kullanıyorsa bu genellikle en iyi seçenektir. Öncedenendering karmaşıklık ekler ve uygulama kullanılabilir olana kadar veya kullanılabilir olana kadar herhangi bir yararlı içeriği önceden işleyene localStorage bir sessionStorage avantaja sahip olamayabilecektir.

Ön iş açmayı devre dışı bırakmak için dosyasını açın ve Bileşen Etiketi Pages/_Host.cshtml render-mode Yardımcı'nın özniteliğini olarak değiştirebilirsiniz: Server

<component type="typeof(App)" render-mode="Server" />

Öncedenendering, veya kullanmayan diğer sayfalar için yararlı localStorage sessionStorage olabilir. Ön hataya neden olan işlemi korumak için tarayıcı bağlantı hattına bağlanana kadar yükleme işlemi ertelen. Aşağıda, bir sayaç değerini depolamaya bir örnek ve ardından ve ardından bir sayaç değeri ve daha sonra bir sayaç değeri depolanmasına örnek ve ardından ve bir sayaç değeri ve daha sonra bir sayaç değeri

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage ProtectedLocalStore

@if (isConnected)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

@code {
    private int currentCount;
    private bool isConnected;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isConnected = true;
            await LoadStateAsync();
            StateHasChanged();
        }
    }

    private async Task LoadStateAsync()
    {
        var result = await ProtectedLocalStore.GetAsync<int>("count");
        currentCount = result.Success ? result.Value : 0;
    }

    private async Task IncrementCount()
    {
        currentCount++;
        await ProtectedLocalStore.SetAsync("count", currentCount);
    }
}

Durum korumayı ortak bir konuma göre çarpanlara çıkar

Birçok bileşen tarayıcı tabanlı depolamaya bağlı ise, durum sağlayıcısı kodunun birçok kez yeniden uygulanması kod yinelemesi oluşturur. Kod yinelemeden kaçınmanın bir seçeneği, durum sağlayıcısı mantığını kapsüller bir durum sağlayıcısı üst bileşeni oluşturmaktır. Alt bileşenler, durum kalıcılığı mekanizmasına bakılmaksızın kalıcı verilerle birlikte çalışabilirsiniz.

Aşağıdaki bileşen CounterStateProvider örneğinde, sayaç verileri içinde kalıcıdır: sessionStorage

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@if (isLoaded)
{
    <CascadingValue Value="@this">
        @ChildContent
    </CascadingValue>
}
else
{
    <p>Loading...</p>
}

@code {
    private bool isLoaded;

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

    public int CurrentCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var result = await ProtectedSessionStore.GetAsync<int>("count");
        CurrentCount = result.Success ? result.Value : 0;
        isLoaded = true;
    }

    public async Task SaveChangesAsync()
    {
        await ProtectedSessionStore.SetAsync("count", CurrentCount);
    }
}

Bileşen, CounterStateProvider yükleme işlemi tamamlayana kadar alt içeriğini işlemeden yükleme aşamasını işlemez.

Bileşeni kullanmak CounterStateProvider için, bileşenin bir örneğini sayaç durumuna erişmesi gereken diğer herhangi bir bileşenin çevresinde sarman. Durumu bir uygulamanın tüm bileşenleri için erişilebilir yapmak için bileşeni bileşenin () çevresinde CounterStateProvider Router App App.razor sarman:

<CounterStateProvider>
    <Router AppAssembly="@typeof(Program).Assembly">
        ...
    </Router>
</CounterStateProvider>

Sarmalanmış bileşenler kalıcı sayaç durumunu alır ve değiştirebilir. Aşağıdaki Counter bileşen deseni uygulamaya almaktadır:

@page "/counter"

<p>Current count: <strong>@CounterStateProvider.CurrentCount</strong></p>
<button @onclick="IncrementCount">Increment</button>

@code {
    [CascadingParameter]
    private CounterStateProvider CounterStateProvider { get; set; }

    private async Task IncrementCount()
    {
        CounterStateProvider.CurrentCount++;
        await CounterStateProvider.SaveChangesAsync();
    }
}

Yukarıdaki bileşenin ile etkileşimde bulunmak için gerekli değildir ProtectedBrowserStorage ve "yükleme" aşamasıyla da ilgilenmektedir.

Daha önce açıklandığı gibi, öncedenendering ile başa olmak için, sayaç verilerini tüketen tüm bileşenlerin otomatik olarak prerendering ile çalışması CounterStateProvider için düzeltebilirsiniz. Daha fazla bilgi için Ön işleme işleme bölümüne bakın.

Genel olarak, durum sağlayıcısı üst bileşen deseni önerilir:

• Durumu birçok bileşen arasında tüketmek için.
• Kalıcı olacak yalnızca bir üst düzey durum nesnesi varsa.

Birçok farklı durum nesnelerini kalıcı yapmak ve nesnelerin farklı alt kümelerini farklı yerlerde tüketmek için, durumu genel olarak kalıcı olarak önlemek daha iyidir.

Bellek içinde durum kapsayıcı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Bir uygulamada oluşturulan Blazor WebAssembly kullanıcı durumu, tarayıcının belleğinde tutulacak.

Tarayıcı belleğinde tutulan kullanıcı durumu örnekleri şunlardır:

• Bileşen örneklerinin hiyerarşisi ve işlenmiş kullanıcı arabiriminde en son işleme çıktıları.
• Bileşen örneklerde alanların ve özelliklerin değerleri.
• Bağımlılık ekleme (DI) hizmet örneklerde tutulan veriler.
• JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanmış değerler.

Bir kullanıcı tarayıcıyı kapatıp yeniden açtığında veya sayfayı yeniden yükleyene zaman, tarayıcının belleğinde tutulan kullanıcı durumu kaybolur.

Durumu tarayıcı oturumları arasında kalıcı olarak kullanma

Genel olarak, kullanıcıların etkin olarak veri oluşturdukları tarayıcı oturumları arasında durumu sürdürün; yalnızca mevcut olan verileri okumaz.

Tarayıcı oturumlarında durumu korumak için, uygulamanın verileri tarayıcının belleğinden başka bir depolama konumda kalıcı olması gerekir. Durum kalıcılığı otomatik değil. Durum bilgili veri kalıcılığı uygulamak için uygulamayı geliştirme adımlarını atabilirsiniz.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturmak için çaba harcamış olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcılık durumu zaman kazandırır veya ticari etkinliklere yardımcı olur:

• Çok adımlı web formları: Bir kullanıcının durumu kaybolursa çok adımlı bir web formunun tamamlanmış birkaç adımı için verileri yeniden girmek zaman alır. Kullanıcı forma dönüp daha sonra geri dönerse bu senaryoda durumu kaybeder.
• Alışveriş sepetleri: Bir uygulamanın potansiyel geliri temsil eden ticari olarak önemli bileşenleri korunabilirsiniz. Durumunu ve dolayısıyla alışveriş sepetini kaybeden bir kullanıcı, siteye daha sonra geri dönerek daha az ürün veya hizmet satın almalarına neden olabilir.

Bir uygulama yalnızca uygulama durumunu kalıcı olarak kalıcı olarak bulundurabilirsiniz. Bileşen örnekleri ve bunların işleme ağaçları gibi UI'ler kalıcı olarak tutulamaz. Bileşenler ve işleme ağaçları genellikle serileştirilebilir değildir. Ağaç görünümü denetimi genişletilmiş düğümleri gibi kullanıcı arabirimi durumunu kalıcı hale getirmesi için, uygulamanın özel kod kullanarak KULLANıCı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemesi gerekir.

Durum nerede kalıcıdır?

Kalıcı durum için ortak konumlar vardır:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolaması
• Bellek içinde durum kapsayıcı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcıya ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama bir web API'si aracılığıyla erişilen bağımsız sunucu tarafı depolamayı kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolama
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra kullanıcının durumu yeni bir tarayıcı oturumunda korunur ve kullanılabilir.

Uygulamalar Blazor WebAssembly tamamen kullanıcının tarayıcısında çalıştırıldıklarına göre, depolama hizmetleri ve veritabanları gibi güvenli dış sistemlere erişmek için ek ölçüler gerektirir. Blazor WebAssembly uygulamaları, Tek Sayfalı Uygulamalar (SPA) ile aynı şekilde güvenli hale getirildi. Genellikle, bir uygulama OAuthOpenID Bağlan / (OIDC) aracılığıyla kullanıcının kimliğini doğrular ve ardından sunucu tarafı uygulamaya yapılan web API çağrıları aracılığıyla depolama hizmetleri ve veritabanlarıyla etkileşime geçer. Sunucu tarafı uygulaması, uygulama ile depolama hizmeti veya veritabanı Blazor WebAssembly arasında veri aktarımına ara verir. Uygulama, sunucu tarafı uygulamayla kısa ömürlü bir bağlantı sürdürürken, sunucu tarafı uygulamanın depolamaya Blazor WebAssembly kalıcı bir bağlantısı vardır.

Daha fazla bilgi için aşağıdaki kaynaklara bakın:

• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly
• BlazorGüvenlik Identity ve Makaleler

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure Veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için, verileri URL 'nin bir parçası olarak modelleyin. URL 'de modellenen Kullanıcı durumu örnekleri şunları içerir:

• Görüntülenen varlığın KIMLIĞI.
• Disk belleğine alınmış bir kılavuzdaki geçerli sayfa numarası.

Kullanıcı sayfayı el ile yeniden yüklediğinde tarayıcının adres çubuğunun içeriği korunur.

Yönergeyle URL desenleri tanımlama hakkında bilgi için @page bkz ASP.NET Core Blazor Yönlendirme ..

Tarayıcı depolama

Kullanıcının etkin şekilde oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan bir depolama konumu tarayıcının localStorage ve sessionStorage koleksiyonlarıdır:

• localStorage tarayıcı penceresinin kapsamına alınır. Kullanıcı sayfayı yeniden yüklediğinde veya tarayıcıyı kapatıp yeniden açarsa durum devam ettirir. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler localStorage Açık olarak temizlenene kadar içinde devam ediyor.
• sessionStorage , tarayıcı sekmesinin kapsamına alınır. Kullanıcı sekmeyi yeniden yüklediğinde durum devam ettirir. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybedilir. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin kendi bağımsız bir veri sürümü vardır.

Genellikle, sessionStorage kullanmak daha güvenlidir. sessionStorage bir kullanıcının birden çok sekme açmasını ve aşağıdaki gibi karşılaştığı riskleri önler:

• Sekmelerde durum depolamadaki hatalar.
• Sekme diğer sekmelerin durumunun üzerine yazdığınızda kafa karıştırıcı davranışı.

localStorage uygulamanın kapatma ve tarayıcıyı yeniden açma genelinde durumu kalıcı hale getirilmesi gerekiyorsa, daha iyi bir seçenektir.

Bellek içi durum kapsayıcısı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Ek kaynaklar

• Bir kimlik doğrulama işleminden önce uygulama durumunu Kaydet
• ASP.NET Core uygulamasında bir web apı 'si çağırma Blazor
• Güvenli ASP.NET Core Blazor WebAssembly

Blazor Server durum bilgisi olan bir uygulama çerçevesidir. Çoğu zaman, uygulama sunucusuyla bir bağlantı sağlar. Kullanıcının durumu, sunucu belleğinde bir devrende tutulur.

Bir devreye sahip kullanıcı durumu örnekleri şunları içerir:

• Oluşturulan kullanıcı arabirimindeki bileşen örneklerinin ve en son işleme çıktılarının hiyerarşisi.
• Bileşen örneklerinde alanların ve özelliklerin değerleri.
• Devre kapsamına alınan bağımlılık ekleme (dı) hizmet örneklerinde tutulan veriler.

Kullanıcı durumu, JavaScript birlikte çalışma çağrıları aracılığıyla tarayıcının bellek kümesindeki JavaScript değişkenlerinde de bulunabilir.

Bir Kullanıcı geçici bir ağ bağlantısı kaybıyla karşılaşıyorsa, Blazor özgün durumlarındaki kullanıcıyı özgün devresine yeniden bağlamaya çalışır. Ancak, bir kullanıcıyı sunucunun belleğindeki özgün devresine yeniden bağlamak her zaman mümkün değildir:

• Sunucu, bağlantısı kesilen bir devreni süresiz olarak sürdüremez. Sunucu, bir zaman aşımından sonra veya sunucu bellek baskısı altında olduğunda, bağlantısı kesilen bir bağlantı hattını serbest bırakmalıdır.
• Çok sunuculu, yük dengeli dağıtım ortamlarında, tek tek sunucular başarısız olabilir veya artık tüm istek hacminin işlenmesi gerekmiyorsa otomatik olarak kaldırılabilir. Kullanıcı yeniden bağlanmayı denediğinde, bir kullanıcı için özgün sunucu işleme istekleri kullanılamaz hale gelebilir.
• Kullanıcı tarayıcıyı kapatabilir ve yeniden açabilir veya sayfayı yeniden yükleyerek tarayıcı belleğinde tutulan tüm durumları kaldırır. Örneğin, JavaScript birlikte çalışma çağrıları aracılığıyla ayarlanan JavaScript değişken değerleri kaybolur.

Kullanıcı özgün devresine yeniden bağlanalınmayacaksa, Kullanıcı boş duruma sahip yeni bir devre alır. Bu, bir masaüstü uygulamasını kapatıp yeniden açmaya eşdeğerdir.

Devreler arasında durumu kalıcı yap

Genellikle, kullanıcıların, zaten mevcut olan verileri okumadan değil, etkin bir şekilde veri oluşturmakta olduğu devrelerde durumu koruyun.

Uygulama, durumu devrelerde korumak için, verilerin sunucu belleğinden başka bir depolama konumuna kalıcı hale gelmelidir. Durum kalıcılığı otomatik değildir. Durum bilgisi olan veri kalıcılığını uygulamak üzere uygulamayı geliştirirken adımları uygulamanız gerekir.

Veri kalıcılığı genellikle yalnızca kullanıcıların oluşturma çabasında olduğu yüksek değerli durum için gereklidir. Aşağıdaki örneklerde, kalıcı durum ticari etkinliklerdeki zaman veya yardımlarını kaydeder:

• Çok adımlı Web formları: bir kullanıcının, durumları kaybedilmişse, çok adımlı bir Web formunun birkaç tamamlanmış adımı için verileri yeniden girmesi zaman alır. Kullanıcı formdan ayrıldıklarında ve daha sonra geri dönüp Bu senaryodaki durumu kaybeder.
• Alışveriş sepetlerini: olası geliri temsil eden bir uygulamanın ticari olarak önemli bileşenleri korunabilir. Durumlarını kaybettikleri bir Kullanıcı ve bu nedenle alışveriş sepeti, siteye daha sonra geri döntiklerinde daha az ürün veya hizmet satın alabilir.

Uygulama, uygulama durumunu yalnızca kalıcı hale getirebilirler. Usıs, bileşen örnekleri ve bunların işleme ağaçları gibi kalıcı hale getirilir. Bileşenler ve işleme ağaçları genellikle seri hale getirilebilir değildir. Ağaç görünümü denetiminin genişletilmiş düğümleri gibi UI durumunu kalıcı hale getirmek için, uygulamanın kullanıcı arabirimi durumunun davranışını seri hale getirilebilir uygulama durumu olarak modellemek üzere özel kod kullanması gerekir.

Durumun nerede kalıcı olduğu

Kalıcı durum için genel konumlar mevcuttur:

• Sunucu tarafı depolama
• URL
• Tarayıcı depolama
• Bellek içi durum kapsayıcısı hizmeti

Sunucu tarafı depolama

Birden çok kullanıcı ve cihaza yayılan kalıcı veri kalıcılığı için, uygulama sunucu tarafı depolama kullanabilir. Seçeneklere şunlar dahildir:

• Blob depolama
• Anahtar-değer depolaması
• İlişkisel veritabanı
• Tablo depolama

Veriler kaydedildikten sonra, kullanıcının durumu korunur ve yeni bir devrede kullanılabilir.

Azure veri depolama seçenekleri hakkında daha fazla bilgi için aşağıdakilere bakın:

• Azure veritabanları
• Azure Depolama Belgeleri

URL

Gezinti durumunu temsil eden geçici veriler için, verileri URL 'nin bir parçası olarak modelleyin. URL 'de modellenen Kullanıcı durumu örnekleri şunları içerir:

• Görüntülenen varlığın KIMLIĞI.
• Disk belleğine alınmış bir kılavuzdaki geçerli sayfa numarası.

Tarayıcının adres çubuğunun içeriği korunur:

• Kullanıcı sayfayı el ile yeniden yükler.
• Web sunucusu kullanılamaz hale gelirse ve Kullanıcı farklı bir sunucuya bağlanmak için sayfayı yeniden yüklemeye zorlanır.

Yönergeyle URL desenleri tanımlama hakkında bilgi için @page bkz ASP.NET Core Blazor Yönlendirme ..

Tarayıcı depolama

Kullanıcının etkin şekilde oluşturmakta olduğu geçici veriler için, yaygın olarak kullanılan bir depolama konumu tarayıcının localStorage ve sessionStorage koleksiyonlarıdır:

• localStorage tarayıcı penceresinin kapsamına alınır. Kullanıcı sayfayı yeniden yüklediğinde veya tarayıcıyı kapatıp yeniden açarsa durum devam ettirir. Kullanıcı birden çok tarayıcı sekmesi açarsa, durum sekmeler arasında paylaşılır. Veriler localStorage Açık olarak temizlenene kadar içinde devam ediyor.
• sessionStorage , tarayıcı sekmesinin kapsamına alınır. Kullanıcı sekmeyi yeniden yüklediğinde durum devam ettirir. Kullanıcı sekmeyi veya tarayıcıyı kapatırsa durum kaybedilir. Kullanıcı birden çok tarayıcı sekmesi açarsa, her sekmenin kendi bağımsız bir veri sürümü vardır.

Genellikle, sessionStorage kullanmak daha güvenlidir. sessionStorage bir kullanıcının birden çok sekme açmasını ve aşağıdaki gibi karşılaştığı riskleri önler:

• Sekmelerde durum depolamadaki hatalar.
• Sekme diğer sekmelerin durumunun üzerine yazdığınızda kafa karıştırıcı davranışı.

localStorage uygulamanın kapatma ve tarayıcıyı yeniden açma genelinde durumu kalıcı hale getirilmesi gerekiyorsa, daha iyi bir seçenektir.

Tarayıcı depolamayı kullanmaya yönelik uyarılar:

• Sunucu tarafı veritabanının kullanımına benzer şekilde veri yükleme ve kaydetme zaman uyumsuzdur.
• Sunucu tarafı veritabanından farklı olarak, istenen sayfa, ön iş oluşturma aşamasında tarayıcıda mevcut olduğundan, önceden oluşturma sırasında depolama kullanılamaz.
• Depolama kilobaytlarca verinin uygulamalar için kalıcı olduğu Blazor Server kabul edilebilir. Veriler ağ üzerinden yükleniyor ve kaydedi olduğundan, birkaç kilobayt'ın ötesinde performans etkilerini göz önünde bulundurabilirsiniz.
• Kullanıcılar verileri görüntüleme veya üzerinde oynayabilirsiniz. ASP.NET Core Koruma, riski azaltabilirsiniz. Örneğin, ASP.NET Core Tarayıcı Depolama Veri Koruması ASP.NET Core kullanır.

Üçüncü taraf NuGet paketleri ve ile çalışmak için API'ler localStorage sessionStorage sağlar. Veri Koruması'nın saydam bir şekilde kullandığı bir paket ASP.NET Core göz önünde bulundurabilirsiniz. Data Protection, depolanan verileri şifreler ve depolanan verilerle oynanma riskini azaltır. JSON serileştirilmiş verileri düz metin halinde depolanıyorsa, kullanıcılar tarayıcı geliştirici araçlarını kullanarak verileri görebilir ve depolanan verileri değiştirebilir. Verilerin güvenliğini sağlamak her zaman sorun değildir çünkü veriler doğası gereği önemsiz olabilir. Örneğin, kullanıcı arabirimi öğesinin depolanan rengini okumak veya değiştirmek, kullanıcı veya kuruluş için önemli bir güvenlik riski oluşturmaz. Kullanıcıların hassas verileri incelemelerine veya üzerinde oynamalarına izin verme.

Protected Browser Depolama deneysel NuGet paketi

ASP.NET Core Protected Browser Depolama ve için ASP.NET Core Korumadan localStorage sessionStorage yararlanıyor.

Yapılandırma

1. için bir paket başvurusu Microsoft.AspNetCore.ProtectedBrowserStorage ekleyin.

2. dosyasına, Pages/_Host.cshtml kapanış etiketinin içine aşağıdaki betiği </body> ekleyin:

   <script src="_content/Microsoft.AspNetCore.ProtectedBrowserStorage/protectedBrowserStorage.js"></script>
   

3. içinde, Startup.ConfigureServices hizmet AddProtectedBrowserStorage localStorage koleksiyonuna sessionStorage ve hizmetleri eklemek için çağrısı ekleyin:

   services.AddProtectedBrowserStorage();
   

Bir bileşen içinde verileri kaydetme ve yükleme

Tarayıcı depolama alanına veri yükleme veya kaydetme gerektiren herhangi bir bileşende, aşağıdakilerden herhangi @inject birini örneği ekleme yönergesini kullanın:

• ProtectedLocalStorage
• ProtectedSessionStorage

Bu seçenek, hangi tarayıcı depolama konumunu kullanmak istediğinize bağlıdır. Aşağıdaki örnekte sessionStorage kullanılmıştır:

@using Microsoft.AspNetCore.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@usingdeyimi, bileşeni yerine _Imports.razor bir dosyaya yer olabilir. Dosyanın _Imports.razor kullanımı, ad alanını uygulamanın daha büyük segmentleri veya uygulamanın tamamı için kullanılabilir yapar.

Proje şablonunu currentCount temel alarak bir uygulamanın bileşeninde değerini kalıcı Counter yapmak Blazor Server içinyöntemini kullanarak IncrementCount ProtectedSessionStore.SetAsync değiştirme:

private async Task IncrementCount()
{
    currentCount++;
    await ProtectedSessionStore.SetAsync("count", currentCount);
}

Daha büyük ve daha gerçekçi uygulamalarda tek tek alanların depolanması olası bir senaryodur. Uygulamaların karmaşık durum içeren model nesnelerinin tamamını depolama olasılığı daha fazladır. ProtectedSessionStore JSON verilerini otomatik olarak seri hale getirer ve seri halinden eder.

Yukarıdaki kod örneğinde currentCount veriler kullanıcının sessionStorage['count'] tarayıcısında olduğu gibi depolanır. Veriler düz metin olarak depolanmış değil, veri koruma ASP.NET Core korunur. Şifrelenmiş veriler tarayıcının geliştirici sessionStorage['count'] konsolunda değerlendirilirse inceleyebilirsiniz.

Kullanıcı tamamen yeni bir bağlantı hattında olduğu gibi daha sonra bileşene geri döndüğünde verileri currentCount Counter kurtarmak için ProtectedSessionStore.GetAsync kullanın:

protected override async Task OnInitializedAsync()
{
    currentCount = await ProtectedSessionStore.GetAsync<int>("count");
}

Bileşenin parametreleri gezinti durumunu içerirse, çağrısında ProtectedSessionStore.GetAsync bulundurarak sonucu içinde değil OnParametersSetAsync olarak attayabilirsiniz. OnInitializedAsync OnInitializedAsync bileşen ilk kez örneği çağrıldıktan sonra yalnızca bir kez çağrılır. OnInitializedAsync kullanıcı aynı sayfadayken farklı bir URL'ye gitse daha sonra yeniden çağrılmayacaktır. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.

Yükleme durumunu işleme

Tarayıcı depolama alanına bir ağ bağlantısı üzerinden zaman uyumsuz olarak erişilir, verilerin bir bileşen tarafından yüklenmeden ve kullanılabilir olmadan önce her zaman bir süre vardır. En iyi sonuçlar için, boş veya varsayılan veriler görüntülemek yerine yükleme devam ederken bir yükleme durumu iletisi işleniyor.

Yaklaşımlardan biri, verilerin olup olmadığını null izlemektir. Bu da verilerin hala yükleniyor olduğu anlamına gelir. Varsayılan Counter bileşende, sayı bir içinde int tutulacak. türüne currentCount ( ) soru işareti ekleyerek ? null değere değiştirilebilir hale int geldi:

private int? currentCount;

Sayı ve düğmeyi koşulsuz olarak görüntülemek Increment yerine, yalnızca veriler yüklendiğinde bu öğeleri görüntülemeyi seçin:

@if (currentCount.HasValue)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

Ön işlemeyi işleme

İlke sırasında:

• Kullanıcının tarayıcısına etkileşimli bir bağlantı yoktur.
• Tarayıcıda henüz JavaScript kodu çalıştıracak bir sayfa yok.

localStorage``sessionStorageveya önceden işleyici sırasında kullanılamaz. Bileşen depolama alanıyla etkileşime geçmeyi denerse, bileşenin önceden oluşturulmuş olması nedeniyle JavaScript birlikte çalışma çağrılarının verilenenemlerini açıklayan bir hata oluşturulur.

Hatayı çözmenin bir yolu, önceden inceleyi devre dışı bırakmakdır. Uygulama, tarayıcı tabanlı depolamayı yoğun olarak kullanıyorsa bu genellikle en iyi seçenektir. Öncedenendering karmaşıklık ekler ve uygulama kullanılabilir olana kadar veya kullanılabilir olana kadar herhangi bir yararlı içeriği önceden işleyene localStorage bir sessionStorage avantaja sahip olamayabilecektir.

Ön iş açmayı devre dışı bırakmak için dosyasını Pages/_Host.cshtml açın ve Bileşen Etiketi render-mode Yardımcı'nın özniteliğini olarak değiştirebilirsiniz: Server

<component type="typeof(App)" render-mode="Server" />

Öncedenendering, veya kullanmayan diğer sayfalar için yararlı localStorage sessionStorage olabilir. Ön hataya neden olan işlemi korumak için tarayıcı bağlantı hattına bağlanana kadar yükleme işlemi ertelen. Aşağıda, bir sayaç değerini depolamaya bir örnek ve ardından ve bir sayaç değeri ve daha sonra bir sayaç değeri depolanmasına örnek ve bir örnek ve ardından ve bir sayaç değerinin depolanmasına

@using Microsoft.AspNetCore.ProtectedBrowserStorage
@inject ProtectedLocalStorage ProtectedLocalStore

@if (isConnected)
{
    <p>Current count: <strong>@currentCount</strong></p>
    <button @onclick="IncrementCount">Increment</button>
}
else
{
    <p>Loading...</p>
}

@code {
    private int? currentCount;
    private bool isConnected = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isConnected = true;
            await LoadStateAsync();
            StateHasChanged();
        }
    }

    private async Task LoadStateAsync()
    {
        currentCount = await ProtectedLocalStore.GetAsync<int>("count");
    }

    private async Task IncrementCount()
    {
        currentCount++;
        await ProtectedLocalStore.SetAsync("count", currentCount);
    }
}

Durum korumayı ortak bir konuma göre çarpanlara çıkar

Birçok bileşen tarayıcı tabanlı depolamayı kullanırsa, durum sağlayıcısı kodunun birçok kez yeniden uygulanması kod yinelemesi oluşturur. Kod yinelemeden kaçınmanın bir seçeneği, durum sağlayıcısı mantığını kapsüller bir durum sağlayıcısı üst bileşeni oluşturmaktır. Alt bileşenler, durum kalıcılığı mekanizmasına bakılmaksızın kalıcı verilerle birlikte çalışabilirsiniz.

Aşağıdaki bileşen örneğinde CounterStateProvider sayaç verileri içinde kalıcıdır: sessionStorage

@using Microsoft.AspNetCore.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@if (isLoaded)
{
    <CascadingValue Value="@this">
        @ChildContent
    </CascadingValue>
}
else
{
    <p>Loading...</p>
}

@code {
    private bool isLoaded;

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

    public int CurrentCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        CurrentCount = await ProtectedSessionStore.GetAsync<int>("count");
        isLoaded = true;
    }

    public async Task SaveChangesAsync()
    {
        await ProtectedSessionStore.SetAsync("count", CurrentCount);
    }
}

Bileşen, CounterStateProvider yükleme işlemi tamamlayana kadar alt içeriğini işlemeden yükleme aşamasını işlemez.

Bileşeni kullanmak CounterStateProvider için, bileşenin bir örneğini sayaç durumuna erişmesi gereken diğer herhangi bir bileşenin çevresinde sarman. Durumu bir uygulamanın tüm bileşenleri için erişilebilir yapmak için bileşeni bileşenin () çevresinde CounterStateProvider Router App App.razor sarman:

<CounterStateProvider>
    <Router AppAssembly="@typeof(Program).Assembly">
        ...
    </Router>
</CounterStateProvider>

Sarmalanmış bileşenler kalıcı sayaç durumunu alır ve değiştirebilir. Aşağıdaki Counter bileşen deseni uygulamaya almaktadır:

@page "/counter"

<p>Current count: <strong>@CounterStateProvider.CurrentCount</strong></p>
<button @onclick="IncrementCount">Increment</button>

@code {
    [CascadingParameter]
    private CounterStateProvider CounterStateProvider { get; set; }

    private async Task IncrementCount()
    {
        CounterStateProvider.CurrentCount++;
        await CounterStateProvider.SaveChangesAsync();
    }
}

Yukarıdaki bileşenin ile etkileşimde bulunmak için gerekli değildir ProtectedBrowserStorage ve "yükleme" aşamasıyla da ilgilenmektedir.

Daha önce açıklandığı gibi, öncedenendering ile başa olmak için, sayaç verilerini tüketen tüm bileşenlerin otomatik olarak ön incelemesi CounterStateProvider ile çalışacak şekilde düzeltebilirsiniz. Daha fazla bilgi için Ön işleme işleme bölümüne bakın.

Genel olarak, durum sağlayıcısı üst bileşen deseni önerilir:

• Durumu birçok bileşen arasında tüketmek için.
• Kalıcı olacak yalnızca bir üst düzey durum nesnesi varsa.

Birçok farklı durum nesnelerini kalıcı yapmak ve nesnelerin farklı alt kümelerini farklı yerlerde tüketmek için, durumu genel olarak kalıcı olarak önlemek daha iyidir.

Bellek içinde durum kapsayıcı hizmeti

İç içe bileşenler genellikle içinde açıklandığı gibi zincirleme bağlama kullanarak verileri BlazorASP.NET Core veri bağlama bağlar. İç içe ve iç içe geçmiş bileşenler, kayıtlı bir bellek içinde durum kapsayıcısı kullanarak verilere erişimi paylaşabilir. Özel durum kapsayıcısı sınıfı, uygulamanın farklı kısımlarında durum Action değişikliklerini bildirmek için atanabilir kullanabilir. Aşağıdaki örnekte:

• Bir bileşen çifti, bir özelliği izlemek için durum kapsayıcısı kullanır.
• Aşağıdaki örnekte yer alan bileşenlerden biri diğer bileşende iç içe geçmiştir ancak bu yaklaşımın çalışması için iç içe yerleştirme gerekli değildir.

StateContainer.cs:

using System;

public class StateContainer
{
    private string savedString;

    public string Property
    {
        get => savedString;
        set
        {
            savedString = value;
            NotifyStateChanged();
        }
    }

    public event Action OnChange;

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In Program.cs ( Blazor WebAssembly ):

builder.Services.AddSingleton<StateContainer>();

ASP.NET Core Program.cs 6.0 veya sonraki bir sonraki bir ASP.NET Core ) Blazor Server içinde:

builder.Services.AddScoped<StateContainer>();

Startup.ConfigureServices Blazor Server 6.0'ASP.NET Core önceki sürümlerde ( ) içinde:

services.AddScoped<StateContainer>();

Shared/Nested.razor:

@implements IDisposable
@inject StateContainer StateContainer

<h2>Nested component</h2>

<p>Nested component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the Nested component
    </button>
</p>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = 
            $"New value set in the Nested component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Pages/StateContainerExample.razor:

@page "/state-container-example"
@implements IDisposable
@inject StateContainer StateContainer

<h1>State Container Example component</h1>

<p>State Container component Property: <b>@StateContainer.Property</b></p>

<p>
    <button @onclick="ChangePropertyValue">
        Change the Property from the State Container Example component
    </button>
</p>

<Nested />

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    private void ChangePropertyValue()
    {
        StateContainer.Property = "New value set in the State " +
            $"Container Example component: {DateTime.Now}";
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Yukarıdaki bileşenler uygulanır ve temsilciler, bileşenler atıldıklarında çerçeve tarafından çağrılan IDisposable OnChange Dispose yöntemlerde aboneliğinden çıkar. Daha fazla bilgi için bkz. RazorASP.NET Core bileşen yaşam döngüsü.