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.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. 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 App

Blazor Web App proje şablonu: blazor

Proje Blazor Web App ş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 (.razor) 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.

Şablon, Blazor Web App 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.

Ana proje standart bir ASP.NET Core projesi olduğundan, projenin bileşen klasörü .Client yapısı 'nin ana proje klasörü yapısından Blazor Web Appfarklıdır. Ana proje, ile ilgisi olmayan ASP.NET Core projeleri için diğer varlıkları dikkate Blazoralmalıdır. 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.

Bileşenler ve işleme modları hakkında daha fazla bilgi ASP.NET Core Razor bileşenleri ve ASP.NET Core Blazor işleme modları makalelerinde bulunur.

Uygulama oluşturma sırasında seçilen etkileşimli işleme moduna bağlı olarak, Layout klasör klasördeki sunucu projesinde Components veya projenin kökündedir .Client . Klasör aşağıdaki düzen bileşenlerini ve stil sayfalarını içerir:

  • Bileşen MainLayout (MainLayout.razor), uygulamanın düzen bileşenidir.
  • MainLayout.razor.css, uygulamanın ana düzeninin stil sayfasıdır.
  • NavMenu Bileşen (NavMenu.razor) kenar çubuğu gezintisi uygular. Bileşen, diğer bileşenlere yönelik gezinti bağlantılarını işleyen bileşenleri ()NavLink içerirNavLink.Razor 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ünün stil sayfasıdır.

Bileşen Routes (Routes.razor) sunucu projesinde veya projededir .Client ve 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.

Components Sunucu projesinin klasörü, uygulamanın sunucu tarafı Razor bileşenlerini barındırıyor. Paylaşılan bileşenler genellikle klasörün köküne Components yerleştirilirken, düzen ve sayfa bileşenleri genellikle klasörün içindeki Components klasörlere yerleştirilir.

Components/Pages Sunucu projesinin klasörü, uygulamanın yönlendirilebilir sunucu tarafı Razor bileşenlerini içerir. Her sayfanın yolu yönergesi @page kullanılarak belirtilir.

Bileşen (), HTML <head> işaretlemesi, Routes bileşeni ve etiketiyle uygulamanın kök bileşenidirBlazor<script>.App.razorApp Kök bileşen, uygulamanın yükleyebilen ilk bileşenidir.

_Imports.razor Sunucu ve .Client projelerin her birindeki bir dosya, ad alanları için Razor yönergeler gibi @using her iki projenin bileşenleri için ortak Razor yönergeler içerir.

Properties Sunucu projesinin klasörü, dosyada geliştirme ortamı yapılandırmasını barındırıyor launchSettings.json .

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 (veya dotnet run) komutuna geçirmek --launch-profile https -lp https zorunda kalmadan uygulamayı .NET CLI ile başlatmayı dotnet watch tercih ediyorsanız, profili dosyadaki profilin https http üzerine yerleştirmeniz yeterlidir.

wwwroot Sunucu projesinin klasörü, uygulamanın genel statik varlıklarını barındıran sunucu projesinin Web Kök klasörüdür.

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

Sunucu veya projedeki uygulama ayarları dosyaları (appsettings.Development.json, appsettings.json) yapılandırma ayarlarını sağlar..Client Sunucu projesinde, ayarlar dosyaları projenin kökündedir. Projede.Client, ayarlar dosyaları Web Kök klasöründen wwwroot(. ) kullanılır.

Projede .Client :

  • Klasör Pages yönlendirilebilir istemci tarafı Razor bileşenleri içerir. Her sayfanın yolu yönergesi @page kullanılarak belirtilir.

  • klasörwwwroot, uygulamanın genel statik varlıklarını barındıran projenin Web Kök klasörüdür.Client.

  • Dosya Program.cs , projenin WebAssembly konağını ayarlayan giriş noktasıdır ve hizmet kayıtları, yapılandırma, günlük kaydı ve istek işleme işlem hattı gibi projenin başlangıç mantığını içerir.

Ek seçenekler yapılandırıldığında proje şablonundan oluşturulan bir Blazor Web App 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.

Tek başına 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 (veya dotnet run) komutuna geçirmek --launch-profile https -lp https zorunda kalmadan uygulamayı .NET CLI ile başlatmayı dotnet watch tercih ediyorsanız, profili dosyadaki profilin https http ü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 ( id app<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 id app 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 ( id app<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 id app 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ılan onay 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 ( id app<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 id app 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ılan onay 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 ( id app<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 id app 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ılan onay 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ılan onay 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.

içindeBlazor Web AppBlazor, 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

ve Blazor Web App<head> <body> içeriği dosyasında bulunur.Components/App.razor

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 Server Blazor WebAssembly uygulama oluşturmak için bir yaklaşım, tüm uygulama mantığını ve bileşenlerini birRazor sı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