Aracılığıyla paylaş

ASP.NET Core Razor bileşenlerini MVC veya Razor Sayfalar ile entegre edin

Uyarı

Bu makalenin en son sürümü değil. Geçerli sürüm için bu makalenin .NET 10 sürümüne bakın.

Uyarı

Bu ASP.NET Core sürümü artık desteklenmiyor. Daha fazla bilgi için .NET ve .NET Core Destek Politikası'na bakın. Mevcut sürüm için, bu makalenin .NET 9 versiyonuna bakın.

Razor bileşenleri, Razor Sayfalar veya MVC uygulamalarına entegre edilebilir. Sayfa veya görünüm oluşturulduğunda, bileşenler aynı anda önceden renderlanabilir.

Önemli

ASP.NET Core sürümleri boyunca yapılan framework değişiklikleri, bu makalede farklı talimat setlerine yol açtı. Bu makaledeki yönergeleri kullanmadan önce, makalenin üst kısmındaki belge sürüm seçicisinin uygulamanızda kullanmayı düşündüğünüz ASP.NET Core sürümüyle eşleştiğinden emin olun.

Önceden renderlama, arama motorlarının sayfa sıralamasını hesaplamak için kullanabileceği içeriği ilk HTTP yanıtı ile renderlayarak Arama Motoru Optimizasyonunu (SEO) geliştirebilir.

Projenin yapılandırılmasından sonra, projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerdeki talimatları kullanın:

Yapılandırma

Mevcut bir Razor Sayfalar veya MVC uygulamasının sayfalarına veya görünümlerine Razor bileşenleri entegre etmek için aşağıdaki yönergeleri kullanın.

  1. Projeye, kök klasöre aşağıdaki içeriğe sahip bir "imports" dosyası ekleyin. Proje ad alanı için {APP NAMESPACE} yer tutucusunu değiştirin.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  2. Proje düzen dosyasında (Pages/Shared/_Layout.cshtmlRazor Sayfa uygulamaları veya Views/Shared/_Layout.cshtml MVC uygulamalarında):

    • Aşağıdaki <base> etiketi ve HeadOutlet bileşen Etiket Yardımcısı'nı <head> elementine ekleyin:

      <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

      Önceki örnekte, href değeri (uygulama temel yolu), uygulamanın kök URL yolunda (/) bulunduğunu varsayar. Uygulama bir alt uygulama ise, ASP.NET Core Blazor uygulama temel yolu'na bakın.

      HeadOutlet bileşeni, sayfa başlıkları (<head> bileşeni) ve PageTitle bileşenleri tarafından ayarlanan diğer head (HeadContent bileşeni) öğeleri için head (Razor) içeriğini render etmek için kullanılır. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

    • <script> etiketini, blazor.server.js render kısmından hemen önce Scripts betiği için ekleyin (@await RenderSectionAsync(...)).

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

      Çerçeve, uygulamaya blazor.server.js betiğini ekler. Uygulamaya blazor.server.js betik dosyasını manuel olarak eklemeye gerek yok.

    Uyarı

    Genellikle, düzen _ViewStart.cshtml dosyası aracılığıyla yüklenir.

  3. Hizmetlerin kaydedildiği Blazor Server konumunda Program.cs hizmetlerini kaydedin.

    builder.Services.AddServerSideBlazor();

  4. Rotaların haritalandığı yerlerde Blazor uç noktalarına Program.cs Hub uç noktasını ekleyin. Aşağıdaki satırı MapRazorPages (Razor Sayfalar) veya MapControllerRoute (MVC) çağrısından sonra yerleştirin.

    app.MapBlazorHub();

  5. Bileşenleri herhangi bir sayfa veya görünüme entegre edin. Örneğin, bir Counter bileşeni projenin Shared klasörüne ekleyin.

    Pages/Shared/Counter.razor (Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Sayfalar:

    Bir Index Pages uygulaması projesinin Razor sayfasına, Counter bileşeninin ad alanını ekleyin ve bileşeni sayfaya yerleştirin. Index sayfası yüklendiğinde, Counter bileşeni sayfada önceden oluşturulmuş olur. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    MVC

    Bir MVC uygulamasının projesindeki Index görünümüne, Counter bileşeninin ad alanını ekleyin ve bileşeni görünüme yerleştirin. Index görünümü yüklendiğinde, Counter bileşeni sayfada önceden işlenir. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

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

Daha fazla bilgi için, Bir sayfadan veya görüntüden bileşenleri oluşturma bölümüne bakın.

Razor sayfalı bir uygulamada yönlendirilebilir bileşenler kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

Yönlendirilebilir Razor bileşenlerini Razor Pages uygulamalarında desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içerikle bir _Host sayfa ekleyin. {APP NAMESPACE} yer tutucusunu, uygulamanın ad alanı ile değiştirin.

    Pages/_Host.cshtml:

    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Uyarı

    Önceki örnek, HeadOutlet bileşeninin ve Blazor betiğinin (_framework/blazor.server.js) uygulamanın düzeni tarafından oluşturulduğunu varsayar. Daha fazla bilgi için Yapılandırma bölümüne bakın.

    .NET 10 veya sonraki sürümlerinde, proje en az bir Razor bileşen dosyası (.razor) içeriyorsa Blazor betiği .NET çerçevesi tarafından eklenir. Uygulamanız Blazor betiğini gerektiriyor ancak en az bir bileşen içermiyorsa, betiği koşulsuz olarak eklemek için aşağıdaki MSBuild özelliğini uygulamanızın proje dosyanıza ekleyin.

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Program.cs uç noktalarında, _Host sayfası için düşük öncelikli bir rota son uç nokta olarak ekleyin.

    app.MapFallbackToPage("/_Host");

  5. Yönlendirilebilir bileşenleri projeye ekleyin. Aşağıdaki örnek, RoutableCounter proje şablonlarındaki Counter bileşenine dayanan bir Blazor bileşenidir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

MVC uygulamasında yönlendirilebilir bileşenleri kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

MVC uygulamalarında yönlendirilebilir Razor bileşenlerini desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içeriğe sahip bir _Host görünüm ekleyin. {APP NAMESPACE} yer tutucusunu, uygulamanın ad alanı ile değiştirin.

    Views/Home/_Host.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Uyarı

    Önceki örnek, HeadOutlet bileşeninin ve Blazor betiğinin (_framework/blazor.server.js) uygulamanın düzeni tarafından oluşturulduğunu varsayar. Daha fazla bilgi için Yapılandırma bölümüne bakın.

    .NET 10 veya sonraki sürümlerinde, Blazor proje en az bir Razor bileşen dosyası (.razor) içeriyorsa betik çerçeve tarafından eklenir. Uygulamanız Blazor betiğine ihtiyaç duyuyor ancak en az bir bileşen içermiyorsa, betiğin koşulsuz şekilde eklenmesini sağlamak için aşağıdaki MSBuild özelliğini uygulamanın proje dosyasına ekleyin.

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Denetleyiciye bir eylem ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs uç noktalarında, _Host görünümünü döndüren denetleyici işlemi için düşük öncelikli bir rota ekleyin.

    app.MapFallbackToController("Blazor", "Home");

  6. MVC uygulamasında bir Pages klasörü oluşturun ve yönlendirme yapılabilir bileşenler ekleyin. Aşağıdaki örnek, RoutableCounter proje şablonlarındaki Counter bileşenine dayanan bir Blazor bileşenidir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

Bir sayfa veya görünümden bileşenleri işlemleştirin

Bu bölüm, doğrudan kullanıcı isteklerinden yönlendirilemeyen bileşenlerin sayfalara veya görünümlere eklenmesiyle ilgilidir.

Sayfa veya görünümlerden bir bileşeni render etmek için Bileşen Etiket Yardımcısı'nı kullanın.

Durum bilgisi olan etkileşimli bileşenleri oluştur

Durum bilgisi tutan etkileşimli bileşenler bir Razor sayfa veya görünüme eklenebilir.

Sayfa veya görünüm oluşturulduğunda:

  • Bileşen, sayfa veya görüntü ile birlikte önceden işlenir.
  • İlk bileşen durumu önceden işlemleme için kullanıldığında kaybolur.
  • Yeni bileşen durumu, SignalR bağlantısı kurulduğunda oluşturulur.

Aşağıdaki Razor sayfa bir Counter bileşeni sunar:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Etkileşimsiz bileşenleri işlemek

Aşağıdaki Razor sayfasında, Counter bileşeni, bir form kullanılarak belirtilen başlangıç değeriyle statik olarak oluşturulmuştur. Bileşen statik olarak işlendiği için etkileşimli değildir.

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Bileşen ad alanları

Projenin Razor bileşenlerini barındıran özel bir klasör kullanırken, klasörü temsil eden ad alanını sayfaya/görünüme veya _ViewImports.cshtml dosyasına ekleyin. Aşağıdaki örnekte:

  • Bileşenler projenin Components klasöründe depolanır.
  • {APP NAMESPACE} yer tutucu, projenin ad alanıdır. Components klasörün adını temsil eder.
@using {APP NAMESPACE}.Components

_ViewImports.cshtml dosyası, bir Pages Pages uygulamasının Razor klasöründe veya bir MVC uygulamasının Views klasöründe bulunur.

Daha fazla bilgi için ASP.NET Core Razor bileşenleri bölümüne bakın.

Önceden işlenmiş durumu kalıcı hale getir

Önyükleme öncesi durumu kalıcı hale getirmeden, önyükleme sırasında kullanılan durum kaybolur ve uygulama tamamen yüklendiğinde yeniden oluşturulması gerekir. Herhangi bir durum asenkron olarak ayarlandığında, önyükleme öncesi oluşturulmuş kullanıcı arayüzü geçici yer tutucularla değiştirilip ardından yeniden tam olarak oluşturulurken, kullanıcı arayüzünde titremeler olabilir.

Önyükleme yapılmış bileşenlerin durumunu kalıcı hale getirmek için, Persist Component State Tag Helper etiket yardımcı aracını kullanın (referans kaynağı). Bir uygulamada bileşenleri önceden işleyen <persist-component-state /> sayfasının kapanış </body> etiketi içine, Tag Helper'ın etiketi olan _Host ekleyin.

Uyarı

Belgelendirme bağlantıları, genellikle .NET referans kaynağının depo varsayılan dalını yükler; bu dal, bir sonraki .NET sürümü için mevcut geliştirmeyi temsil eder. Belirli bir sürüm için bir etiket seçmek üzere, Switch branches or tags açılır listesini kullanın. Daha fazla bilgi için ASP.NET Core kaynak kodu için bir sürüm etiketi nasıl seçilir (dotnet/AspNetCore.Docs #26205) bölümüne bakın.

Pages/_Host.cshtml uygulamalarının Blazor uygulaması içinde ServerPrerendered olan Blazor Server'da:

<body>
    ...

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

Hizmetini kullanarak hangi durumun kalıcı olacağına karar verin. Bir [PersistentState] özelliğe uygulanan öznitelik, ön kayıt sırasında durumu kalıcı hale getirmek için bir geri çağırma kaydeder ve bileşen etkileşimli olarak işlendiğinde veya hizmet başlatıldığında bunu yükler.

Aşağıdaki örnekte yer tutucu, {TYPE} kalıcı olacak veri türünü temsil eder (örneğin, WeatherForecast[]).

@code {
    [PersistentState]
    public {TYPE} Data { get; set; }

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

Aşağıdaki örnekte, WeatherForecastPreserveState bileşeni ön işleme sırasında hava durumu tahmin durumunu kalıcı hale getirir ve ardından bileşeni başlatmak için durumu geri alır. The Persist Component State Tag Helper, tüm bileşen çağrılarından sonra bileşen durumunu kalıcı hale getirir.

WeatherForecastPreserveState.razor:

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

<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 {
    [PersistentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecastService.GetForecastAsync(
            DateOnly.FromDateTime(DateTime.Now));
    }
}

Hizmetini kullanarak hangi durumun kalıcı olacağına karar verin. PersistentComponentState.RegisterOnPersisting, uygulama duraklatılmadan önce bileşen durumunu kalıcı hâle getirmek için bir geri çağırma işlevi kaydeder. Uygulama yeniden başladığında durum geri 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:

  • {TYPE} yer tutucu, saklanacak veri türünü temsil eder (örneğin, WeatherForecast[]).
  • {TOKEN} yer tutucu, bir eyalet tanımlayıcı dizgesidir (ö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 örnekte, WeatherForecastPreserveState bileşeni ön işleme sırasında hava durumu tahmin durumunu kalıcı hale getirir ve ardından bileşeni başlatmak için durumu geri alır. The Persist Component State Tag Helper, tüm bileşen çağrılarından sonra bileşen durumunu kalıcı hale getirir.

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

Bileşenleri önceden işleme sırasında kullanılan aynı durumla başlatarak, pahalı başlangıç adımları yalnızca bir kez yürütülür. İşlenmiş kullanıcı arayüzü, önceden işlenmiş kullanıcı arayüzü ile de eşleşir, bu nedenle tarayıcıda titreme oluşmaz.

Uzun süreli olarak saklanan önceden oluşturulmuş durum, bileşen durumunu geri yüklemek için kullanıldığı istemciye aktarılır. ASP.NET Core Data Protection, verilerin Blazor Server uygulamalarda güvenli bir şekilde aktarılmasını sağlar.

Önceden render edilmiş durum boyutu ve SignalR mesaj boyutu sınırı

Önceden işlenmiş büyük bir durum boyutu, Blazor'nin SignalR devre mesaj boyutu sınırını aşabilir ve bu da şu sonuçlara yol açar:

  • SignalR devresi, Circuit host not initialized. hatasıyla istemcide başlatılamıyor.
  • İstemcideki yeniden bağlantı kullanıcı arayüzü, devre başarısız olduğunda görünür. Kurtarma mümkün değil.

Sorunu çözmek için aşağıdaki yaklaşımlardan herhangi birini kullanın:

  • Prerendere edilmiş duruma koyduğunuz veri miktarını azaltın.
  • Mesaj boyutu sınırını artır. UYARI: Limiti artırmak, Hizmet Aksatma (DoS) saldırısı riskini artırabilir.

Ek Blazor Server kaynaklar

Önceden renderlama, arama motorlarının sayfa sıralamasını hesaplamak için kullanabileceği içeriği ilk HTTP yanıtı ile renderlayarak Arama Motoru Optimizasyonunu (SEO) geliştirebilir.

Projenin yapılandırılmasından sonra, projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerdeki talimatları kullanın:

Yapılandırma

Mevcut bir Razor Sayfalar veya MVC uygulamasının sayfalarına veya görünümlerine Razor bileşenleri entegre etmek için aşağıdaki yönergeleri kullanın.

Önemli

Bir _Layout.cshtml bileşeni için Component Tag Helper ile bir düzen sayfası (HeadOutlet) kullanmak, sayfanın başlığı (<head> bileşeni) ve diğer kafa elemanları (PageTitle bileşeni) gibi HeadContent içeriği kontrol etmek için gereklidir. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

  1. Projenin yerleşim dosyasında:

    • Aşağıdaki <base> etiketini ve HeadOutlet bileşen Etiket Yardımcısını <head> öğesindeki Pages/Shared/_Layout.cshtml (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC) ekleyin.

      <base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

      Önceki örnekte, href değeri (uygulama temel yolu), uygulamanın kök URL yolunda (/) bulunduğunu varsayar. Uygulama bir alt uygulama ise, ASP.NET Core Blazor uygulama temel yolu'na bakın.

      HeadOutlet bileşeni, sayfa başlıkları (<head> bileşeni) ve PageTitle bileşenleri tarafından ayarlanan diğer head (HeadContent bileşeni) öğeleri için head (Razor) içeriğini render etmek için kullanılır. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

    • Uygulamanın düzeninde <script> render bölümünden (blazor.server.js) hemen önce Scripts script için bir @await RenderSectionAsync(...) etiketi ekleyin.

      Pages/Shared/_Layout.cshtml (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

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

      Çerçeve, uygulamaya blazor.server.js betiğini ekler. Uygulamaya blazor.server.js betik dosyasını manuel olarak eklemeye gerek yok.

  2. Projeye, kök klasöre aşağıdaki içeriğe sahip bir "imports" dosyası ekleyin. Proje ad alanı için {APP NAMESPACE} yer tutucusunu değiştirin.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Hizmetlerin kaydedildiği Blazor Server konumunda Program.cs hizmetlerini kaydedin.

    builder.Services.AddServerSideBlazor();

  4. Rotaların haritalandığı yerlerde Blazor uç noktalarına Program.cs Hub uç noktasını ekleyin.

    Aşağıdaki satırı MapRazorPages (Razor Sayfalar) veya MapControllerRoute (MVC) çağrısından sonra yerleştirin.

    app.MapBlazorHub();

  5. Bileşenleri herhangi bir sayfa veya görünüme entegre edin. Örneğin, bir Counter bileşeni projenin Shared klasörüne ekleyin.

    Pages/Shared/Counter.razor (Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Sayfalar:

    Bir Index Pages uygulaması projesinin Razor sayfasına, Counter bileşeninin ad alanını ekleyin ve bileşeni sayfaya yerleştirin. Index sayfası yüklendiğinde, Counter bileşeni sayfada önceden oluşturulmuş olur. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    MVC

    Bir MVC uygulamasının projesindeki Index görünümüne, Counter bileşeninin ad alanını ekleyin ve bileşeni görünüme yerleştirin. Index görünümü yüklendiğinde, Counter bileşeni sayfada önceden işlenir. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

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

Daha fazla bilgi için, Bir sayfadan veya görüntüden bileşenleri oluşturma bölümüne bakın.

Razor sayfalı bir uygulamada yönlendirilebilir bileşenler kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

Yönlendirilebilir Razor bileşenlerini Razor Pages uygulamalarında desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içerikle bir _Host sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    Bu senaryoda, bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    Önemli

    Bir _Layout.cshtml bileşeni için Component Tag Helper ile bir düzen sayfası (HeadOutlet) kullanmak, sayfanın başlığı (<head> bileşeni) ve diğer kafa elemanları (PageTitle bileşeni) gibi HeadContent içeriği kontrol etmek için gereklidir. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Program.cs uç noktalarında, _Host sayfası için düşük öncelikli bir rota son uç nokta olarak ekleyin.

    app.MapFallbackToPage("/_Host");

  5. Yönlendirilebilir bileşenleri projeye ekleyin. Aşağıdaki örnek, RoutableCounter proje şablonlarındaki Counter bileşenine dayanan bir Blazor bileşenidir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

MVC uygulamasında yönlendirilebilir bileşenleri kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

MVC uygulamalarında yönlendirilebilir Razor bileşenlerini desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içeriğe sahip bir _Host görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    Önemli

    Bir _Layout.cshtml bileşeni için Component Tag Helper ile bir düzen sayfası (HeadOutlet) kullanmak, sayfanın başlığı (<head> bileşeni) ve diğer kafa elemanları (PageTitle bileşeni) gibi HeadContent içeriği kontrol etmek için gereklidir. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Denetleyiciye bir eylem ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs uç noktalarında, _Host görünümünü döndüren denetleyici işlemi için düşük öncelikli bir rota ekleyin.

    app.MapFallbackToController("Blazor", "Home");

  6. MVC uygulamasında bir Pages klasörü oluşturun ve yönlendirme yapılabilir bileşenler ekleyin. Aşağıdaki örnek, RoutableCounter proje şablonlarındaki Counter bileşenine dayanan bir Blazor bileşenidir.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

Bir sayfa veya görünümden bileşenleri işlemleştirin

Bu bölüm, doğrudan kullanıcı isteklerinden yönlendirilemeyen bileşenlerin sayfalara veya görünümlere eklenmesiyle ilgilidir.

Sayfa veya görünümlerden bir bileşeni render etmek için Bileşen Etiket Yardımcısı'nı kullanın.

Durum bilgisi olan etkileşimli bileşenleri oluştur

Durum bilgisi tutan etkileşimli bileşenler bir Razor sayfa veya görünüme eklenebilir.

Sayfa veya görünüm oluşturulduğunda:

  • Bileşen, sayfa veya görüntü ile birlikte önceden işlenir.
  • İlk bileşen durumu önceden işlemleme için kullanıldığında kaybolur.
  • Yeni bileşen durumu, SignalR bağlantısı kurulduğunda oluşturulur.

Aşağıdaki Razor sayfa bir Counter bileşeni sunar:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Önemli

Bir _Layout.cshtml bileşeni için Component Tag Helper ile bir düzen sayfası (HeadOutlet) kullanmak, sayfanın başlığı (<head> bileşeni) ve diğer kafa elemanları (PageTitle bileşeni) gibi HeadContent içeriği kontrol etmek için gereklidir. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

Etkileşimsiz bileşenleri işlemek

Aşağıdaki Razor sayfasında, Counter bileşeni, bir form kullanılarak belirtilen başlangıç değeriyle statik olarak oluşturulmuştur. Bileşen statik olarak işlendiği için etkileşimli değildir.

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Önemli

Bir _Layout.cshtml bileşeni için Component Tag Helper ile bir düzen sayfası (HeadOutlet) kullanmak, sayfanın başlığı (<head> bileşeni) ve diğer kafa elemanları (PageTitle bileşeni) gibi HeadContent içeriği kontrol etmek için gereklidir. Daha fazla bilgi için, ASP.NET Core uygulamalarında baş içeriğini kontrol etmeBlazor başvurusuna bakın.

Bileşen ad alanları

Projenin Razor bileşenlerini barındıran özel bir klasör kullanırken, klasörü temsil eden ad alanını sayfaya/görünüme veya _ViewImports.cshtml dosyasına ekleyin. Aşağıdaki örnekte:

  • Bileşenler projenin Components klasöründe depolanır.
  • {APP NAMESPACE} yer tutucu, projenin ad alanıdır. Components klasörün adını temsil eder.
@using {APP NAMESPACE}.Components

_ViewImports.cshtml dosyası, bir Pages Pages uygulamasının Razor klasöründe veya bir MVC uygulamasının Views klasöründe bulunur.

Daha fazla bilgi için ASP.NET Core Razor bileşenleri bölümüne bakın.

Önceden işlenmiş durumu kalıcı hale getir

Önyükleme öncesi durumu kalıcı hale getirmeden, önyükleme sırasında kullanılan durum kaybolur ve uygulama tamamen yüklendiğinde yeniden oluşturulması gerekir. Herhangi bir durum asenkron olarak ayarlandığında, önyükleme öncesi oluşturulmuş kullanıcı arayüzü geçici yer tutucularla değiştirilip ardından yeniden tam olarak oluşturulurken, kullanıcı arayüzünde titremeler olabilir.

Bu sorunları çözmek için, Blazor önceden render edilmiş bir sayfada durumu kalıcı hale getirmeyi Persist Component State Tag Helper kullanarak destekler. Tag Yardımcısı etiketini, <persist-component-state />, kapanış </body> etiketinin içine ekleyin.

Pages/_Layout.cshtml:

<body>
    ...

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

Hizmetini kullanarak hangi durumun kalıcı olacağına karar verin. PersistentComponentState.RegisterOnPersisting, uygulama duraklatılmadan önce bileşen durumunu kalıcı hâle getirmek için bir geri çağırma işlevi kaydeder. Uygulama yeniden başladığında durum geri 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, WeatherForecastPreserveState bileşeni ön işleme sırasında hava durumu tahmin durumunu kalıcı hale getirir ve ardından bileşeni başlatmak için durumu geri alır. The Persist Component State Tag Helper, tüm bileşen çağrılarından sonra bileşen durumunu kalıcı hale getirir.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@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(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();
    }
}

Bileşenleri önceden işleme sırasında kullanılan aynı durumla başlatarak, pahalı başlangıç adımları yalnızca bir kez yürütülür. İşlenmiş kullanıcı arayüzü, önceden işlenmiş kullanıcı arayüzü ile de eşleşir, bu nedenle tarayıcıda titreme oluşmaz.

Uzun süreli olarak saklanan önceden oluşturulmuş durum, bileşen durumunu geri yüklemek için kullanıldığı istemciye aktarılır. ASP.NET Core Data Protection, verilerin Blazor Server uygulamalarda güvenli bir şekilde aktarılmasını sağlar.

Önceden render edilmiş durum boyutu ve SignalR mesaj boyutu sınırı

Önceden işlenmiş büyük bir durum boyutu, Blazor'nin SignalR devre mesaj boyutu sınırını aşabilir ve bu da şu sonuçlara yol açar:

  • SignalR devresi, Circuit host not initialized. hatasıyla istemcide başlatılamıyor.
  • İstemcideki yeniden bağlantı kullanıcı arayüzü, devre başarısız olduğunda görünür. Kurtarma mümkün değil.

Sorunu çözmek için aşağıdaki yaklaşımlardan herhangi birini kullanın:

  • Prerendere edilmiş duruma koyduğunuz veri miktarını azaltın.
  • Mesaj boyutu sınırını artır. UYARI: Limiti artırmak, Hizmet Aksatma (DoS) saldırısı riskini artırabilir.

Ek Blazor Server kaynaklar

Önceden renderlama, arama motorlarının sayfa sıralamasını hesaplamak için kullanabileceği içeriği ilk HTTP yanıtı ile renderlayarak Arama Motoru Optimizasyonunu (SEO) geliştirebilir.

Projenin yapılandırılmasından sonra, projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerdeki talimatları kullanın:

Yapılandırma

Mevcut bir Razor Pages veya MVC uygulaması, sayfalara veya görünümlere Razor bileşenlerini entegre edebilir.

  1. Projenin yerleşim dosyasında:

    • Aşağıdaki <base> etiketini <head> öğesine Pages/Shared/_Layout.cshtml içinde ekleyin (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

      <base href="~/" />

      Önceki örnekte, href değeri (uygulama temel yolu), uygulamanın kök URL yolunda (/) bulunduğunu varsayar. Uygulama bir alt uygulama ise, ASP.NET Core Blazor uygulama temel yolu'na bakın.

    • <script> betiği için, blazor.server.js işleme bölümünden hemen önce bir Scripts etiketi ekleyin.

      Pages/Shared/_Layout.cshtml (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Çerçeve, uygulamaya blazor.server.js betiğini ekler. Uygulamaya blazor.server.js betik dosyasını manuel olarak eklemeye gerek yok.

  2. Projeye, kök klasöre aşağıdaki içeriğe sahip bir "imports" dosyası ekleyin. Proje ad alanı için {APP NAMESPACE} yer tutucusunu değiştirin.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Blazor Server içinde Startup.ConfigureServices hizmetini kaydedin.

    Startup.cs'da:

    services.AddServerSideBlazor();

  4. Blazor Hub uç noktasını app.UseEndpoints uç noktalarına (Startup.Configure) ekleyin.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Bileşenleri herhangi bir sayfa veya görünüme entegre edin. Örneğin, bir Counter bileşeni projenin Shared klasörüne ekleyin.

    Pages/Shared/Counter.razor (Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Sayfalar:

    Bir Index Pages uygulaması projesinin Razor sayfasına, Counter bileşeninin ad alanını ekleyin ve bileşeni sayfaya yerleştirin. Index sayfası yüklendiğinde, Counter bileşeni sayfada önceden oluşturulmuş olur. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    Önceki örnekte, {APP NAMESPACE} yer tutucusunu uygulamanın ad alanı ile değiştirin.

    MVC

    Bir MVC uygulamasının projesindeki Index görünümüne, Counter bileşeninin ad alanını ekleyin ve bileşeni görünüme yerleştirin. Index görünümü yüklendiğinde, Counter bileşeni sayfada önceden işlenir. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

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

Daha fazla bilgi için, Bir sayfadan veya görüntüden bileşenleri oluşturma bölümüne bakın.

Razor sayfalı bir uygulamada yönlendirilebilir bileşenler kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

Yönlendirilebilir Razor bileşenlerini Razor Pages uygulamalarında desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Uyarı

    .NET 5.0.1 sürümünün çıkışı ve ek 5.x sürümleri için, Router bileşeni PreferExactMatches parametresini @true olarak ayarlayacaktır. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den .NET 5'e geçiş.

  3. Projeye aşağıdaki içerikle bir _Host sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Startup.Configure uç noktalarında, Startup.cs için, _Host sayfası için düşük öncelikli bir rota ekleyin ve bu rotayı son uç nokta olarak belirleyin.

    endpoints.MapFallbackToPage("/_Host");

    Aşağıdaki örnek, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satırı göstermektedir.

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Yönlendirilebilir bileşenleri projeye ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

MVC uygulamasında yönlendirilebilir bileşenleri kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

MVC uygulamalarında yönlendirilebilir Razor bileşenlerini desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Uyarı

    .NET 5.0.1 sürümünün çıkışı ve ek 5.x sürümleri için, Router bileşeni PreferExactMatches parametresini @true olarak ayarlayacaktır. Daha fazla bilgi için bkz. ASP.NET Core 3.1'den .NET 5'e geçiş.

  3. Projeye aşağıdaki içeriğe sahip bir _Host görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Denetleyiciye bir eylem ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure uç noktalarında Startup.cs için, kontrolör eylemi için _Host görünümünü döndüren düşük öncelikli bir rota ekleyin.

    endpoints.MapFallbackToController("Blazor", "Home");

    Aşağıdaki örnek, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satırı göstermektedir.

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Yönlendirilebilir bileşenleri projeye ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

Bir sayfa veya görünümden bileşenleri işlemleştirin

Bu bölüm, doğrudan kullanıcı isteklerinden yönlendirilemeyen bileşenlerin sayfalara veya görünümlere eklenmesiyle ilgilidir.

Sayfa veya görünümlerden bir bileşeni render etmek için Bileşen Etiket Yardımcısı'nı kullanın.

Durum bilgisi olan etkileşimli bileşenleri oluştur

Durum bilgisi tutan etkileşimli bileşenler bir Razor sayfa veya görünüme eklenebilir.

Sayfa veya görünüm oluşturulduğunda:

  • Bileşen, sayfa veya görüntü ile birlikte önceden işlenir.
  • İlk bileşen durumu önceden işlemleme için kullanıldığında kaybolur.
  • Yeni bileşen durumu, SignalR bağlantısı kurulduğunda oluşturulur.

Aşağıdaki Razor sayfa bir Counter bileşeni sunar:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Etkileşimsiz bileşenleri işlemek

Aşağıdaki Razor sayfasında, Counter bileşeni, bir form kullanılarak belirtilen başlangıç değeriyle statik olarak oluşturulmuştur. Bileşen statik olarak işlendiği için etkileşimli değildir.

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Bileşen ad alanları

Projenin Razor bileşenlerini barındıran özel bir klasör kullanırken, klasörü temsil eden ad alanını sayfaya/görünüme veya _ViewImports.cshtml dosyasına ekleyin. Aşağıdaki örnekte:

  • Bileşenler projenin Components klasöründe depolanır.
  • {APP NAMESPACE} yer tutucu, projenin ad alanıdır. Components klasörün adını temsil eder.
@using {APP NAMESPACE}.Components

_ViewImports.cshtml dosyası, bir Pages Pages uygulamasının Razor klasöründe veya bir MVC uygulamasının Views klasöründe bulunur.

Daha fazla bilgi için ASP.NET Core Razor bileşenleri bölümüne bakın.

Önceden render edilmiş durum boyutu ve SignalR mesaj boyutu sınırı

Önceden işlenmiş büyük bir durum boyutu, Blazor'nin SignalR devre mesaj boyutu sınırını aşabilir ve bu da şu sonuçlara yol açar:

  • SignalR devresi, Circuit host not initialized. hatasıyla istemcide başlatılamıyor.
  • İstemcideki yeniden bağlantı kullanıcı arayüzü, devre başarısız olduğunda görünür. Kurtarma mümkün değil.

Sorunu çözmek için aşağıdaki yaklaşımlardan herhangi birini kullanın:

  • Prerendere edilmiş duruma koyduğunuz veri miktarını azaltın.
  • Mesaj boyutu sınırını artır. UYARI: Limiti artırmak, Hizmet Aksatma (DoS) saldırısı riskini artırabilir.

Ek Blazor Server kaynaklar

Razor bileşenleri, Razor Sayfalar veya MVC uygulamalarına entegre edilebilir. Sayfa veya görünüm oluşturulduğunda, bileşenler aynı anda önceden renderlanabilir.

Önceden renderlama, arama motorlarının sayfa sıralamasını hesaplamak için kullanabileceği içeriği ilk HTTP yanıtı ile renderlayarak Arama Motoru Optimizasyonunu (SEO) geliştirebilir.

Projenin yapılandırılmasından sonra, projenin gereksinimlerine bağlı olarak aşağıdaki bölümlerdeki talimatları kullanın:

Yapılandırma

Mevcut bir Razor Pages veya MVC uygulaması, sayfalara veya görünümlere Razor bileşenlerini entegre edebilir.

  1. Projenin yerleşim dosyasında:

    • Aşağıdaki <base> etiketini <head> öğesine Pages/Shared/_Layout.cshtml içinde ekleyin (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

      + <base href="~/" />

      Önceki örnekte, href değeri (uygulama temel yolu), uygulamanın kök URL yolunda (/) bulunduğunu varsayar. Uygulama bir alt uygulama ise, ASP.NET Core Blazor uygulama temel yolu'na bakın.

    • <script> betiği için, blazor.server.js işleme bölümünden hemen önce bir Scripts etiketi ekleyin.

      Pages/Shared/_Layout.cshtml (Razor Sayfalar) veya Views/Shared/_Layout.cshtml (MVC):

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Çerçeve, uygulamaya blazor.server.js betiğini ekler. Uygulamaya blazor.server.js betik dosyasını manuel olarak eklemeye gerek yok.

  2. Projeye, kök klasöre aşağıdaki içeriğe sahip bir "imports" dosyası ekleyin. Proje ad alanı için {APP NAMESPACE} yer tutucusunu değiştirin.

    _Imports.razor:

    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  3. Blazor Server içinde Startup.ConfigureServices hizmetini kaydedin.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Blazor Hub uç noktasını app.UseEndpoints uç noktalarına (Startup.Configure) ekleyin.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Bileşenleri herhangi bir sayfa veya görünüme entegre edin. Örneğin, bir Counter bileşeni projenin Shared klasörüne ekleyin.

    Pages/Shared/Counter.razor (Razor Sayfalar) veya Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Sayfalar:

    Bir Index Pages uygulaması projesinin Razor sayfasına, Counter bileşeninin ad alanını ekleyin ve bileşeni sayfaya yerleştirin. Index sayfası yüklendiğinde, Counter bileşeni sayfada önceden oluşturulmuş olur. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Pages/Index.cshtml:

    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    Önceki örnekte, {APP NAMESPACE} yer tutucusunu uygulamanın ad alanı ile değiştirin.

    MVC

    Bir MVC uygulamasının projesindeki Index görünümüne, Counter bileşeninin ad alanını ekleyin ve bileşeni görünüme yerleştirin. Index görünümü yüklendiğinde, Counter bileşeni sayfada önceden işlenir. Aşağıdaki örnekte, `{APP NAMESPACE}` yer tutucusunu projenin ad alanıyla değiştirin.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

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

Daha fazla bilgi için, Bir sayfadan veya görüntüden bileşenleri oluşturma bölümüne bakın.

Razor sayfalı bir uygulamada yönlendirilebilir bileşenler kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

Yönlendirilebilir Razor bileşenlerini Razor Pages uygulamalarında desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içerikle bir _Host sayfa ekleyin.

    Pages/_Host.cshtml:

    @page "/blazor"
@{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Startup.Configure uç noktalarında, Startup.cs için, _Host sayfası için düşük öncelikli bir rota ekleyin ve bu rotayı son uç nokta olarak belirleyin.

    endpoints.MapFallbackToPage("/_Host");

    Aşağıdaki örnek, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satırı göstermektedir.

    app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

  5. Yönlendirilebilir bileşenleri projeye ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

MVC uygulamasında yönlendirilebilir bileşenleri kullanın

Bu bölüm, kullanıcı taleplerinden doğrudan yönlendirilebilir bileşenlerin eklenmesiyle ilgilidir.

MVC uygulamalarında yönlendirilebilir Razor bileşenlerini desteklemek için:

  1. Yönergeleri Yapılandırma bölümündeki gibi takip et.

  2. Proje köküne aşağıdaki içeriğe sahip bir App bileşeni ekleyin.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Projeye aşağıdaki içeriğe sahip bir _Host görünüm ekleyin.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Bileşenler, düzenleri için paylaşılan _Layout.cshtml dosyasını kullanır.

    RenderMode bileşenin App ayarlamalarını yapılandırır.

    • Sayfaya önceden işlenmiş olarak yerleştirilmiştir.
    • Sayfa üzerinde statik HTML olarak mı oluşturuluyor yoksa bir kullanıcı aracısından Blazor uygulamasını başlatmak için gerekli bilgileri mi içeriyor.

    Daha fazla bilgi için, parametrelerin geçirilmesi ve RenderMode yapılandırma dahil, ASP.NET Core'da Bileşen Etiket Yardımcısı'na bakın.

  4. Denetleyiciye bir eylem ekleyin.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure uç noktalarında Startup.cs için, kontrolör eylemi için _Host görünümünü döndüren düşük öncelikli bir rota ekleyin.

    endpoints.MapFallbackToController("Blazor", "Home");

    Aşağıdaki örnek, tipik bir uygulamanın uç nokta yapılandırmasında eklenen satırı göstermektedir.

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Yönlendirilebilir bileşenleri projeye ekleyin.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Projeyi çalıştırın ve RoutableCounter konumundaki yönlendirilebilir /routable-counter bileşenine gidin.

Daha fazla bilgi için ad alanları konusunda, Bileşen ad alanları bölümüne bakın.

Bir sayfa veya görünümden bileşenleri işlemleştirin

Bu bölüm, doğrudan kullanıcı isteklerinden yönlendirilemeyen bileşenlerin sayfalara veya görünümlere eklenmesiyle ilgilidir.

Sayfa veya görünümlerden bir bileşeni render etmek için Bileşen Etiket Yardımcısı'nı kullanın.

Durum bilgisi olan etkileşimli bileşenleri oluştur

Durum bilgisi tutan etkileşimli bileşenler bir Razor sayfa veya görünüme eklenebilir.

Sayfa veya görünüm oluşturulduğunda:

  • Bileşen, sayfa veya görüntü ile birlikte önceden işlenir.
  • İlk bileşen durumu önceden işlemleme için kullanıldığında kaybolur.
  • Yeni bileşen durumu, SignalR bağlantısı kurulduğunda oluşturulur.

Aşağıdaki Razor sayfa bir Counter bileşeni sunar:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Etkileşimsiz bileşenleri işlemek

Aşağıdaki Razor sayfasında, Counter bileşeni, bir form kullanılarak belirtilen başlangıç değeriyle statik olarak oluşturulmuştur. Bileşen statik olarak işlendiği için etkileşimli değildir.

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Daha fazla bilgi için ASP.NET Core'da Bileşen Etiketi Yardımcısı bölümüne bakın.

Bileşen ad alanları

Projenin Razor bileşenlerini barındıran özel bir klasör kullanırken, klasörü temsil eden ad alanını sayfaya/görünüme veya _ViewImports.cshtml dosyasına ekleyin. Aşağıdaki örnekte:

  • Bileşenler projenin Components klasöründe depolanır.
  • {APP NAMESPACE} yer tutucu, projenin ad alanıdır. Components klasörün adını temsil eder.
@using {APP NAMESPACE}.Components

_ViewImports.cshtml dosyası, bir Pages Pages uygulamasının Razor klasöründe veya bir MVC uygulamasının Views klasöründe bulunur.

Daha fazla bilgi için ASP.NET Core Razor bileşenleri bölümüne bakın.

Önceden render edilmiş durum boyutu ve SignalR mesaj boyutu sınırı

Önceden işlenmiş büyük bir durum boyutu, Blazor'nin SignalR devre mesaj boyutu sınırını aşabilir ve bu da şu sonuçlara yol açar:

  • SignalR devresi, Circuit host not initialized. hatasıyla istemcide başlatılamıyor.
  • İstemcideki yeniden bağlantı kullanıcı arayüzü, devre başarısız olduğunda görünür. Kurtarma mümkün değil.

Sorunu çözmek için aşağıdaki yaklaşımlardan herhangi birini kullanın:

  • Prerendere edilmiş duruma koyduğunuz veri miktarını azaltın.
  • Mesaj boyutu sınırını artır. UYARI: Limiti artırmak, Hizmet Aksatma (DoS) saldırısı riskini artırabilir.

Ek Blazor Server kaynaklar

  • Last updated on