ASP.NET Core Blazor proje yapısı

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. ve'nin Blazor ServerBlazor WebAssembly güçlü yönlerini sunucu tarafı ve istemci tarafı işleme, akış işleme, gelişmiş gezinti ve form işleme ile bileşen başına veya Blazor Server kullanarak Blazor WebAssembly etkileşim ekleme özelliğini 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şenleribulunur.

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üzeni için bileşenle bitişik olan 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üne atanmış stil sayfasıdır.
• Bileşen, ReconnectModal kullanıcı arabirimindeki sunucu tarafı bağlantı durumunu yansıtır ve uygulamanın etkileşimli işleme modu Etkileşimli Sunucu veya Etkileşimli Otomatik olduğunda eklenir. Daha fazla bilgi için bkz. ASP.NET Core BlazorSignalR kılavuzu.
• ReconnectModal.razor.css, bileşenin birlikte bulunan stil sayfasıdırReconnectModal.
• ReconnectModal.razor.js bileşeni için ReconnectModal birlikte bulunan JavaScript dosyası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.

moniker range=">= aspnetcore-10.0"

Bileşen NotFound (NotFound.razor) bir istek yolu için içerik bulunamadığında görüntülenecek bir Bulunamadı sayfası uygular. Daha fazla bilgi için bkz. ASP.NET Çekirdek Blazor gezintisi.

moniker-end

Bileşen (), HTML App işaretlemesi, App.razor bileşeni ve etiketiyle uygulamanın kök bileşenidir<head>Routes.Blazor<script> 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 Razor her iki projenin bileşenleri için ortak @using yönergeler içerir.

Properties Sunucu projesinin klasörü, dosyada geliştirme ortamı yapılandırmasını.

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 -lp https) komutuna geçirmek --launch-profile httpsdotnet watch zorunda kalmadan uygulamayı .NET CLI ile başlatmayı dotnet run tercih ediyorsanız, profili dosyadaki profilin httpshttp ü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:

• Razor bileşenlerine yönelik hizmetler, AddRazorComponents çağrılarak eklenir. AddInteractiveServerComponents Etkileşimli Sunucu bileşenlerinin işlenmesini desteklemek için hizmetler ekler. AddInteractiveWebAssemblyComponents Etkileşimli WebAssembly bileşenlerinin işlenmesini desteklemek için hizmetler ekler.
• MapRazorComponents kullanılabilir bileşenleri bulur ve varsayılan olarak App bileşen () olan uygulamanın kök bileşenini (yüklenen ilk bileşenApp.razor) belirtir. AddInteractiveServerRenderMode uygulama için etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) yapılandırıyor. AddInteractiveWebAssemblyRenderMode uygulama için Interactive WebAssembly işleme modunu yapılandırıyor.

Sunucu veya projedeki uygulama ayarları dosyaları (appsettings.Development.json, appsettings.json) yapılandırma ayarlarını.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.

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) veri yükleyen bir weather.json 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 NavLink bileşenlere ()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ı.

etiket-sonu

moniker range=">= aspnetcore-10.0"

• Pagesklasör: Uygulamanın yönlendirilebilir Blazor bileşenlerini (Razor) içerir.razor. 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.
  • NotFound bileşen (NotFound.razor): İstek yolu için içerik bulunamadığında görüntülenecek bir Bulunamadı sayfası uygular. Daha fazla bilgi için bkz. ASP.NET Çekirdek Blazor gezintisi.

moniker-sonu

moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"

• Pagesklasör: Uygulamanın yönlendirilebilir Blazor bileşenlerini (Razor) içerir.razor. 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.

moniker-bitişi

moniker range=">= aspnetcore-8.0"

• _Imports.razor: Ad alanları için yönergeler gibi Razor uygulamanın bileşenlerine (.razor ) eklenecek ortak @using 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 geliştirme ortamı yapılandırmasını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 -lp https) komutuna geçirmek --launch-profile httpsdotnet watch 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 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 divid(app<div id="app">Loading...</div>içinde) sahip wwwroot/index.htmlbuilder.RootComponents.Add<App>("#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.

Betiğin Blazor konumu

Blazor betiği, otomatik sıkıştırma ve iz bırakma ile statik bir web varlığı olarak sunulur. Daha fazla bilgi için bkz. ASP.NET Core Blazor statik dosyaları.

içindeBlazor Web AppBlazor, betik dosyasında bulunurComponents/App.razor:

<script src="@Assets["_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 Web App veya Blazor Server uygulama için, uygulama yayımlandığında betiği otomatik olarak eklemek Razor için projenin en az bir .razor bileşen dosyası (Blazor) içermesi gerekir. Proje en az bir Razor bileşen içermiyorsa, uygulamanın proje dosyasındaki MSBuild özelliğini RequiresAspNetWebAssets öğesini true olacak şekilde ayarlayın ki Blazor betiği dahil edilsin.

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

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

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

Uygulama yayımlandığında {fingerprint} yer tutucu, önbellek temizleme için otomatik olarak benzersiz bir karma ile değiştirilir.

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

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

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

Ek kaynaklar

• ASP.NET Core için araçlar Blazor
• ASP.NET Core Blazor barındırma modelleri
• API'lere genel bakış
• Blazorörnek GitHub deposu (dotnet/blazor-samples) (nasıl indirilir)