struktur proyek ASP.NET Core Blazor

Artikel ini menjelaskan file dan folder yang membentuk aplikasi yang Blazor dihasilkan dari Blazor templat proyek.

Blazor Web App

Blazor Web App templat proyek: blazor

Blazor Web App Templat proyek menyediakan satu titik awal untuk menggunakan Razor komponen (.razor) untuk membangun gaya UI web apa pun, baik sisi server yang dirender maupun sisi klien yang dirender. Ini menggabungkan kekuatan dan dengan penyajian Blazor Server sisi server dan sisi klien, penyajian streaming, navigasi dan penanganan formulir yang ditingkatkan, dan kemampuan untuk menambahkan interaktivitas menggunakan baik Blazor WebAssembly atau Blazor Server berdasarkan per komponen.Blazor WebAssembly

Jika penyajian sisi klien (CSR) dan penyajian sisi server interaktif (SSR interaktif) dipilih pada pembuatan aplikasi, templat proyek menggunakan mode render Otomatis Interaktif. Mode penyajian otomatis awalnya menggunakan SSR interaktif saat bundel aplikasi .NET dan runtime diunduh ke browser. Setelah runtime .NET WebAssembly diaktifkan, penyajian beralih ke CSR.

Templat ini Blazor Web App memungkinkan penyajian sisi server statis dan interaktif menggunakan satu proyek. Jika Anda juga mengaktifkan rendering Interactive WebAssembly, proyek menyertakan proyek klien tambahan (.Client) untuk komponen berbasis WebAssembly Anda. Output bawaan dari proyek klien diunduh ke browser dan dijalankan pada klien. Komponen yang menggunakan mode render Interactive WebAssembly atau Interactive Auto harus berada di .Client proyek.

Struktur .Client folder komponen proyek berbeda dari Blazor Web Appstruktur folder proyek utama karena proyek utama adalah proyek ASP.NET Core standar. Proyek utama harus memperhitungkan Blazoraset lain untuk proyek ASP.NET Core yang tidak terkait dengan . Anda dipersilakan untuk menggunakan struktur folder komponen apa pun yang Anda inginkan dalam .Client proyek. Anda bebas mencerminkan tata letak folder komponen proyek utama dalam .Client proyek jika Anda mau. Perhatikan bahwa namespace mungkin memerlukan penyesuaian untuk aset seperti file tata letak jika Anda memindahkan komponen ke folder yang berbeda dari yang digunakan templat proyek.

Informasi selengkapnya tentang komponen dan mode render ditemukan di Razor Core dan Blazor render inti ASP.NET.

Berdasarkan mode render interaktif yang dipilih pada pembuatan aplikasi, Layout folder berada di proyek server di Components folder atau di akar .Client proyek. Folder berisi komponen tata letak dan lembar gaya berikut:

• Komponen MainLayout (MainLayout.razor) adalah komponen tata letak aplikasi.
• MainLayout.razor.css adalah lembar gaya yang ditempatkan bersama (berdekatan dengan komponen) untuk tata letak utama aplikasi.
• Komponen NavMenu (NavMenu.razor) mengimplementasikan navigasi bilah samping. Komponen ini mencakup NavLink komponen (NavLink), yang merender tautan navigasi ke komponen lain Razor . Komponen NavLink menunjukkan kepada pengguna komponen mana yang saat ini ditampilkan.
• NavMenu.razor.css adalah lembar gaya yang dikolokasi untuk menu navigasi aplikasi.
• Komponen mencerminkan ReconnectModal status koneksi sisi server di UI dan disertakan ketika mode render interaktif aplikasi adalah Server Interaktif atau Interaktif Otomatis. Untuk informasi selengkapnya, lihat panduan ASP.NET CoreBlazorSignalR.
• ReconnectModal.razor.css adalah lembar gaya yang dikolokasi untuk ReconnectModal komponen.
• ReconnectModal.razor.js adalah file JavaScript yang dikolokasikan untuk ReconnectModal komponen.

Komponen Routes (Routes.razor) berada di proyek server atau .Client proyek dan menyiapkan perutean menggunakan Router komponen. Untuk komponen interaktif sisi klien, Router komponen mencegat navigasi browser dan merender halaman yang cocok dengan alamat yang diminta.

Folder Components proyek server menyimpan komponen sisi Razor server aplikasi. Komponen bersama sering ditempatkan di akar Components folder, sementara komponen tata letak dan halaman biasanya ditempatkan dalam folder dalam Components folder.

Folder Components/Pages proyek server berisi komponen sisi Razor server yang dapat dirutekan aplikasi. Rute untuk setiap halaman ditentukan menggunakan direktif @page .

Komponen App (App.razor) adalah komponen akar aplikasi dengan markup HTML <head> , Routes komponen, dan Blazor<script> tag. Komponen akar adalah komponen pertama yang dimuat aplikasi.

File _Imports.razor di setiap server dan .Client proyek mencakup arahan umum Razor untuk Razor komponen dari salah satu proyek, seperti @using direktif untuk namespace layanan.

Folder Properties proyek server menyimpan konfigurasi lingkungan pengembangan dalam launchSettings.json file.

Catatan

Profil http mendahului https profil dalam launchSettings.json file. Saat aplikasi dijalankan dengan .NET CLI, aplikasi berjalan di titik akhir HTTP karena profil pertama yang ditemukan adalah http. Urutan profil memudahkan transisi mengadopsi HTTPS untuk pengguna Linux dan macOS. Jika Anda lebih suka memulai aplikasi dengan .NET CLI tanpa harus meneruskan -lp https opsi atau --launch-profile https ke dotnet watch perintah (atau dotnet run), cukup letakkan https profil di atas http profil dalam file.

Folder wwwroot proyek server adalah folder Akar Web untuk proyek server yang menyimpan aset statis publik aplikasi.

File Program.cs proyek server adalah titik masuk proyek yang menyiapkan host aplikasi web ASP.NET Core dan berisi logika startup aplikasi, termasuk pendaftaran layanan, konfigurasi, pengelogan, dan alur pemrosesan permintaan:

• Layanan untuk komponen Razor ditambahkan dengan memanggil AddRazorComponents. AddInteractiveServerComponents menambahkan layanan untuk mendukung penyajian komponen Server Interaktif. AddInteractiveWebAssemblyComponents menambahkan layanan untuk mendukung penyajian komponen Interactive WebAssembly.
• MapRazorComponents menemukan komponen yang tersedia dan menentukan komponen akar untuk aplikasi (komponen pertama yang dimuat), yang secara default adalah App komponen (App.razor). AddInteractiveServerRenderMode mengonfigurasi penyajian sisi server interaktif (SSR interaktif) untuk aplikasi. AddInteractiveWebAssemblyRenderMode mengonfigurasi mode render Interactive WebAssembly untuk aplikasi.

File pengaturan aplikasi (appsettings.Development.json, appsettings.json) di server atau .Client proyek menyediakan pengaturan konfigurasi. Dalam proyek server, file pengaturan berada di akar proyek. .Client Dalam proyek, file pengaturan digunakan dari folder Akar Web, wwwroot.

.Client Dalam proyek:

• Folder Pages berisi komponen sisi Razor klien yang dapat dirutekan. Rute untuk setiap halaman ditentukan menggunakan direktif @page .

• Folder wwwroot adalah folder Akar Web untuk .Client proyek yang menyimpan aset statis publik aplikasi.

• File Program.cs adalah titik masuk proyek yang menyiapkan host WebAssembly dan berisi logika startup proyek, termasuk pendaftaran layanan, konfigurasi, pengelogan, dan alur pemrosesan permintaan.

File dan folder tambahan mungkin muncul di aplikasi yang dihasilkan dari Blazor Web App templat proyek saat opsi tambahan dikonfigurasi. Misalnya, membuat aplikasi dengan ASP.NET Core Identity menyertakan aset tambahan untuk fitur autentikasi dan otorisasi.

Berdiri Sendiri Blazor WebAssembly

Templat proyek mandiri Blazor WebAssembly : blazorwasm

Blazor WebAssembly Templat membuat file awal dan struktur direktori untuk aplikasi mandiriBlazor WebAssembly:

• blazorwasm Jika templat digunakan, aplikasi diisi dengan yang berikut ini:
  • Kode demonstrasi untuk Weather komponen yang memuat data dari aset statis (weather.json) dan interaksi pengguna dengan Counter komponen.
  • Toolkit frontend Bootstrap .
• blazorwasm Templat juga dapat dihasilkan tanpa halaman sampel dan gaya.

Struktur proyek:

• Layout folder: Berisi komponen tata letak dan lembar gaya berikut:
  • MainLayoutkomponen (MainLayout.razor): Komponen tata letak aplikasi.
  • MainLayout.razor.css: Lembar gaya untuk tata letak utama aplikasi.
  • NavMenu komponen (NavMenu.razor): Mengimplementasikan navigasi bilah samping. NavLink Termasuk komponen (NavLink), yang merender tautan navigasi ke komponen lainRazor. Komponen NavLink secara otomatis menunjukkan status yang dipilih ketika komponennya dimuat, yang membantu pengguna memahami komponen mana yang saat ini ditampilkan.
  • NavMenu.razor.css: Lembar gaya untuk menu navigasi aplikasi.

• Pages folder: Berisi komponen aplikasi yang dapat dirutekan BlazorRazor (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup komponen berikut:
  • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
  • Index component (Index.razor): Mengimplementasikan Home halaman.
  • Weather komponen (Weather.razor): Mengimplementasikan halaman Cuaca.

• _Imports.razor: Mencakup arahan umum Razor untuk disertakan dalam komponen aplikasi (.razor), seperti @using arahan untuk namespace.

• App.razor: Komponen akar aplikasi yang menyiapkan perutean sisi klien menggunakan Router komponen . Komponen Router mencegat navigasi browser dan merender halaman yang cocok dengan alamat yang diminta.

• Properties folder: Menyimpan konfigurasi lingkungan pengembangan dalam launchSettings.json file.

  Catatan

  Profil http mendahului https profil dalam launchSettings.json file. Saat aplikasi dijalankan dengan .NET CLI, aplikasi berjalan di titik akhir HTTP karena profil pertama yang ditemukan adalah http. Urutan profil memudahkan transisi mengadopsi HTTPS untuk pengguna Linux dan macOS. Jika Anda lebih suka memulai aplikasi dengan .NET CLI tanpa harus meneruskan -lp https opsi atau --launch-profile https ke dotnet watch perintah (atau dotnet run), cukup letakkan https profil di atas http profil dalam file.

• wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi, termasuk appsettings.json dan file pengaturan aplikasi lingkungan untuk pengaturan konfigurasi dan contoh data cuaca (sample-data/weather.json). Halaman index.html web adalah halaman akar aplikasi yang diimplementasikan sebagai halaman HTML:

  • Ketika setiap halaman aplikasi awalnya diminta, halaman ini dirender dan dikembalikan dalam respons.
  • Halaman menentukan tempat komponen akar App dirender. Komponen dirender di lokasi div elemen DOM dengan id dari app (<div id="app">Loading...</div>).

• Program.cs: Titik masuk aplikasi yang menyiapkan host WebAssembly:

  • Komponen App adalah komponen akar aplikasi. Komponen App ditentukan sebagai div elemen DOM dengan id dari app (<div id="app">Loading...</div> dalam wwwroot/index.html) ke koleksi komponen akar (builder.RootComponents.Add<App>("#app")).
  • Layanan ditambahkan dan dikonfigurasi (misalnya, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

File dan folder tambahan mungkin muncul di aplikasi yang dihasilkan dari Blazor WebAssembly templat proyek saat opsi tambahan dikonfigurasi. Misalnya, membuat aplikasi dengan ASP.NET Core Identity menyertakan aset tambahan untuk fitur autentikasi dan otorisasi.

Blazor Lokasi skrip

Skrip Blazor disajikan sebagai aset web statis dengan pemadatan dan sidik jari otomatis. Untuk informasi selengkapnya, lihat ASP.NET Core Blazor file statis.

Blazor Web AppDalam , Blazor skrip terletak di Components/App.razor file:

<script src="@Assets["_framework/blazor.web.js"]"></script>

Di aplikasi Blazor Server , Blazor skrip terletak di Pages/_Host.cshtml file:

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

Untuk aplikasi Blazor Web App atau Blazor Server , proyek harus berisi setidaknya satu Razor file komponen (.razor) untuk secara otomatis menyertakan Blazor skrip saat aplikasi diterbitkan. Jika proyek tidak berisi setidaknya satu Razor komponen, atur RequiresAspNetWebAssets properti MSBuild ke true dalam file proyek aplikasi untuk menyertakan Blazor skrip:

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

Di aplikasi Blazor WebAssembly , Blazor konten skrip terletak di wwwroot/index.html file:

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

Saat aplikasi diterbitkan, {fingerprint} tempat penampung secara otomatis diganti dengan hash unik untuk penghitungan cache.

<head> Lokasi dan <body> konten

Blazor Web AppDalam , <head> dan <body> konten terletak di Components/App.razor file .

Di aplikasi Blazor WebAssembly , <head> dan <body> konten terletak di wwwroot/index.html file.

Sumber daya tambahan

• Alat untuk ASP.NET Core Blazor
• Model hosting Blazor ASP.NET Core
• Gambaran umum API
• repositori GitHub contoh (Blazordotnet/blazor-samples) (cara mengunduh)