Barındırılan Razor çözümlerde ASP.NET Core Razor bileşenlerini MVC veya Blazor WebAssembly Sayfalar ile tümleştirme

Not

Barındırılan Blazor WebAssembly çözümler desteklenmeye devam ediyor, ancak proje şablonu kaldırıldı ve artık .NET 8 veya sonraki sürümlerde desteklenmiyor. Bu makale başvuru için .NET 7'ye kadar olan içindekiler tablosunda görünür, ancak .NET 7'nin artık desteklenmeyen bir Standart Destek Terimi sürümü olduğuna dikkat edin.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi.

Bu makalede, sunucudaki bileşenlerin önceden yenilenmesi de dahil olmak üzere barındırılan RazorBlazor WebAssembly uygulamalar için bileşen tümleştirme senaryoları açıklanmaktadırRazor.

Önemli

ASP.NET Core sürümlerindeki çerçeve değişiklikleri, bu makalede farklı yönergeler kümesine yol açtı. Bu makalenin kılavuzunu kullanmadan önce, bu makalenin en üstündeki belge sürümü seçicisinin uygulamanız için kullanmayı düşündüğünüz ASP.NET Core sürümüyle eşleşip eşleşmediğini onaylayın.

Ön kayıt, arama motorlarının sayfa derecesini hesaplamak için kullanabileceği ilk HTTP yanıtının içeriğini işleyerek Arama Altyapısı İyileştirmesini (SEO) geliştirebilir.

Çözüm yapılandırması

Prerendering yapılandırması

Barındırılan Blazor WebAssembly bir uygulama için prerendering'i ayarlamak için:

1. Blazor WebAssembly Uygulamayı bir ASP.NET Core uygulamasında barındırın. Tek başına Blazor WebAssembly bir uygulama ASP.NET Core çözümüne eklenebilir veya barındırılan seçenekle proje şablonundanBlazor WebAssemblyBlazor WebAssembly bir uygulamayı kullanabilirsiniz:

   • Visual Studio: Ek bilgiler Bu makalenin örneklerinde çözümün adı BlazorHostedverilmiştir.
   • Visual Studio Code/.NET CLI komut kabuğu: dotnet new blazorwasm -ho (seçeneğini kullanın -ho|--hosted ). -o|--output {LOCATION} Çözüm için bir klasör oluşturmak ve çözümün proje ad alanlarını ayarlamak için seçeneğini kullanın. Bu makalenin örneklerinde çözüm () olarak adlandırılmıştırBlazorHosteddotnet new blazorwasm -ho -o BlazorHosted.

   Bu makaledeki örnekler için barındırılan çözümün adı (derleme adı) şeklindedir BlazorHosted. İstemci projesinin ad alanı , BlazorHosted.Clientsunucu projesinin ad alanı ise olur BlazorHosted.Server.

2. .

3. ProjedeClient, :

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Projenin _Host.cshtml klasörüne Server dosya ekleyinPages. Visual Studio kullanarak veya komut kabuğunda komutuyla Blazor Server .NET CLI kullanarak şablondan oluşturulan bir projeden dotnet new blazorserver -o BlazorServer dosyaları alabilirsiniz (-o BlazorServerbu seçenek proje için bir klasör oluşturur). Dosyaları Server projenin Pages klasörüne yerleştirdikten sonra dosyalarda aşağıdaki değişiklikleri yapın.

   Dosyada aşağıdaki değişiklikleri _Host.cshtml yapın:

   • Pages Dosyanın üst kısmındaki ad alanını, uygulama sayfalarının ad alanıyla Server eşleşecek şekilde güncelleştirin. {APP NAMESPACE} Aşağıdaki örnekte yer tutucu, dosyayı sağlayan donör uygulamasının sayfalarının _Host.cshtml ad alanını temsil eder:

     Silme:

     - @namespace {APP NAMESPACE}.Pages
     

     Ekle:

     @namespace BlazorHosted.Server.Pages
     

   • Dosyanın en üstüne proje için @using bir Client yönerge ekleyin:

     @using BlazorHosted.Client
     

   • Stil sayfası bağlantılarını WebAssembly projesinin stil sayfalarını işaret edecek şekilde güncelleştirin. Aşağıdaki örnekte istemci projesinin ad alanı şeklindedir BlazorHosted.Client. Yer tutucu, {APP NAMESPACE} dosyayı sağlayan _Host.cshtml bağış uygulamasının ad alanını temsil eder. Bileşenin önceden yenilenmesi için bileşen için Bileşen Etiketi Yardımcısı'nı <component> (HeadOutletetiket) güncelleştirin.

     Silme:

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
     - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     

     Ekle:

     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
     

     Not

     <link> Bootstrap stil sayfasını (css/bootstrap/bootstrap.min.css) isteyen öğeyi yerinde bırakın.

   • Blazor betik kaynağını istemci tarafı Blazor WebAssembly betiğini kullanacak şekilde güncelleştirin:

     Silme:

     - <script src="_framework/blazor.server.js"></script>
     

     Ekle:

     <script src="_framework/blazor.webassembly.js"></script>
     

   • render-mode güncelleştirin:

     Silme:

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

     Ekle:

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

     Önemli

     Kimlik doğrulama uç noktaları (/authentication/ yol kesimi) için ön kayıt desteklenmez. Daha fazla bilgi için, bkz. ASP.NET Core Blazor WebAssembly ek güvenlik senaryoları.

5. Program.cs Projenin dosyasında Server geri dönüş uç noktasını dosyadan index.html sayfaya _Host.cshtml değiştirin:

   Silme:

   - app.MapFallbackToFile("index.html");
   

   Ekle:

   app.MapFallbackToPage("/_Host");
   

6. Client ve Server projeleri, ön kayıt sırasında bir veya daha fazla yaygın hizmet kullanıyorsa, hizmet kayıtlarını her iki projeden çağrılabilecek bir yönteme dahil edin. Daha fazla bilgi için bkz . ASP.NET Core Blazor bağımlılık ekleme.

7. Server Projeyi çalıştırın. Barındırılan Blazor WebAssembly uygulama, istemciler için proje tarafından Server önceden oluşturulur.

Bileşenleri sayfalara veya görünümlere ekleme Razor yapılandırması

Uygulamadan sunucu uygulamasının RazorClient sayfalarına veya görünümlerine bileşen eklemeye Blazor WebAssembly yönelik aşağıdaki bölümler ve örnekler ek yapılandırma gerektirir.

Proje Server aşağıdaki dosya ve klasörlere sahip olmalıdır.

Razor Sayfa:

• Pages/Shared/_Layout.cshtml
• Pages/Shared/_Layout.cshtml.css
• Pages/_ViewImports.cshtml
• Pages/_ViewStart.cshtml

MVC:

• Views/Shared/_Layout.cshtml
• Views/Shared/_Layout.cshtml.css
• Views/_ViewImports.cshtml
• Views/_ViewStart.cshtml

Yukarıdaki dosyalar, ASP.NET Core proje şablonlarından aşağıdakiler kullanılarak bir uygulama oluşturularak elde edilebilir:

• Visual Studio'nun yeni proje oluşturma araçları.
• Komut kabuğu açma ve yürütme dotnet new webapp -o {PROJECT NAME} (Razor Sayfalar) veya dotnet new mvc -o {PROJECT NAME} (MVC). Yer tutucu için bir değer -o|--output içeren seçenek{PROJECT NAME}, uygulama için bir ad sağlar ve uygulama için bir klasör oluşturur.

İçeri aktarılan _ViewImports.cshtml dosyadaki ad alanlarını, dosyaları alan proje tarafından kullanılan ad alanlarıyla Server eşleşecek şekilde güncelleştirin.

Pages/_ViewImports.cshtml (Razor Sayfalar):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Sayfalar veya Pages/Shared/_Layout.cshtml MVC için Razor olan Views/Shared/_Layout.cshtml içeri aktarılan düzen dosyasını güncelleştirin.

İlk olarak, aşağıdaki örnekteki donör projesinden RPDonor.styles.css başlığı ve stil sayfasını silin. Yer tutucu, {PROJECT NAME} bağış projesinin uygulama adını temsil eder.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Client Projenin stillerini düzen dosyasına ekleyin. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client. <title> öğesi aynı anda güncelleştirilebilir.

Aşağıdaki satırları düzen dosyasının <head> içeriğine yerleştirin:

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

İçeri aktarılan düzen iki Home (Index sayfa) ve Privacy gezinti bağlantısı içerir. Bağlantıların barındırılan HomeBlazor WebAssembly uygulamaya işaret etmelerini sağlamak için köprüleri değiştirin:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

MVC düzen dosyasında:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

<footer> Öğenin uygulama adını güncelleştirin. Aşağıdaki örnekte uygulama adı BlazorHostedkullanılır:

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

Yukarıdaki örnekte yer tutucu, {DATE} Sayfalar veya MVC proje şablonundan oluşturulan bir uygulamadaki Razor telif hakkı tarihini temsil eder.

Privacy bağlantısının bir gizlilik sayfasına (Razor Sayfalar) yönlendirmesini sağlamak için, Server projesine bir gizlilik sayfası ekleyin.

Pages/Privacy.cshtml projede Server :

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

MVC tabanlı gizlilik görünümü için Server projesinde bir gizlilik görünümü oluşturun.

View/Home/Privacy.cshtml projede Server :

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

MVC uygulamasının Home denetleyicisinde görünümü döndürebilirsiniz.

Aşağıdaki kodu Controllers/HomeController.cs dosyasına ekleyin:

public IActionResult Privacy()
{
    return View();
}

Bir bağış uygulamasından dosya içeri aktarıyorsanız, dosyalardaki ad alanlarını projenin ad alanlarıyla eşleşecek şekilde güncelleştirdiğinizden Server emin olun (örneğin, BlazorHosted.Server).

Statik varlıkları, donör projesinin Server klasöründen projeye wwwroot aktarın:

• wwwroot/css klasör ve içerik
• wwwroot/js klasör ve içerik
• wwwroot/lib klasör ve içerik

Donör projesi bir ASP.NET Core proje şablonundan oluşturulursa ve dosyalar değiştirilmezse, bağış projesindeki klasörün tamamını wwwroot projeye Server kopyalayabilir ve simge dosyasını kaldırabilirsiniz favicon .

Uyarı

Statik varlığı hem ve ClientServer klasörlerine wwwroot yerleştirmekten kaçının. Her iki klasör de aynı dosya varsa, statik varlıklar aynı web kök yolunu paylaştığından bir özel durum oluşturulur. Bu nedenle, her ikisinde de değil, klasörlerden wwwroot birinde statik bir varlık barındırın.

Önceki yapılandırmayı benimsedikten sonra, bileşenleri projenin sayfalarına veya görünümlerine Razor ekleyinServer. Bu makalenin aşağıdaki bölümlerindeki yönergeleri kullanın:

• Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme
• CSS seçicisi ile bir sayfada veya görünümde bileşenleri işleme

Bileşen Etiketi Yardımcısı ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma da dahil olmak üzere çözümü yapılandırdıktan sonra, Bileşen Etiketi Yardımcısı bir sayfadaki veya görünümdeki bir Blazor WebAssembly uygulamadan bileşen işlemek için iki işleme modunu destekler:

• WebAssembly
• WebAssemblyPrerendered

Aşağıdaki Razor Sayfalar örneğinde Counter , bileşen bir sayfada işlenir. Bileşeni etkileşimli hale getirmek için betik, Blazor WebAssembly sayfanın işleme bölümüne eklenir. Bileşen Etiketi YardımcısıCounter () ile bileşenin {ASSEMBLY NAME}.Pages.Counter tam ad alanını kullanmaktan kaçınmak için, istemci projesinin @using ad alanı için bir Pages yönerge ekleyin. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client.

Server projesinde, Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Projeyi çalıştırın. konumundaki Razorsayfaya /razorpagescounter1 gidin. Önceden alınan Counter bileşen sayfaya eklenir.

RenderMode bileşenin şu şekilde yapılandırılıp yapılandırılmadığını yapılandırıyor:

• Sayfaya önceden girilir.
• Sayfada statik HTML olarak işlenir veya kullanıcı aracısından bir Blazor uygulamayı önyüklemek için gerekli bilgileri içeriyorsa.

Parametre geçirme ve RenderMode yapılandırma dahil olmak üzere Bileşen Etiketi Yardımcısı hakkında daha fazla bilgi için bkz . ASP.NET Core'da Bileşen Etiketi Yardımcısı.

Bileşenlerin kullandığı statik kaynaklara ve düzen sayfalarının uygulamada nasıl düzenlenmiş olduğuna bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün Scripts işleme bölümüne, stil sayfaları ise düzenin <head> öğe içeriğine eklenir.

İşleme parçası aracılığıyla alt içerik ayarlama

Bileşen Etiketi Yardımcısı, alt içerikRenderFragment almayı desteklemez (örneğin, param-ChildContent="..."). Geçirmek istediğiniz alt içerikle işlemek istediğiniz bileşene başvuran bir Razor bileşen (.razor) oluşturmanızı ve ardından bileşeni sayfadan veya görünümden çağırmanızı Razor öneririz.

En üst düzey önceden oluşturulmuş bileşenlerin yayımlamada kırpıldığından emin olun

Bir Bileşen Etiketi Yardımcısı, yayımlama sırasında kırpmaya tabi olan bir kitaplıktan bir bileşene doğrudan başvuruda bulunuyorsa, istemci tarafı uygulama kodundan bu bileşene başvuru olmadığından yayımlama sırasında kırpılabilir. Sonuç olarak, bileşen önceden kaydedilmez ve çıkışta boş bir nokta bırakılır. Bu durumda, düzelticiye istemci tarafı uygulamasındaki herhangi bir sınıfa öznitelik DynamicDependency ekleyerek kitaplık bileşenini korumasını sağlayın. adlı SomeLibraryComponentToBePreservedbir bileşeni korumak için, aşağıdakini herhangi bir bileşene ekleyin:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

Yukarıdaki yaklaşım genellikle gerekli değildir, çünkü uygulama genellikle bileşenlerinin (kırpılmayan) önüne geçmekte ve bu da kitaplıklardaki bileşenlere başvurur (bu da kırpılmamasına neden olur). Yalnızca kitaplık kırpmaya tabi olduğunda doğrudan bir kitaplık bileşenini önceden oluşturmak için açıkça kullanın DynamicDependency .

CSS seçicisi ile bir sayfada veya görünümde bileşenleri işleme

Ek yapılandırma dahil olmak üzere çözümü yapılandırdıktan sonra, dosyada Client barındırılan Blazor WebAssemblyProgram.cs bir çözümün projesine kök bileşenleri ekleyin. Aşağıdaki örnekte, Counter bileşeni ile eşleşen idöğesini seçen bir CSS seçicisi counter-component ile kök bileşen olarak bildirilir. Aşağıdaki örnekte projenin Client ad alanı şeklindedir BlazorHosted.Client.

Program.cs Projenin dosyasındaClient, projenin Razor bileşenlerinin ad alanını dosyanın en üstüne ekleyin:

using BlazorHosted.Client.Pages;

builder içinde oluşturulduktan Program.cssonra, bileşeni kök bileşen olarak ekleyinCounter:

builder.RootComponents.Add<Counter>("#counter-component");

Aşağıdaki Razor Sayfalar örneğinde Counter , bileşen bir sayfada işlenir. Bileşeni etkileşimli hale getirmek için betik, Blazor WebAssembly sayfanın işleme bölümüne eklenir.

Server projesinde, Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Server Projeyi çalıştırın. konumundaki Razorsayfaya /razorpagescounter2 gidin. Önceden alınan Counter bileşen sayfaya eklenir.

Bileşenlerin kullandığı statik kaynaklara ve düzen sayfalarının uygulamada nasıl düzenlenmiş olduğuna bağlı olarak ek çalışma gerekebilir. Betikler genellikle bir sayfaya veya görünümün Scripts işleme bölümüne, stil sayfaları ise düzenin <head> öğe içeriğine eklenir.

Not

Yukarıdaki örnek, JSException bir Blazor WebAssembly uygulamanın css seçicisi kullanımıyla aynı andaRazorönceden girilip tümleştirilip tümleştirilemediğini gösterir. Projenin bileşenlerinden Client birine gitmek veya eklenmiş bir bileşenle sayfasına veya görünümüne Razor gitmek bir veya daha fazla ServerJSException oluşturur.

Bu normal bir davranıştır çünkü bir Blazor WebAssembly uygulamayı yönlendirilebilir Razor bileşenlerle önceden oluşturmak ve tümleştirmek CSS seçicilerinin kullanımıyla uyumsuzdur.

Önceki bölümlerde yer alan örneklerle çalıştıysanız ve örnek uygulamanızda CSS seçicisinin çalıştığını görmek istiyorsanız, proje App dosyasının kök bileşeninin Client belirtimini Program.cs açıklama satırı yapın:

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

CSS seçici kullanan katıştırılmış Razor bileşenle sayfaya veya görünüme gidin (örneğin, /razorpagescounter2 önceki örnekte). Sayfa veya görünüm, katıştırılmış bileşenle birlikte yüklenir ve katıştırılmış bileşen beklendiği gibi çalışır.

Önceden girilmiş durumu kalıcı hale

Önceden girilmiş durum kalıcı olmadan, ön kayıt sırasında kullanılan durum kaybolur ve uygulama tamamen yüklendiğinde yeniden oluşturulması gerekir. Herhangi bir durum zaman uyumsuz olarak ayarlanırsa, önceden yenilenen kullanıcı arabirimi geçici yer tutucularla değiştirildiğinden ve sonra yeniden tam olarak işlendiğinden kullanıcı arabirimi titreyebilir.

Önceden oluşturulmuş bileşenlerin durumunu kalıcı hale getirmek için Kalıcı Bileşen Durum Etiketi Yardımcısı'nı (başvuru kaynağı) kullanın. Bileşenleri önceden oluşturan bir uygulamada sayfanın kapanış <persist-component-state /> etiketinin </body>_Host içine Etiket Yardımcısı etiketini ekleyin.

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Pages/_Host.cshtml Barındırılan BlazorWebAssemblyPrerendered bir uygulamada WebAssembly önceden yüklenmiş (Blazor WebAssembly) uygulamalarda:

<body>
    ...

    <persist-component-state />
</body>

Hizmeti kullanarak hangi durumun kalıcı hale getirmek istediğinize PersistentComponentState karar verin. PersistentComponentState.RegisterOnPersisting uygulama duraklatmadan önce bileşen durumunu kalıcı hale getirmek için bir geri çağırma kaydeder. Uygulama sürdürülürken durum alınır. Uygulama kapatma sırasında olası bir yarış durumundan kaçınmak için başlatma kodunun sonunda aramayı yapın.

Aşağıdaki örnekte:

• Yer tutucu, {TYPE} kalıcı olacak veri türünü temsil eder (örneğin, WeatherForecast[]).
• Yer {TOKEN} tutucu bir durum tanımlayıcı dizesidir (örneğin, fetchdata).

@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Aşağıdaki örnek, proje şablonunu temel alan barındırılan FetchDataBlazor WebAssembly bir uygulamada bileşenin Blazor güncelleştirilmiş bir sürümüdür. Bileşen, WeatherForecastPreserveState ön kayıt sırasında hava durumu tahmin durumunu kalıcı hale getirir ve ardından bileşeni başlatmak için durumu alır. Kalıcı Bileşen Durumu Etiket Yardımcısı, tüm bileşen çağrılarından sonra bileşen durumunu kalıcı hale getirdi.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = await WeatherForecastService.GetForecastAsync(
                DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Ön kayıt sırasında kullanılan durumla aynı duruma sahip bileşenleri başlatarak, pahalı başlatma adımları yalnızca bir kez yürütülür. İşlenen kullanıcı arabirimi önceden oluşturulmuş kullanıcı arabirimiyle de eşleşir, bu nedenle tarayıcıda titreme olmaz.

Kalıcı önceden alınan durum, bileşen durumunu geri yüklemek için kullanıldığı istemciye aktarılır. Barındırılan Blazor WebAssembly bir uygulamada ön kayıt için veriler tarayıcıya sunulur ve hassas, özel bilgiler içermemelidir.

Ek Blazor WebAssembly kaynaklar

• Montaj gecikmeli yükleme ile ön kayıt desteği
• Razor prerendering ile ilgili bileşen yaşam döngüsü konuları
  • Bileşen başlatma (OnInitialized{Async})
  • Bileşen işlendikten sonra (OnAfterRender{Async})
  • Ön kayıt sonrasında durum bilgisi olan yeniden bağlantı: Bölümdeki içerik, durum bilgisiBlazor Server odaklansa SignalR da, barındırılan uygulamalarda (Blazor WebAssembly) ön kayıt senaryosu, geliştirici kodunun iki kez yürütülmesini önlemeye yönelik benzer koşullar ve yaklaşımlar içerir. Başlatma kodunun ön kayıt sırasında yürütülmesi sırasında durumu korumak için bu makalenin Önceden girilmiş durumu kalıcı hale getirme bölümüne bakın.
  • JavaScript birlikte çalışma ile ön kayıt
• Prerendering ile ilgili kimlik doğrulaması ve yetkilendirme konuları
  • Genel bakış açıları
  • Barındırılan uygulamalarda kimlik doğrulaması ile önceden giriş Blazor WebAssembly
• ASP.NET Core'u barındırma ve dağıtma Blazor WebAssembly
• Hataları işleme: Prerendering
• OnNavigateAsyncön kayıt sırasında iki kez yürütülür: ile zaman uyumsuz gezinti olaylarını işlemeOnNavigateAsync