ASP.NET Core Blazor başlatma

Başlangıç Blazor işlemi, yer tutucunun Blazor olduğu * betik ()blazor.*.js aracılığıyla otomatik ve zaman uyumsuzdur:

• web için Blazor Web App
• server uygulama Blazor Server için
• webassembly uygulama Blazor WebAssembly için

Başlangıç Blazor işlemi, yer tutucunun Blazor olduğu * betik ()blazor.*.js aracılığıyla otomatik ve zaman uyumsuzdur:

• server uygulama Blazor Server için
• webassembly uygulama Blazor WebAssembly için

Blazor Web App:

• Etiketine Blazor<script> bir autostart="false" öznitelik ve değer ekleyin.
• Etiketin arkasına ve kapanış </body> etiketinin Blazor<script> içine çağıran Blazor.start() bir betik yerleştirin.
• Statik sunucu tarafı işleme (statik SSR) seçeneklerini özelliğine ssr yerleştirin.
• Sunucu tarafı Blazor-SignalR bağlantı hattı seçeneklerini özelliğine circuit yerleştirin.
• İstemci tarafı WebAssembly seçeneklerini özelliğine webAssembly yerleştirin.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ssr: {
      ...
    },
    circuit: {
      ...
    },
    webAssembly: {
      ...
    }
  });
  ...
</script>

Tek başına Blazor WebAssembly ve Blazor Server:

JavaScript başlatıcıları

JavaScript (JS) başlatıcıları, Blazor uygulaması yüklenmeden önce ve yüklendikten sonra mantık yürütür. JS başlatıcıları aşağıdaki senaryolarda yararlıdır:

• Blazor uygulamasının yüklenme şeklini özelleştirme.
• Blazor başlatılmadan önce kitaplıkları başlatma.
• Blazor ayarlarını yapılandırma.

JS başlatıcılar derleme işleminin bir parçası olarak algılanır ve otomatik olarak içeri aktarılır. Razor sınıf kitaplıkları (RCL) kullanılırken, JS başlatıcılarının kullanılması genellikle uygulamadan betik işlevlerini el ile tetikleme gereğini ortadan kaldırır.

JS başlatıcısı tanımlamak için projeye {NAME}.lib.module.js adlı bir JS modülü ekleyin; burada {NAME} yer tutucusu derleme adı, kitaplık adı ve paket tanımlayıcısıdır. Dosyayı normalde wwwroot klasörü olan projenin web köküne yerleştirin.

s için Blazor Web App:

• beforeWebStart(options): Başlamadan önce çağrılır Blazor Web App . Örneğin, yükleme işlemini, beforeWebStart günlük düzeyini ve diğer seçenekleri özelleştirmek için kullanılır. Blazor Web seçeneklerini (options) alır.
• afterWebStarted(blazor): Tüm beforeWebStart vaatler çözümlendikten sonra çağrılır. Örneğin, afterWebStarted olay dinleyicilerini ve özel olay türlerini kaydetmek Blazor için kullanılabilir. ÖrnekBlazor, bağımsız değişken (blazor) olarak geçirilirafterWebStarted.
• beforeServerStart(options, extensions): İlk Sunucu çalışma zamanı başlatılmadan önce çağrılır. SignalR Yayımlama sırasında eklenen bağlantı hattı başlatma seçeneklerini (options) ve tüm uzantıları (extensions) alır.
• afterServerStarted(blazor): İlk Etkileşimli Sunucu çalışma zamanı başlatıldıktan sonra çağrılır.
• beforeWebAssemblyStart(options, extensions): Interactive WebAssembly çalışma zamanı başlatılmadan önce çağrılır. Blazor Yayımlama sırasında eklenen seçenekleri (options) ve uzantıları (extensions) alır. Örneğin seçenekler özel bir önyükleme kaynağı yükleyicisinin kullanımını belirtebilir.
• afterWebAssemblyStarted(blazor): Interactive WebAssembly çalışma zamanı başlatıldıktan sonra çağrılır.

<script>
  Blazor.start({ enableClassicInitializers: true });
</script>

, Blazor WebAssemblyve Blazor Hybrid uygulamaları içinBlazor Server:

• beforeStart(options, extensions): Blazor başlatılmadan önce çağrılır. Örneğin beforeStart yükleme işlemini, günlük düzeyini ve barındırma modeline özgü diğer seçenekleri özelleştirmek için kullanılır.
  • İstemci tarafı, beforeStart yayımlama sırasında eklenen seçenekleri (options) ve uzantıları (extensions) alırBlazor. Örneğin seçenekler özel bir önyükleme kaynağı yükleyicisinin kullanımını belirtebilir.
  • Sunucu tarafı, beforeStart bağlantı hattı başlatma seçeneklerini (options) alırSignalR.
  • içinde BlazorWebViewhiçbir seçenek geçirilmemiş.
• afterStarted(blazor): Blazor JS'den çağrı almaya hazır olduktan sonra çağrılır. Örneğin afterStarted, JS interop çağrıları yaparak ve özel öğeleri kaydederek kitaplıkları başlatmak için kullanılır. ÖrnekBlazor, bağımsız değişken (blazor) olarak geçirilirafterStarted.

Ek .NET WebAssembly çalışma zamanı geri çağırmaları:

• onRuntimeConfigLoaded(config): Önyükleme yapılandırması indirildiğinde çağrılır. Uygulamanın çalışma zamanı başlamadan önce parametreleri (config) değiştirmesine izin verir (parametresi MonoConfig :dotnet.d.ts

  export function onRuntimeConfigLoaded(config) {
    // Sample: Enable startup diagnostic logging when the URL contains 
    // parameter debug=1
    const params = new URLSearchParams(location.search);
    if (params.get("debug") == "1") {
      config.diagnosticTracing = true;
    }
  }
  

• onRuntimeReady({ getAssemblyExports, getConfig }): .NET WebAssembly çalışma zamanı başlatıldıktan sonra çağrılır (parametresi RuntimeAPI :dotnet.d.ts

  export function onRuntimeReady({ getAssemblyExports, getConfig }) {
    // Sample: After the runtime starts, but before Main method is called, 
    // call [JSExport]ed method.
    const config = getConfig();
    const exports = await getAssemblyExports(config.mainAssemblyName);
    exports.Sample.Greet();
  }
  

Her iki geri çağırma da bir Promisedöndürebilir ve başlatma devam etmeden önce söz beklenebilir.

Dosya adı için:

• JS Başlatıcılar projede statik varlık olarak kullanılıyorsa, yer tutucunun uygulamanın derleme adı olduğu {ASSEMBLY NAME} biçimini {ASSEMBLY NAME}.lib.module.jskullanın. Örneğin derleme adı BlazorSample olan bir projede dosyayı BlazorSample.lib.module.js olarak adlandırın. Dosyayı uygulamanın wwwroot klasörüne yerleştirin.
• JS Başlatıcılar bir RCL'den kullanılıyorsa, yer tutucunun projenin kitaplık adı veya paket tanımlayıcısı olduğu {LIBRARY NAME/PACKAGE ID} biçimini {LIBRARY NAME/PACKAGE ID}.lib.module.jskullanın. Örneğin paket tanımlayıcısı RazorClassLibrary1 olan bir RCL'de dosyayı RazorClassLibrary1.lib.module.js olarak adlandırın. Dosyayı kitaplığın wwwroot klasörüne yerleştirin.

s için Blazor Web App:

Aşağıdaki örnek, ve 'ye beforeWebStart <head> afterWebStartedekleyerek başlatıldıktan önce ve sonra Blazor Web App özel betikleri yükleyen başlatıcıları gösterir:JS

export function beforeWebStart() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterWebStarted() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

Yukarıdaki beforeWebStart örnek yalnızca özel betiğin başlamadan önce Blazor yüklenmesini garanti eder. Betikte beklenen vaatlerin başlamadan önce Blazor yürütülmesini tamamlayacağı garanti etmez.

, Blazor WebAssemblyve Blazor Hybrid uygulamaları içinBlazor Server:

Aşağıdaki örnek, ve 'ye beforeStart <head> afterStartedekleyerek özel betikleri JS başlatmadan önce ve sonra Blazor yükleyen başlatıcıları gösterir:

export function beforeStart(options, extensions) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterStarted(blazor) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

Yukarıdaki beforeStart örnek yalnızca özel betiğin başlamadan önce Blazor yüklenmesini garanti eder. Betikte beklenen vaatlerin başlamadan önce Blazor yürütülmesini tamamlayacağı garanti etmez.

Başlatıcı örnekleri JS için aşağıdaki kaynaklara bakın:

• Statik sunucu tarafı işleme (statik SSR) ile ASP.NET Core Blazor JavaScript
• JavaScript uygulamalarında ve SPA çerçevelerinde bileşenleri kullanma Razor (quoteContainer2örnek)
• ASP.NET Çekirdek Blazor olay işleme (Özel pano yapıştırma olayı örneği)
• ASP.NET Core'da TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturmayı etkinleştirme Blazor Web App
• ASP.NET Core GitHub deposunda Temel Test Uygulaması (BasicTestApp.lib.module.js)

• JavaScript uygulamalarında ve SPA çerçevelerinde bileşenleri kullanma Razor (quoteContainer2örnek)
• ASP.NET Çekirdek Blazor olay işleme (Özel pano yapıştırma olayı örneği)
• ASP.NET Core barındırılan uygulamalar için dağıtım Blazor WebAssembly düzeni
• ASP.NET Core GitHub deposunda Temel Test Uygulaması (BasicTestApp.lib.module.js)

Kitaplıkların belirli bir sırada yüklendiğinden emin olun

özel betikleri <head> beforeStart afterStarted ve öğesine yüklenmesi gereken sırayla ekler.

Aşağıdaki örnek, öncesinde ve script3.js öncesinde script2.js script4.jsyüklenirscript1.js:

export function beforeStart(options, extensions) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script1.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script2.js');
    document.head.appendChild(customScript2);
}

export function afterStarted(blazor) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script3.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script4.js');
    document.head.appendChild(customScript2);
}

Ek modülleri içeri aktarma

Ek modülleri içeri aktarmak için başlatıcılar dosyasındaki üst düzey import deyimleri JS kullanın.

additionalModule.js:

export function logMessage() {
  console.log('logMessage is logging');
}

Başlatıcılar JS dosyasında (.lib.module.js):

import { logMessage } from "/additionalModule.js";

export function beforeStart(options, extensions) {
  ...

  logMessage();
}

Haritayı içeri aktarma

İçeri aktarma eşlemeleri ASP.NET Core ve Blazortarafından desteklenir.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
        switch (type) {
          case 'dotnetjs':
          case 'dotnetwasm':
          case 'timezonedata':
            return `https://cdn.example.com/blazorwebassembly/{VERSION}/${name}`;
        }
      }
    }
  });
</script>

Tek başına Blazor WebAssembly:

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        if (type == 'dotnetjs') {
          return null;
        } else {
          return fetch(defaultUri, {
            cache: 'no-cache',
            integrity: integrity,
            headers: { 'Custom-Header': 'Custom Value' }
          });
        }
      }
    }
  });
</script>

Tek başına Blazor WebAssembly:

Program dosyasında:

Startup.csiçindeStartup.Configure:

Ön kayıt olmadan istemci tarafı geliştirme

Geçiş StaticFileOptions , MapFallbackToFile aşamadaki yanıt üst bilgilerini OnPrepareResponse belirtir.

Sunucu tarafı Program dosyasında:

Startup.csiçindeStartup.Configure:

var staticFileOptions = new StaticFileOptions
{
    OnPrepareResponse = context =>
    {
        context.Context.Response.Headers.Append("Content-Security-Policy", 
            "{POLICY STRING}");
    }
};

...

app.MapFallbackToFile("index.html", staticFileOptions);

İstemci tarafı yükleme ilerleme durumu göstergeleri

Yükleme ilerleme durumu göstergesi, uygulamanın kullanıcılara yüklenmesinin ilerleme durumunu gösterir ve uygulamanın normal yüklendiğini ve yükleme tamamlanana kadar kullanıcının beklemesi gerektiğini gösterir.

Blazor Web App yükleme ilerleme durumu

Uygulamalarda kullanılan Blazor WebAssembly yükleme ilerleme durumu göstergesi, proje şablonundan Blazor Web App oluşturulan bir uygulamada mevcut değildir. Genellikle, ilk yükleme sürelerinin Blazor Web Apphızlı olması için sunucudaki istemci tarafı bileşenlerinden önce gelen etkileşimli WebAssembly bileşenleri için yükleme ilerleme durumu göstergesi tercih edilmez. Karma işleme modu durumları için, çerçeve veya geliştirici kodu da aşağıdaki sorunlardan kaçınmak için dikkatli olmalıdır:

• Aynı işlenen sayfada birden çok yükleme göstergesi gösteriliyor.
• .NET WebAssembly çalışma zamanı yüklenirken önceden yüklenmiş içeriği yanlışlıkla atma.

.NET'in gelecekteki bir sürümü, çerçeve tabanlı bir yükleme ilerleme durumu göstergesi sağlayabilir. Bu arada, özel bir yükleme ilerleme durumu göstergesi ekleyebilirsiniz Blazor Web App.

uygulamada öğesini çağıran OperatingSystem.IsBrowserbir LoadingProgress bileşen .Client oluşturun:

• olduğunda false, paket indirilirken Blazor ve çalışma zamanı istemcide etkinleştirilmeden önce Blazor bir yükleme ilerleme durumu göstergesi görüntüler.
• olduğunda true, istenen bileşenin içeriğini işleyin.

Aşağıdaki gösterimde şablondan Blazor WebAssembly oluşturulan uygulamalarda bulunan yükleme ilerleme durumu göstergesi, şablonun sağladığı stillerin değiştirilmesi de dahil olmak üzere kullanılır. Stiller, bileşen tarafından uygulamanın <head> içeriğine HeadContent yüklenir. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında baş içeriği denetleme.

LoadingProgress.razor:

@if (!OperatingSystem.IsBrowser())
{
    <HeadContent>
        <style>
            .loading-progress {
                position: relative;
                display: block;
                width: 8rem;
                height: 8rem;
                margin: 20vh auto 1rem auto;
            }

                .loading-progress circle {
                    fill: none;
                    stroke: #e0e0e0;
                    stroke-width: 0.6rem;
                    transform-origin: 50% 50%;
                    transform: rotate(-90deg);
                }

                    .loading-progress circle:last-child {
                        stroke: #1b6ec2;
                        stroke-dasharray: 
                            calc(3.142 * var(--blazor-load-percentage, 0%) * 0.8), 
                            500%;
                        transition: stroke-dasharray 0.05s ease-in-out;
                    }

            .loading-progress-text {
                position: relative;
                text-align: center;
                font-weight: bold;
                top: -90px;
            }

                .loading-progress-text:after {
                    content: var(--blazor-load-percentage-text, "Loading");
                }

            code {
                color: #c02d76;
            }
        </style>
    </HeadContent>
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
}
else
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Etkileşimli WebAssembly işlemeyi benimseyen bir bileşende, bileşenin Razor işaretlemesini bileşenle sarmalar LoadingProgress . Aşağıdaki örnek, proje şablonundan Blazor Web App oluşturulan bir uygulamanın bileşeniyle Counter yaklaşımı gösterir.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<LoadingProgress>
    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Blazor WebAssembly uygulama yükleme ilerleme durumu

Proje şablonu, Ölçeklenebilir Vektör Grafikleri (SVG) ve uygulamanın yükleme ilerleme durumunu gösteren metin göstergelerini içerir.

İlerleme göstergeleri, tarafından Blazorsağlanan iki CSS özel özelliği (değişken) kullanılarak HTML ve CSS ile uygulanır:

• --blazor-load-percentage: Yüklenen uygulama dosyalarının yüzdesi.
• --blazor-load-percentage-text: Yüklenen uygulama dosyalarının en yakın tamsayıya yuvarlanan yüzdesi.

Önceki CSS değişkenlerini kullanarak, uygulamanızın stiliyle eşleşen özel ilerleme göstergeleri oluşturabilirsiniz.

Aşağıdaki örnekte:

• resourcesLoaded , uygulama başlatma sırasında yüklenen kaynakların anlık sayısıdır.
• totalResources yüklenecek toplam kaynak sayısıdır.

const percentage = resourcesLoaded / totalResources * 100;
document.documentElement.style.setProperty(
  '--blazor-load-percentage', `${percentage}%`);
document.documentElement.style.setProperty(
  '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);

Varsayılan yuvarlak ilerleme göstergesi, dosyadaki HTML'de wwwroot/index.html uygulanır:

<div id="app">
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
</div>

Varsayılan ilerleme göstergeleri için proje şablonu işaretleme ve stillerini gözden geçirmek için ASP.NET Core başvuru kaynağına bakın:

• wwwroot/index.html
• app.css

Aşağıdaki örnekte, varsayılan yuvarlak ilerleme göstergesi yerine doğrusal ilerleme göstergesinin nasıl uygulandığı gösterilmektedir.

aşağıdaki stilleri içine wwwroot/css/app.cssekleyin:

.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

.linear-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}

CSS değişkeni (var(...)), değerini --blazor-load-percentage scale uygulama dosyalarının yükleme ilerleme durumunu gösteren mavi bir sözde öğenin özelliğine geçirmek için kullanılır. Uygulama yüklendıkça --blazor-load-percentage otomatik olarak güncelleştirilir ve bu da ilerleme göstergesinin görsel gösterimini dinamik olarak değiştirir.

içinde wwwroot/index.html, içindeki varsayılan SVG yuvarlak göstergesini <div id="app">...</div> kaldırın ve aşağıdaki işaretlemeyle değiştirin:

<div class="linear-progress"></div>

.NET WebAssembly çalışma zamanını yapılandırma

Gelişmiş programlama senaryolarında, configureRuntime .NET WebAssembly çalışma zamanını yapılandırmak için çalışma zamanı konak oluşturucusu ile dotnet işlevi kullanılır. Örneğin, dotnet.withEnvironmentVariable şu ortam değişkenlerini ayarlar:

• .NET WebAssembly çalışma zamanını yapılandırıyor.
• C kitaplığının davranışını değiştirir.

İşlev, configureRuntime tarayıcı profil oluşturucu ile tümleştirmeyi etkinleştirmek için de kullanılabilir.

Aşağıdaki örneklerde yer alan ve ortam değişkeni ayarlayan yer tutucular için:

• Yer {BLAZOR SCRIPT} tutucu, betik yolu ve dosya adıdır Blazor . Betiğin konumu için bkz . ASP.NET Core Blazor proje yapısı.
• Yer {NAME} tutucu, ortam değişkeninin adıdır.
• Yer {VALUE} tutucu, ortam değişkeninin değeridir.

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      configureRuntime: dotnet => {
        dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
      }
    }
  });
</script>

Tek başına Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureRuntime: dotnet => {
      dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
    }
  });
</script>

Gelişmiş gezinti ve form işlemeyi devre dışı bırakma

Bu bölüm s için Blazor Web Appgeçerlidir.

Gelişmiş gezinti ve form işlemeyi devre dışı bırakmak için için olarak Blazor.starttrue ayarlayındisableDomPreservation:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

Yukarıdaki örnekte, {BLAZOR SCRIPT} yer tutucu betik yolu ve dosya adıdır Blazor . Betiğin konumu için bkz . ASP.NET Core Blazor proje yapısı.