ASP.NET Core Blazor başlatma

Bu makalede uygulama başlatma yapılandırması açıklanmaktadır Blazor .

Sunucu tarafı geliştirme için ASP.NET Core uygulama yapılandırması hakkında genel yönergeler için bkz . ASP.NET Core'da yapılandırma.

Başlangıç işlemi ve yapılandırma

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

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

Betiğin konumu için bkz . ASP.NET Core Blazor proje yapısı.

el ile başlatmak Blazoriçin:

Blazor Web Uygulaması:

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

• 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.
• parametresinde Blazor.start() ek seçenekler sağlayabilirsiniz.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ...
  });
  ...
</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ı.

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.

Web Apps için Blazor :

• beforeWebStart(options): Web Uygulaması başlamadan önce Blazor çağrılır. Ö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.

Not

Eski JS başlatıcılar (beforeStart, afterStarted) bir Blazor Web Uygulamasında varsayılan olarak çağrılmıyor. Eski başlatıcıların seçeneğiyle enableClassicInitializers çalışmasını sağlayabilirsiniz. Ancak, eski başlatıcı yürütme tahmin edilemez.

<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): BlazorJS'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.

Web Apps için Blazor :

Aşağıdaki örnekte, web uygulaması başlatılmadan önce ve sonra Blazor özel betikleri ve afterWebStartedöğesine ekleyerek beforeWebStart<head> yükleyen başlatıcılar gösterilmektedirJS:

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.

Not

MVC ve Razor Pages uygulamaları JS başlatıcılarını otomatik olarak yüklemez. Öte yandan geliştirici kodu, uygulamanın bildirimi getirmek ve JS başlatıcılarının yüklenmesini tetiklemek için bir betik içerebilir.

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 Blazor Web App'te TOTP kimlik doğrulayıcı uygulamaları için QR kodu oluşturmayı etkinleştirme
• ASP.NET Core GitHub deposunda Temel Test Uygulaması (BasicTestApp.lib.module.js)

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

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

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

Aşağıdaki örnek, öncesinde ve script3.js öncesinde script2.jsscript4.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.

Belge hazır olduğunda başlatma Blazor

Aşağıdaki örnek, belge hazır olduğunda başlar Blazor :

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    Blazor.start();
  });
</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ı.

El ile başlatmanın Promise sonucunda elde edeceğiniz zincir

Birlikte çalışma başlatma gibi JS ek görevleri gerçekleştirmek için, el ile Blazor uygulama başlatma işleminden Promise kaynaklanan sonuçlara zincir uygulamak için kullanınthen:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start().then(function () {
    ...
  });
</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ı.

Not

Bir kitaplığın başladıktan sonra Blazor ek görevleri otomatik olarak yürütmesi için JavaScript başlatıcısı kullanın. Başlatıcının JS kullanılması için kitaplığın tüketicisinin çağrıları el ile başlatmaya zincirlemesi JSBlazorgerekmez.

İstemci tarafı önyükleme kaynaklarını yükleme

Bir uygulama tarayıcıda yüklendiğinde, uygulama sunucudan önyükleme kaynaklarını indirir:

• Uygulamayı önyüklemek için JavaScript kodu
• .NET çalışma zamanı ve derlemeleri
• Yerel ayara özgü veriler

Bu önyükleme kaynaklarının API kullanarak nasıl yüklendiğini özelleştirin loadBootResource . loadBootResource işlevi, yerleşik önyükleme kaynağı yükleme mekanizmasını geçersiz kılar. Aşağıdaki senaryolar için kullanın loadBootResource :

• CDN'den saat dilimi verileri veya dotnet.wasmgibi statik kaynakları yükleyin.
• Http isteği kullanarak sıkıştırılmış derlemeleri yükleyin ve sıkıştırılmış içeriklerin sunucudan getirilmelerini desteklemeyen konaklar için istemcide bunların sıkıştırmasını açın.
• Her fetch isteği yeni bir ada yeniden yönlendirerek kaynakları farklı bir ada yönlendirin.

Not

Dış kaynaklar, çıkış noktaları arası kaynak yüklemesine izin vermek için tarayıcılar için gerekli Çıkış Noktaları Arası Kaynak Paylaşımı (CORS) üst bilgilerini döndürmelidir. CDN'ler genellikle varsayılan olarak gerekli üst bilgileri sağlar.

loadBootResource parametreleri aşağıdaki tabloda gösterilir.

Parametre	Açıklama
type	Kaynağın türü. İzin verilen türler şunlardır: assembly, pdb, dotnetjs, dotnetwasmve timezonedata. Yalnızca özel davranışlar için türleri belirtmeniz gerekir. için loadBootResource belirtilmeyen türler, varsayılan yükleme davranışlarına göre çerçeve tarafından yüklenir. Önyükleme dotnetjs kaynağı (dotnet.*.js) varsayılan yükleme davranışı için veya önyükleme kaynağının dotnetjs kaynağı için bir URI döndürmelidirnull.
name	Kaynağın adı.
defaultUri	Kaynağın göreli veya mutlak URI'sini.
integrity	Yanıtta beklenen içeriği temsil eden bütünlük dizesi.

İşlev, loadBootResource yükleme işlemini geçersiz kılmak için bir URI dizesi döndürebilir. Aşağıdaki örnekte, aşağıdaki dosyaları bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework konumundaki bir CDN'den https://cdn.example.com/blazorwebassembly/{VERSION}/sunulur:

• dotnet.*.js
• dotnet.wasm
• Saat dilimi verileri

Yer {TARGET FRAMEWORK} tutucu, hedef çerçeve adıdır (örneğin, net7.0). Yer {VERSION} tutucu, paylaşılan çerçeve sürümüdür (örneğin, 7.0.0).

Blazor Web Uygulaması:

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

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    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>

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

Yalnızca önyükleme kaynaklarının URL'lerinden fazlasını özelleştirmek loadBootResource için işlev doğrudan çağrı fetch yapabilir ve sonucu döndürebilir. Aşağıdaki örnek, giden isteklere özel bir HTTP üst bilgisi ekler. Varsayılan bütünlük denetimi davranışını korumak için parametresini integrity geçirin.

Blazor Web Uygulaması:

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

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    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>

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

işlevi döndürdüğünde loadBootResourcenullBlazor, kaynak için varsayılan yükleme davranışını kullanır. Örneğin, önyükleme kaynağının varsayılan yükleme davranışı için veya önyükleme kaynağının kaynağı için bir URI döndürmesi gerektiğindendotnetjs, önceki kod önyükleme kaynağı () için döndürür nullnull.dotnetjsdotnetjsdotnet.*.js

İşlev loadBootResource ayrıca bir Response söz döndürebilir. Örnek için bkz . ASP.NET Core'u Blazor WebAssemblybarındırma ve dağıtma.

Daha fazla bilgi için bkz . ASP.NET Core Blazor WebAssembly .NET çalışma zamanı ve uygulama paketi önbelleğe alma.

C# kodunda üst bilgileri denetleme

Aşağıdaki yaklaşımları kullanarak C# kodunda başlangıçtaki üst bilgileri denetleyin.

Aşağıdaki örneklerde, csp üst bilgisi aracılığıyla uygulamaya bir İçerik Güvenlik İlkesi (CSP) uygulanır. Yer {POLICY STRING} tutucu, CSP ilke dizesidir.

Sunucu tarafı ve önceden oluşturulmuş istemci tarafı senaryoları

Üst bilgi koleksiyonunu denetlemek için ASP.NET Core Ara Yazılımını kullanın.

Program dosyasında:

app.Use(async (context, next) =>
{
    context.Response.Headers.Append("Content-Security-Policy", "{POLICY STRING}");
    await next();
});

Yukarıdaki örnekte satır içi ara yazılım kullanılır, ancak özel bir ara yazılım sınıfı oluşturabilir ve dosyada Program bir uzantı yöntemiyle ara yazılımı çağırabilirsiniz. Daha fazla bilgi için bkz . Özel ASP.NET Core ara yazılımı yazma.

CSP'ler hakkında daha fazla bilgi için bkz . ASP.NET Core Blazoriçin İçerik Güvenliği İlkesi Zorlama .

İ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 Uygulaması yükleme ilerleme durumu

Uygulamalarda kullanılan Blazor WebAssembly yükleme ilerleme durumu göstergesi, Web Uygulaması proje şablonundan Blazor oluşturulan bir uygulamada mevcut değildir. Genellikle, Web Apps istemci tarafı bileşenlerinin ilk yükleme sürelerini hızlı bir şekilde önlediğinden Blazor , 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.
• WebAssembly çalışma zamanı yüklenirken önceden yüklenmiş içeriği yanlışlıkla atabilirsiniz.

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

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.141 * 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 örnekte, Web Uygulaması proje şablonundan oluşturulan bir uygulamanın bileşeniyle Counter ilgili Blazor yaklaşım gösterilmektedir.

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

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

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

Ortam değişkenini ayarlayan aşağıdaki örneklerde:

• 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 Uygulaması:

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

Not

.NET çalışma zamanı örneğine Çalışma Zamanı API'sini Blazor WebAssembly (Blazor.runtime) kullanarak erişilebilir. Örneğin, uygulamanın derleme yapılandırması kullanılarak Blazor.runtime.runtimeBuildInfo.buildConfigurationelde edilebilir.

.NET WebAssembly çalışma zamanı yapılandırması hakkında daha fazla bilgi için GitHub deposunda çalışma zamanının dotnet/runtime TypeScript tanım dosyasına (dotnet.d.ts) bakın.

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

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

Bu bölüm Web Apps için Blazor geçerlidir.

Gelişmiş gezinti ve form işlemeyi devre dışı bırakmak için için Blazor.startolarak true 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ı.

Ek kaynaklar

• Ortamlar: Uygulamanın ortamını ayarlama
• SignalR (başlangıç yapılandırmasıyla ilgili SignalR bölümleri içerir)
• Genelleştirme ve yerelleştirme: Ile kültürü Blazor.start() statik olarak ayarlama (yalnızca istemci tarafı)
• Konak ve dağıtım: Blazor WebAssembly: Sıkıştırma