Aracılığıyla paylaş

ASP.NET Core Blazor proje yapısı

  • Makale

Not

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

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede, proje şablonundan Blazor oluşturulan bir Blazor uygulamayı oluşturan dosya ve klasörler açıklanmaktadır.

Blazor Web Uygulaması

Blazor Web Uygulaması proje şablonu: blazor

Blazor Web Uygulaması proje şablonu, hem sunucu tarafı işlenen hem de istemci tarafı işlenen herhangi bir web kullanıcı arabirimi stili oluşturmak için bileşenleri kullanmak Razor için tek bir başlangıç noktası sağlar. Mevcut Blazor Server ve Blazor WebAssembly barındırma modellerinin güçlü yönlerini sunucu tarafı işleme, akış işleme, gelişmiş gezinti ve form işleme ve bileşen temelinde veya Blazor WebAssembly kullanarak Blazor Server etkileşim ekleme özelliğiyle birleştirir.

Uygulama oluşturma işleminde hem istemci tarafı işleme (CSR) hem de etkileşimli sunucu tarafı işleme (etkileşimli SSR) seçilirse, proje şablonu Etkileşimli Otomatik işleme modunu kullanır. .NET uygulama paketi ve çalışma zamanı tarayıcıya indirilirken otomatik işleme modu başlangıçta etkileşimli SSR kullanır. .NET WebAssembly çalışma zamanı etkinleştirildikten sonra işleme CSR'ye geçer.

Varsayılan olarak, Blazor Web Uygulaması şablonu tek bir proje kullanarak hem statik hem de etkileşimli sunucu tarafı işlemeyi etkinleştirir. Etkileşimli WebAssembly işlemeyi de etkinleştirirseniz, proje WebAssembly tabanlı bileşenleriniz için ek bir istemci projesi (.Client) içerir. İstemci projesinden oluşturulan çıkış tarayıcıya indirilir ve istemcide yürütülür. Etkileşimli WebAssembly veya Etkileşimli Otomatik işleme modlarını kullanan bileşenler projede .Client bulunmalıdır.

Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

  • Sunucu projesi:

    • Components Klasör:

      • Layout klasör: Aşağıdaki düzen bileşenlerini ve stil sayfalarını içerir:

        • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
        • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
        • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen kullanıcıya NavLink şu anda hangi bileşenin görüntülendiğini gösterir.
        • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.

      • Pages klasör: Uygulamanın yönlendirilebilir sunucu tarafı Razor bileşenlerini (.razor) içerir. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdakileri içerir:

        • Counterbileşen (Counter.razor): Sayaç sayfasını uygular.
        • Errorbileşen (Error.razor): Hata sayfasını uygular.
        • Home component (Home.razor): Sayfayı Home uygular.
        • Weatherbileşen (Weather.razor): Hava durumu tahmin sayfasını uygular.

      • App component (App.razor): HTML <head> işaretlemesi, Routes bileşeni ve Blazor<script> etiketi ile uygulamanın kök bileşeni. Kök bileşen, uygulamanın yükleyebilen ilk bileşenidir.

      • Routes component (Routes.razor): Bileşeni kullanarak yönlendirmeyi Router ayarlar. İstemci tarafı etkileşimli bileşenler için, Router bileşen tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

      • _Imports.razor: Ad alanlarının yönergeleri gibi@using, sunucu tarafından işlenen uygulama bileşenlerine ().razor dahil edilmesi gereken ortak Razor yönergeleri içerir.

    • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

      Not

      Profil, http dosyadaki profilin https önüne yer alır launchSettings.json . Bir uygulama .NET CLI ile çalıştırıldığında, bulunan ilk profil olduğu httpiçin uygulama bir HTTP uç noktasında çalışır. Profil sırası, Linux ve macOS kullanıcıları için HTTPS'yi benimseme geçişini kolaylaştırır. veya seçeneğini komuta geçirmek -lp https--launch-profile https zorunda kalmadan uygulamayı .NET CLI ile başlatmayı dotnet run tercih ediyorsanız, profili dosyadaki profilin httpshttp üzerine yerleştirmeniz yeterlidir.

    • wwwroot klasör: Uygulamanın genel statik varlıklarını içeren sunucu projesinin Web Kök klasörü.

    • Program.cs file: Sunucu projesinin ASP.NET Core web uygulaması konağını ayarlayan ve hizmet kayıtları, yapılandırma, günlüğe kaydetme ve istek işleme işlem hattı dahil olmak üzere uygulamanın başlangıç mantığını içeren giriş noktası.

    • Uygulama ayarları dosyaları (appsettings.Development.json, appsettings.json): Sunucu projesi için yapılandırma ayarlarını sağlayın.

  • İstemci projesi (.Client):

    • Pages klasör: Uygulamanın yönlendirilebilir istemci tarafı Razor bileşenlerini (.razor) içerir. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon, Sayaç sayfasını uygulayan bileşenleri (Counter.razor) içerirCounter.

      Ana proje standart bir ASP.NET Core projesi olduğundan, projenin bileşen .Client klasörü yapısı Web Uygulamasının ana proje klasörü yapısından Blazor farklıdır. Ana proje, ile ilgisi olmayan ASP.NET Core projeleri için diğer varlıkları dikkate Blazoralmalıdır.

      Proje .Client yalnızca bir Blazor projedir ve ASP.NET Core'un özellikler ve belirtimler dışındakiBlazor özellikleriyle tümleştirilmesi gerekmez, bu nedenle daha az karmaşık bir bileşen klasör yapısı kullanır. Ancak, projede .Client istediğiniz bileşen klasörü yapısını kullanabilirsiniz. dilerseniz projedeki ana projenin .Client bileşen klasörü düzenini yansıtabilirsiniz. Bileşenleri proje şablonunun kullandığından farklı klasörlere taşırsanız, ad alanlarının düzen dosyaları gibi varlıklar için ayarlamalar gerektirebileceğini unutmayın.

    • İstemci tarafı projesi için yapılandırma ayarları sağlayan uygulama ayarları dosyaları (appsettings.Development.json, appsettings.json) dahil olmak üzere uygulamanın genel statik varlıklarını içeren istemci tarafı projesi için Web Kök klasörü.

    • Program.cs file: İstemci tarafı projesinin WebAssembly konağını ayarlayan ve hizmet kayıtları, yapılandırma, günlüğe kaydetme ve istek işleme işlem hattı gibi projenin başlangıç mantığını içeren giriş noktası.

    • _Imports.razor: Ad alanlarının yönergeleri gibi @using WebAssembly tarafından işlenen uygulama bileşenlerine ().razor dahil edilmesi gereken ortak Razor yönergeleri içerir.

Ek seçenekler yapılandırıldığında, Web Uygulaması proje şablonundan oluşturulan bir Blazor uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Blazor Server

Blazor Server proje şablonları: blazorserver, blazorserver-empty

Şablonlar, Blazor Server bir Blazor Server uygulama için ilk dosyaları ve dizin yapısını oluşturur:

  • blazorserver Şablon kullanılırsa, uygulama aşağıdakilerle doldurulur:
    • Hava durumu tahmin hizmetinden (WeatherForecastService) veri yükleyen bir FetchData bileşenin tanıtım kodu ve bir Counter bileşenle kullanıcı etkileşimi.
    • Bootstrap ön uç araç seti.
  • blazorserver-empty Şablon kullanılırsa, uygulama tanıtım kodu ve Bootstrap olmadan oluşturulur.

Proje yapısı:

  • Dataklasör: Uygulamanın FetchData bileşenine WeatherForecast örnek hava durumu verileri sağlayan sınıfını ve uygulamasını WeatherForecastService içerir.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) ve bir Blazor Server uygulamanın kök Razor sayfasını içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdakileri içerir:

    • _Host.cshtml: Sayfa olarak Razor uygulanan uygulamanın kök sayfası:
      • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
      • Konak sayfası, kök App bileşenin (App.razor) nerede işlendiğini belirtir.
    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • Error bileşen (Error.razor): Uygulamada işlenmeyen bir özel durum oluştuğunda işlenir.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwroot klasör: Uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • appsettings.jsonve ortam uygulaması ayarları dosyaları: Uygulama için yapılandırma ayarlarını sağlayın.

  • Program.cs: Uygulamanın ASP.NET Core ana bilgisayarını ayarlayan ve hizmet kayıtları ve istek işleme işlem hattı yapılandırması dahil olmak üzere uygulamanın başlangıç mantığını içeren giriş noktası:

    • Uygulamanın bağımlılık ekleme (DI) hizmetlerini belirtir. Hizmetler çağrılarak AddServerSideBlazoreklenir ve WeatherForecastService örnek FetchData bileşen tarafından kullanılmak üzere hizmet kapsayıcısına eklenir.
    • Uygulamanın istek işleme işlem hattını yapılandırıyor:
      • MapBlazorHub , tarayıcıyla gerçek zamanlı bağlantı için bir uç nokta ayarlamak üzere çağrılır. Bağlantı, uygulamalara gerçek zamanlı web işlevselliği eklemeye yönelik bir çerçeve olan ile SignalRoluşturulur.
      • MapFallbackToPage("/_Host") uygulamanın (Pages/_Host.cshtml) kök sayfasını ayarlamak ve gezintiyi etkinleştirmek için çağrılır.

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor Server uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Blazor Server proje şablonu: blazorserver

Şablon, Blazor Server bir Blazor Server uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, kayıtlı bir hizmetten WeatherForecastServiceveri yükleyen bir FetchData bileşenin tanıtım koduyla ve bir bileşenle kullanıcı etkileşimiyle Counter doldurulur.

  • Dataklasör: Uygulamanın FetchData bileşenine WeatherForecast örnek hava durumu verileri sağlayan sınıfını ve uygulamasını WeatherForecastService içerir.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) ve bir Blazor Server uygulamanın kök Razor sayfasını içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdakileri içerir:

    • _Host.cshtml: Sayfa olarak Razor uygulanan uygulamanın kök sayfası:
      • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
      • Konak sayfası, kök App bileşenin (App.razor) nerede işlendiğini belirtir.
    • _Layout.cshtml: Uygulamanın kök sayfasının _Host.cshtml düzen sayfası.
    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • Error bileşen (Error.razor): Uygulamada işlenmeyen bir özel durum oluştuğunda işlenir.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwroot klasör: Uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • appsettings.jsonve ortam uygulaması ayarları dosyaları: Uygulama için yapılandırma ayarlarını sağlayın.

  • Program.cs: Uygulamanın ASP.NET Core ana bilgisayarını ayarlayan ve hizmet kayıtları ve istek işleme işlem hattı yapılandırması dahil olmak üzere uygulamanın başlangıç mantığını içeren giriş noktası:

    • Uygulamanın bağımlılık ekleme (DI) hizmetlerini belirtir. Hizmetler çağrılarak AddServerSideBlazoreklenir ve WeatherForecastService örnek FetchData bileşen tarafından kullanılmak üzere hizmet kapsayıcısına eklenir.
    • Uygulamanın istek işleme işlem hattını yapılandırıyor:
      • MapBlazorHub , tarayıcıyla gerçek zamanlı bağlantı için bir uç nokta ayarlamak üzere çağrılır. Bağlantı, uygulamalara gerçek zamanlı web işlevselliği eklemeye yönelik bir çerçeve olan ile SignalRoluşturulur.
      • MapFallbackToPage("/_Host") uygulamanın (Pages/_Host.cshtml) kök sayfasını ayarlamak ve gezintiyi etkinleştirmek için çağrılır.

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor Server uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Blazor Server proje şablonu: blazorserver

Şablon, Blazor Server bir Blazor Server uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, kayıtlı bir hizmetten WeatherForecastServiceveri yükleyen bir FetchData bileşenin tanıtım koduyla ve bir bileşenle kullanıcı etkileşimiyle Counter doldurulur.

  • Dataklasör: Uygulamanın FetchData bileşenine WeatherForecast örnek hava durumu verileri sağlayan sınıfını ve uygulamasını WeatherForecastService içerir.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) ve bir Blazor Server uygulamanın kök Razor sayfasını içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdakileri içerir:

    • _Host.cshtml: Sayfa olarak Razor uygulanan uygulamanın kök sayfası:
      • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
      • Konak sayfası, kök App bileşenin (App.razor) nerede işlendiğini belirtir.
    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • Error bileşen (Error.razor): Uygulamada işlenmeyen bir özel durum oluştuğunda işlenir.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwroot klasör: Uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • appsettings.jsonve ortam uygulaması ayarları dosyaları: Uygulama için yapılandırma ayarlarını sağlayın.

  • Program.cs: Uygulamanın ASP.NET Core konasını ayarlayan giriş noktası.

  • Startup.cs: Uygulamanın başlangıç mantığını içerir. Startup sınıfı iki yöntem tanımlar:

    • ConfigureServices: Uygulamanın bağımlılık ekleme (DI) hizmetlerini yapılandırıyor. Hizmetler çağrılarak AddServerSideBlazoreklenir ve WeatherForecastService örnek FetchData bileşen tarafından kullanılmak üzere hizmet kapsayıcısına eklenir.
    • Configure: Uygulamanın istek işleme işlem hattını yapılandırıyor:
      • MapBlazorHub , tarayıcıyla gerçek zamanlı bağlantı için bir uç nokta ayarlamak üzere çağrılır. Bağlantı, uygulamalara gerçek zamanlı web işlevselliği eklemeye yönelik bir çerçeve olan ile SignalRoluşturulur.
      • MapFallbackToPage("/_Host") uygulamanın (Pages/_Host.cshtml) kök sayfasını ayarlamak ve gezintiyi etkinleştirmek için çağrılır.

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor Server uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Blazor Server proje şablonu: blazorserver

Şablon, Blazor Server bir Blazor Server uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, kayıtlı bir hizmetten WeatherForecastServiceveri yükleyen bir FetchData bileşenin tanıtım koduyla ve bir bileşenle kullanıcı etkileşimiyle Counter doldurulur.

  • Dataklasör: Uygulamanın FetchData bileşenine WeatherForecast örnek hava durumu verileri sağlayan sınıfını ve uygulamasını WeatherForecastService içerir.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) ve bir Blazor Server uygulamanın kök Razor sayfasını içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdakileri içerir:

    • _Host.cshtml: Sayfa olarak Razor uygulanan uygulamanın kök sayfası:
      • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
      • Konak sayfası, kök App bileşenin (App.razor) nerede işlendiğini belirtir.
    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • Error bileşen (Error.razor): Uygulamada işlenmeyen bir özel durum oluştuğunda işlenir.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwroot klasör: Uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • appsettings.jsonve ortam uygulaması ayarları dosyaları: Uygulama için yapılandırma ayarlarını sağlayın.

  • Program.cs: Uygulamanın ASP.NET Core konasını ayarlayan giriş noktası.

  • Startup.cs: Uygulamanın başlangıç mantığını içerir. Startup sınıfı iki yöntem tanımlar:

    • ConfigureServices: Uygulamanın bağımlılık ekleme (DI) hizmetlerini yapılandırıyor. Hizmetler çağrılarak AddServerSideBlazoreklenir ve WeatherForecastService örnek FetchData bileşen tarafından kullanılmak üzere hizmet kapsayıcısına eklenir.
    • Configure: Uygulamanın istek işleme işlem hattını yapılandırıyor:
      • MapBlazorHub , tarayıcıyla gerçek zamanlı bağlantı için bir uç nokta ayarlamak üzere çağrılır. Bağlantı, uygulamalara gerçek zamanlı web işlevselliği eklemeye yönelik bir çerçeve olan ile SignalRoluşturulur.
      • MapFallbackToPage("/_Host") uygulamanın (Pages/_Host.cshtml) kök sayfasını ayarlamak ve gezintiyi etkinleştirmek için çağrılır.

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor Server uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Bağımsız Blazor WebAssembly

Tek başına Blazor WebAssembly proje şablonu: blazorwasm

Şablon, Blazor WebAssembly tek başına Blazor WebAssembly bir uygulama için ilk dosyaları ve dizin yapısını oluşturur:

  • blazorwasm Şablon kullanılırsa, uygulama aşağıdakilerle doldurulur:
    • Statik varlıktan (weather.json) veri yükleyen bir Weather bileşenin tanıtım kodu ve bir Counter bileşenle kullanıcı etkileşimi.
    • Bootstrap ön uç araç seti.
  • Şablon, blazorwasm örnek sayfalar ve stil olmadan da oluşturulabilir.

Proje yapısı:

  • Layout klasör: Aşağıdaki düzen bileşenlerini ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdaki bileşenleri içerir:

    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.
    • Weather bileşen (Weather.razor): Hava Durumu sayfasını uygular.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

    Not

    Profil, http dosyadaki profilin https önüne yer alır launchSettings.json . Bir uygulama .NET CLI ile çalıştırıldığında, bulunan ilk profil olduğu httpiçin uygulama bir HTTP uç noktasında çalışır. Profil sırası, Linux ve macOS kullanıcıları için HTTPS'yi benimseme geçişini kolaylaştırır. veya seçeneğini komuta geçirmek -lp https--launch-profile https zorunda kalmadan uygulamayı .NET CLI ile başlatmayı dotnet run tercih ediyorsanız, profili dosyadaki profilin httpshttp üzerine yerleştirmeniz yeterlidir.

  • wwwrootklasör: Yapılandırma ayarları ve örnek hava durumu verileri (sample-data/weather.json) için ortam uygulaması ayarları dosyaları dahil olmak üzere appsettings.json uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü. Web index.html sayfası, HTML sayfası olarak uygulanan uygulamanın kök sayfasıdır:

    • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
    • Sayfa, kök App bileşenin nerede işlendiğini belirtir. Bileşen, dom öğesinin div konumunda ( idapp<div id="app">Loading...</div>ile işlenir.

  • Program.cs: Uygulamanın WebAssembly konağını ayarlayan giriş noktası:

    • Bileşen App , uygulamanın kök bileşenidir. BileşenApp, kök bileşen koleksiyonuna divbuilder.RootComponents.Add<App>("#app")(<div id="app">Loading...</div>wwwroot/index.htmliçinde) sahip idapp DOM öğesi olarak belirtilir.
    • Hizmetler eklenir ve yapılandırılır (örneğin, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor WebAssembly uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Blazor WebAssembly

Blazor WebAssembly proje şablonları: blazorwasm, blazorwasm-empty

Şablonlar, Blazor WebAssembly bir Blazor WebAssembly uygulama için ilk dosyaları ve dizin yapısını oluşturur:

  • blazorwasm Şablon kullanılırsa, uygulama aşağıdakilerle doldurulur:
    • Statik varlıktan (weather.json) veri yükleyen bir FetchData bileşenin tanıtım kodu ve bir Counter bileşenle kullanıcı etkileşimi.
    • Bootstrap ön uç araç seti.
  • blazorwasm-empty Şablon kullanılırsa, uygulama tanıtım kodu ve Bootstrap olmadan oluşturulur.

Proje yapısı:

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdaki bileşenleri içerir:

    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPromptcomponent () (SurveyPrompt.razor.NET 7 veya önceki sürümlerinde ASP.NET Core): Blazor anket bileşeni.

  • wwwrootklasör: Yapılandırma ayarları için ve ortam uygulaması ayarları dosyaları dahil olmak üzere appsettings.json uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü. Web index.html sayfası, HTML sayfası olarak uygulanan uygulamanın kök sayfasıdır:

    • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
    • Sayfa, kök App bileşenin nerede işlendiğini belirtir. Bileşen, dom öğesinin div konumunda ( idapp<div id="app">Loading...</div>ile işlenir.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • Program.cs: Uygulamanın WebAssembly konağını ayarlayan giriş noktası:

    • Bileşen App , uygulamanın kök bileşenidir. BileşenApp, kök bileşen koleksiyonuna divbuilder.RootComponents.Add<App>("#app")(<div id="app">Loading...</div>wwwroot/index.htmliçinde) sahip idapp DOM öğesi olarak belirtilir.
    • Hizmetler eklenir ve yapılandırılır (örneğin, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor WebAssembly uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Barındırılan Blazor WebAssembly bir çözüm aşağıdaki ASP.NET Core projelerini içerir:

  • "Client": Uygulama Blazor WebAssembly .
  • "Server": Uygulama ve hava durumu verilerini istemcilere Blazor WebAssembly sunan bir uygulama.
  • "Shared": Ortak sınıfları, yöntemleri ve kaynakları koruyan bir proje.

Çözüm, Visual Studio'daki proje şablonundanBlazor WebAssembly, ASP.NET Çekirdek Barındırılanonay kutusu seçili olarak veya .NET CLI dotnet new blazorwasm komutu kullanılarak seçeneği kullanılarak -ho|--hosted oluşturulur. Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Araçlar.

Barındırılan Blazor bir Webassembly çözümündeki istemci tarafı uygulamasının proje yapısı ("Client" proje), tek başına Blazor WebAssembly bir uygulamanın proje yapısıyla aynıdır. Barındırılan Blazor WebAssembly çözümdeki ek dosyalar:

  • "Server" projesi, "" projesinin FetchData bileşenineClient hava durumu verilerini döndüren bir hava durumu tahmin denetleyicisi Controllers/WeatherForecastController.cs içerir.
  • "" projesinde "Shared" veServer "Client" projeleri için hava durumu verilerini temsil eden bir hava durumu tahmin sınıfı WeatherForecast.cs bulunur.

Blazor WebAssembly

Blazor WebAssembly proje şablonu: blazorwasm

Şablon, Blazor WebAssembly bir Blazor WebAssembly uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, statik bir varlıktan weather.jsonveri yükleyen bir FetchData bileşenin tanıtım kodu ve bir bileşenle kullanıcı etkileşimi ile Counter doldurulur.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdaki bileşenleri içerir:

    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwrootklasör: Yapılandırma ayarları için ve ortam uygulaması ayarları dosyaları dahil olmak üzere appsettings.json uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü. Web index.html sayfası, HTML sayfası olarak uygulanan uygulamanın kök sayfasıdır:

    • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
    • Sayfa, kök App bileşenin nerede işlendiğini belirtir. Bileşen, dom öğesinin div konumunda ( idapp<div id="app">Loading...</div>ile işlenir.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • Program.cs: Uygulamanın WebAssembly konağını ayarlayan giriş noktası:

    • Bileşen App , uygulamanın kök bileşenidir. BileşenApp, kök bileşen koleksiyonuna divbuilder.RootComponents.Add<App>("#app")(<div id="app">Loading...</div>wwwroot/index.htmliçinde) sahip idapp DOM öğesi olarak belirtilir.
    • Hizmetler eklenir ve yapılandırılır (örneğin, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor WebAssembly uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Barındırılan Blazor WebAssembly bir çözüm aşağıdaki ASP.NET Core projelerini içerir:

  • "Client": Uygulama Blazor WebAssembly .
  • "Server": Uygulama ve hava durumu verilerini istemcilere Blazor WebAssembly sunan bir uygulama.
  • "Shared": Ortak sınıfları, yöntemleri ve kaynakları koruyan bir proje.

Çözüm, Visual Studio'daki proje şablonundanBlazor WebAssembly, ASP.NET Çekirdek Barındırılanonay kutusu seçili olarak veya .NET CLI dotnet new blazorwasm komutu kullanılarak seçeneği kullanılarak -ho|--hosted oluşturulur. Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Araçlar.

Barındırılan Blazor bir Webassembly çözümündeki istemci tarafı uygulamasının proje yapısı ("Client" proje), tek başına Blazor WebAssembly bir uygulamanın proje yapısıyla aynıdır. Barındırılan Blazor WebAssembly çözümdeki ek dosyalar:

  • "Server" projesi, "" projesinin FetchData bileşenineClient hava durumu verilerini döndüren bir hava durumu tahmin denetleyicisi Controllers/WeatherForecastController.cs içerir.
  • "" projesinde "Shared" veServer "Client" projeleri için hava durumu verilerini temsil eden bir hava durumu tahmin sınıfı WeatherForecast.cs bulunur.

Blazor WebAssembly

Blazor WebAssembly proje şablonu: blazorwasm

Şablon, Blazor WebAssembly bir Blazor WebAssembly uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, statik bir varlıktan weather.jsonveri yükleyen bir FetchData bileşenin tanıtım kodu ve bir bileşenle kullanıcı etkileşimi ile Counter doldurulur.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdaki bileşenleri içerir:

    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri ve stil sayfalarını içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • MainLayout.razor.css: Uygulamanın ana düzeni için stil sayfası.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • NavMenu.razor.css: Uygulamanın gezinti menüsü için stil sayfası.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwrootklasör: Yapılandırma ayarları için ve ortam uygulaması ayarları dosyaları dahil olmak üzere appsettings.json uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü. Web index.html sayfası, HTML sayfası olarak uygulanan uygulamanın kök sayfasıdır:

    • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
    • Sayfa, kök App bileşenin nerede işlendiğini belirtir. Bileşen, dom öğesinin div konumunda ( idapp<div id="app">Loading...</div>ile işlenir.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • Program.cs: Uygulamanın WebAssembly konağını ayarlayan giriş noktası:

    • Bileşen App , uygulamanın kök bileşenidir. BileşenApp, kök bileşen koleksiyonuna divbuilder.RootComponents.Add<App>("#app")(<div id="app">Loading...</div>wwwroot/index.htmliçinde) sahip idapp DOM öğesi olarak belirtilir.
    • Hizmetler eklenir ve yapılandırılır (örneğin, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor WebAssembly uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Barındırılan Blazor WebAssembly bir çözüm aşağıdaki ASP.NET Core projelerini içerir:

  • "Client": Uygulama Blazor WebAssembly .
  • "Server": Uygulama ve hava durumu verilerini istemcilere Blazor WebAssembly sunan bir uygulama.
  • "Shared": Ortak sınıfları, yöntemleri ve kaynakları koruyan bir proje.

Çözüm, Visual Studio'daki proje şablonundanBlazor WebAssembly, ASP.NET Çekirdek Barındırılanonay kutusu seçili olarak veya .NET CLI dotnet new blazorwasm komutu kullanılarak seçeneği kullanılarak -ho|--hosted oluşturulur. Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Araçlar.

Barındırılan Blazor bir Webassembly çözümündeki istemci tarafı uygulamasının proje yapısı ("Client" proje), tek başına Blazor WebAssembly bir uygulamanın proje yapısıyla aynıdır. Barındırılan Blazor WebAssembly çözümdeki ek dosyalar:

  • "Server" projesi, "" projesinin FetchData bileşenineClient hava durumu verilerini döndüren bir hava durumu tahmin denetleyicisi Controllers/WeatherForecastController.cs içerir.
  • "" projesinde "Shared" veServer "Client" projeleri için hava durumu verilerini temsil eden bir hava durumu tahmin sınıfı WeatherForecast.cs bulunur.

Blazor WebAssembly

Blazor WebAssembly proje şablonu: blazorwasm

Şablon, Blazor WebAssembly bir Blazor WebAssembly uygulama için ilk dosyaları ve dizin yapısını oluşturur. Uygulama, statik bir varlıktan weather.jsonveri yükleyen bir FetchData bileşenin tanıtım kodu ve bir bileşenle kullanıcı etkileşimi ile Counter doldurulur.

  • Pagesklasör: Uygulamanın yönlendirilebilir Razor bileşenlerini (.razor) içerirBlazor. Her sayfanın yolu yönergesi @page kullanılarak belirtilir. Şablon aşağıdaki bileşenleri içerir:

    • Counter bileşen (Counter.razor): Sayaç sayfasını uygular.
    • FetchData bileşen (FetchData.razor): Veri getirme sayfasını uygular.
    • Index component (Index.razor): Sayfayı Home uygular.

  • Propertiesklasör: Dosyada launchSettings.json geliştirme ortamı yapılandırmasını tutar.

  • Shared klasör: Aşağıdaki paylaşılan bileşenleri içerir:

    • MainLayout bileşen (MainLayout.razor): Uygulamanın düzen bileşeni.
    • NavMenu bileşen (NavMenu.razor): Kenar çubuğu gezintisi uygular. Diğer Razor bileşenlere NavLink gezinti bağlantılarını işleyen bileşenini ()NavLink içerir. Bileşen NavLink , bileşeni yüklendiğinde seçili durumu otomatik olarak gösterir ve bu da kullanıcının şu anda hangi bileşenin görüntülendiğini anlamasına yardımcı olur.
    • SurveyPrompt bileşen (SurveyPrompt.razor): Blazor anket bileşeni.

  • wwwrootklasör: Yapılandırma ayarları için ve ortam uygulaması ayarları dosyaları dahil olmak üzere appsettings.json uygulamanın genel statik varlıklarını içeren uygulamanın Web Kök klasörü. Web index.html sayfası, HTML sayfası olarak uygulanan uygulamanın kök sayfasıdır:

    • Uygulamanın herhangi bir sayfası istendiğinde, bu sayfa işlenir ve yanıtta döndürülür.
    • Sayfa, kök App bileşenin nerede işlendiğini belirtir. Bileşen, DOM öğesinin app (<app>Loading...</app>) konumunda işlenir.

  • _Imports.razor: Ad alanları için yönergeler gibi @using uygulamanın bileşenlerine (.razor ) eklenecek ortak Razor yönergeleri içerir.

  • App.razor: Bileşeni kullanarak Router istemci tarafı yönlendirmeyi ayarlayan uygulamanın kök bileşeni. Bileşen, Router tarayıcı gezintisini durdurur ve istenen adresle eşleşen sayfayı işler.

  • Program.cs: Uygulamanın WebAssembly konağını ayarlayan giriş noktası:

    • Bileşen App , uygulamanın kök bileşenidir. BileşenApp, kök bileşen koleksiyonuna appbuilder.RootComponents.Add<App>("app")() DOM öğesi (<app>Loading...</app> içindewwwroot/index.html) olarak belirtilir.
    • Hizmetler eklenir ve yapılandırılır (örneğin, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor WebAssembly uygulamada ek dosya ve klasörler görüntülenebilir. Örneğin, ASP.NET Core Identity ile uygulama oluşturmak, kimlik doğrulaması ve yetkilendirme özellikleri için ek varlıklar içerir.

Barındırılan Blazor WebAssembly bir çözüm aşağıdaki ASP.NET Core projelerini içerir:

  • "Client": Uygulama Blazor WebAssembly .
  • "Server": Uygulama ve hava durumu verilerini istemcilere Blazor WebAssembly sunan bir uygulama.
  • "Shared": Ortak sınıfları, yöntemleri ve kaynakları koruyan bir proje.

Çözüm, Visual Studio'daki proje şablonundanBlazor WebAssembly, ASP.NET Çekirdek Barındırılanonay kutusu seçili olarak veya .NET CLI dotnet new blazorwasm komutu kullanılarak seçeneği kullanılarak -ho|--hosted oluşturulur. Daha fazla bilgi için bkz . ASP.NET Core Blazoriçin Araçlar.

Barındırılan Blazor bir Webassembly çözümündeki istemci tarafı uygulamasının proje yapısı ("Client" proje), tek başına Blazor WebAssembly bir uygulamanın proje yapısıyla aynıdır. Barındırılan Blazor WebAssembly çözümdeki ek dosyalar:

  • "Server" projesi, "" projesinin FetchData bileşenineClient hava durumu verilerini döndüren bir hava durumu tahmin denetleyicisi Controllers/WeatherForecastController.cs içerir.
  • "" projesinde "Shared" veServer "Client" projeleri için hava durumu verilerini temsil eden bir hava durumu tahmin sınıfı WeatherForecast.cs bulunur.

Betiğin Blazor konumu

Betik Blazor , ASP.NET Core paylaşılan çerçevesine eklenmiş bir kaynaktan sunulur.

Blazor Web Uygulamasında, Blazor betik dosyasında bulunurComponents/App.razor:

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

Bir Blazor Server uygulamada betik Blazor dosyasında bulunur Pages/_Host.cshtml :

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

Bir Blazor Server uygulamada betik Blazor dosyasında bulunur Pages/_Host.cshtml :

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

Bir Blazor Server uygulamada betik Blazor dosyasında bulunur Pages/_Layout.cshtml :

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

Bir Blazor Server uygulamada betik Blazor dosyasında bulunur Pages/_Host.cshtml :

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

Bir Blazor WebAssembly uygulamada, Blazor betik içeriği dosyada wwwroot/index.html bulunur:

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

ve <body> içeriğinin <head> konumu

Bir Blazor Web Uygulamasında <head> ve <body> içerik dosyada Components/App.razor bulunur.

Bir Blazor Server uygulamada ve <head><body> içerik dosyada Pages/_Host.cshtml bulunur.

Bir Blazor Server uygulamada ve <head><body> içerik dosyada Pages/_Layout.cshtml bulunur.

Bir Blazor Server uygulamada ve <head><body> içerik dosyada Pages/_Host.cshtml bulunur.

Bir Blazor WebAssembly uygulamada ve <head><body> içerik dosyada wwwroot/index.html bulunur.

İkili Blazor Server/Blazor WebAssembly uygulama

Uygulama veya uygulama olarak çalışabilen bir Blazor ServerBlazor WebAssembly uygulama oluşturmak için bir yaklaşım, tüm uygulama mantığını ve bileşenlerini birRazorsınıf kitaplığına (RCL) yerleştirmek ve ayrı Blazor Server ve Blazor WebAssembly projelerden RCL'ye başvurmaktır. Uygulamaları barındırma modeline göre farklılık gösteren yaygın hizmetler için, RCL'de hizmet arabirimlerini tanımlayın ve ve Blazor WebAssembly projelerindeki Blazor Server hizmetleri uygulayın.

Ek kaynaklar