Bagikan melalui

struktur proyek ASP.NET Core Blazor

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

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 model yang ada Blazor Server dan Blazor WebAssembly hosting dengan penyajian sisi server, penyajian streaming, navigasi dan penanganan formulir yang ditingkatkan, dan kemampuan untuk menambahkan interaktivitas menggunakan baik Blazor Server atau Blazor WebAssembly berdasarkan per komponen.

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 ASP.NET komponen Core Razor dan artikel mode render inti Blazor 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 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 untuk menu navigasi aplikasi.

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:

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.

Blazor Server

Blazor Server templat proyek: blazorserver, blazorserver-empty

Templat Blazor Server membuat file awal dan struktur direktori untuk aplikasi Blazor Server :

  • blazorserver Jika templat digunakan, aplikasi diisi dengan yang berikut ini:
    • Kode demonstrasi untuk FetchData komponen yang memuat data dari layanan prakiraan cuaca (WeatherForecastService) dan interaksi pengguna dengan Counter komponen.
    • Toolkit frontend Bootstrap .
  • blazorserver-empty Jika templat digunakan, aplikasi dibuat tanpa kode demonstrasi dan Bootstrap.

Struktur proyek:

  • Data folder: Berisi WeatherForecast kelas dan implementasi WeatherForecastService yang menyediakan contoh data cuaca ke komponen aplikasi FetchData .

  • Pagesfolder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor) dan halaman Blazor Server akar Razor aplikasi. Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup yang berikut ini:

    • _Host.cshtml: Halaman akar aplikasi yang diimplementasikan sebagai Razor Halaman:
      • Ketika setiap halaman aplikasi awalnya diminta, halaman ini dirender dan dikembalikan dalam respons.
      • Halaman Host menentukan tempat komponen akar App (App.razor) dirender.
    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • Error komponen (Error.razor): Dirender saat pengecualian yang tidak tertangani terjadi di aplikasi.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi.

  • _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.

  • appsettings.json dan file pengaturan aplikasi lingkungan: Menyediakan pengaturan konfigurasi untuk aplikasi.

  • Program.cs: Titik masuk aplikasi yang menyiapkan host ASP.NET Core dan berisi logika startup aplikasi, termasuk pendaftaran layanan dan konfigurasi alur pemrosesan permintaan:

    • Menentukan layanan injeksi dependensi (DI) aplikasi. Layanan ditambahkan dengan memanggil AddServerSideBlazor, dan WeatherForecastService ditambahkan ke kontainer layanan untuk digunakan oleh komponen contoh FetchData .
    • Mengonfigurasi alur penanganan permintaan aplikasi:
      • MapBlazorHub dipanggil untuk menyiapkan titik akhir untuk koneksi real-time dengan browser. Koneksi dibuat dengan SignalR, yang merupakan kerangka kerja untuk menambahkan fungsionalitas web real time ke aplikasi.
      • MapFallbackToPage("/_Host") dipanggil untuk menyiapkan halaman akar aplikasi (Pages/_Host.cshtml) dan mengaktifkan navigasi.

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

Blazor Server templat proyek: blazorserver

Blazor Server Templat membuat file awal dan struktur direktori untuk aplikasiBlazor Server. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari layanan terdaftar, WeatherForecastService, dan interaksi pengguna dengan Counter komponen.

  • Data folder: Berisi WeatherForecast kelas dan implementasi WeatherForecastService yang menyediakan contoh data cuaca ke komponen aplikasi FetchData .

  • Pagesfolder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor) dan halaman Blazor Server akar Razor aplikasi. Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup yang berikut ini:

    • _Host.cshtml: Halaman akar aplikasi yang diimplementasikan sebagai Razor Halaman:
      • Ketika setiap halaman aplikasi awalnya diminta, halaman ini dirender dan dikembalikan dalam respons.
      • Halaman Host menentukan tempat komponen akar App (App.razor) dirender.
    • _Layout.cshtml: Halaman tata letak untuk _Host.cshtml halaman akar aplikasi.
    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • Error komponen (Error.razor): Dirender saat pengecualian yang tidak tertangani terjadi di aplikasi.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi.

  • _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.

  • appsettings.json dan file pengaturan aplikasi lingkungan: Menyediakan pengaturan konfigurasi untuk aplikasi.

  • Program.cs: Titik masuk aplikasi yang menyiapkan host ASP.NET Core dan berisi logika startup aplikasi, termasuk pendaftaran layanan dan konfigurasi alur pemrosesan permintaan:

    • Menentukan layanan injeksi dependensi (DI) aplikasi. Layanan ditambahkan dengan memanggil AddServerSideBlazor, dan WeatherForecastService ditambahkan ke kontainer layanan untuk digunakan oleh komponen contoh FetchData .
    • Mengonfigurasi alur penanganan permintaan aplikasi:
      • MapBlazorHub dipanggil untuk menyiapkan titik akhir untuk koneksi real-time dengan browser. Koneksi dibuat dengan SignalR, yang merupakan kerangka kerja untuk menambahkan fungsionalitas web real time ke aplikasi.
      • MapFallbackToPage("/_Host") dipanggil untuk menyiapkan halaman akar aplikasi (Pages/_Host.cshtml) dan mengaktifkan navigasi.

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

Blazor Server templat proyek: blazorserver

Blazor Server Templat membuat file awal dan struktur direktori untuk aplikasiBlazor Server. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari layanan terdaftar, WeatherForecastService, dan interaksi pengguna dengan Counter komponen.

  • Data folder: Berisi WeatherForecast kelas dan implementasi WeatherForecastService yang menyediakan contoh data cuaca ke komponen aplikasi FetchData .

  • Pagesfolder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor) dan halaman Blazor Server akar Razor aplikasi. Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup yang berikut ini:

    • _Host.cshtml: Halaman akar aplikasi yang diimplementasikan sebagai Razor Halaman:
      • Ketika setiap halaman aplikasi awalnya diminta, halaman ini dirender dan dikembalikan dalam respons.
      • Halaman Host menentukan tempat komponen akar App (App.razor) dirender.
    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • Error komponen (Error.razor): Dirender saat pengecualian yang tidak tertangani terjadi di aplikasi.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi.

  • _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.

  • appsettings.json dan file pengaturan aplikasi lingkungan: Menyediakan pengaturan konfigurasi untuk aplikasi.

  • Program.cs: Titik masuk aplikasi yang menyiapkan host ASP.NET Core.

  • Startup.cs: Berisi logika startup aplikasi. Kelas Startup mendefinisikan dua metode:

    • ConfigureServices: Mengonfigurasi layanan injeksi dependensi (DI) aplikasi. Layanan ditambahkan dengan memanggil AddServerSideBlazor, dan WeatherForecastService ditambahkan ke kontainer layanan untuk digunakan oleh komponen contoh FetchData .
    • Configure: Mengonfigurasi alur penanganan permintaan aplikasi:
      • MapBlazorHub dipanggil untuk menyiapkan titik akhir untuk koneksi real-time dengan browser. Koneksi dibuat dengan SignalR, yang merupakan kerangka kerja untuk menambahkan fungsionalitas web real time ke aplikasi.
      • MapFallbackToPage("/_Host") dipanggil untuk menyiapkan halaman akar aplikasi (Pages/_Host.cshtml) dan mengaktifkan navigasi.

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

Blazor Server templat proyek: blazorserver

Blazor Server Templat membuat file awal dan struktur direktori untuk aplikasiBlazor Server. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari layanan terdaftar, WeatherForecastService, dan interaksi pengguna dengan Counter komponen.

  • Data folder: Berisi WeatherForecast kelas dan implementasi WeatherForecastService yang menyediakan contoh data cuaca ke komponen aplikasi FetchData .

  • Pagesfolder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor) dan halaman Blazor Server akar Razor aplikasi. Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup yang berikut ini:

    • _Host.cshtml: Halaman akar aplikasi yang diimplementasikan sebagai Razor Halaman:
      • Ketika setiap halaman aplikasi awalnya diminta, halaman ini dirender dan dikembalikan dalam respons.
      • Halaman Host menentukan tempat komponen akar App (App.razor) dirender.
    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • Error komponen (Error.razor): Dirender saat pengecualian yang tidak tertangani terjadi di aplikasi.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen bersama berikut:

    • MainLayoutkomponen (MainLayout.razor): Komponen tata letak 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi.

  • _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.

  • appsettings.json dan file pengaturan aplikasi lingkungan: Menyediakan pengaturan konfigurasi untuk aplikasi.

  • Program.cs: Titik masuk aplikasi yang menyiapkan host ASP.NET Core.

  • Startup.cs: Berisi logika startup aplikasi. Kelas Startup mendefinisikan dua metode:

    • ConfigureServices: Mengonfigurasi layanan injeksi dependensi (DI) aplikasi. Layanan ditambahkan dengan memanggil AddServerSideBlazor, dan WeatherForecastService ditambahkan ke kontainer layanan untuk digunakan oleh komponen contoh FetchData .
    • Configure: Mengonfigurasi alur penanganan permintaan aplikasi:
      • MapBlazorHub dipanggil untuk menyiapkan titik akhir untuk koneksi real-time dengan browser. Koneksi dibuat dengan SignalR, yang merupakan kerangka kerja untuk menambahkan fungsionalitas web real time ke aplikasi.
      • MapFallbackToPage("/_Host") dipanggil untuk menyiapkan halaman akar aplikasi (Pages/_Host.cshtml) dan mengaktifkan navigasi.

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

Mandiri 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 Blazor Razor (.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 WebAssembly

Blazor WebAssembly templat proyek: blazorwasm, blazorwasm-empty

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

  • blazorwasm Jika templat digunakan, aplikasi diisi dengan yang berikut ini:
    • Kode demonstrasi untuk FetchData komponen yang memuat data dari aset statis (weather.json) dan interaksi pengguna dengan Counter komponen.
    • Toolkit frontend Bootstrap .
  • blazorwasm-empty Jika templat digunakan, aplikasi dibuat tanpa kode demonstrasi dan Bootstrap.

Struktur proyek:

  • Pages folder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup komponen berikut:

    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor) (ASP.NET Core di .NET 7 atau yang lebih lama): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi, termasuk appsettings.json dan file pengaturan aplikasi lingkungan untuk pengaturan konfigurasi. 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>).

  • _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.

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

Solusi yang dihosting Blazor WebAssembly mencakup proyek ASP.NET Core berikut:

  • "Client": Aplikasi Blazor WebAssembly .
  • "Server": Aplikasi yang melayani Blazor WebAssembly aplikasi dan data cuaca kepada klien.
  • "Shared": Proyek yang mempertahankan kelas, metode, dan sumber daya umum.

Solusi dihasilkan dari Blazor WebAssembly templat proyek di Visual Studio dengan kotak centang ASP.NET Core Hosted dipilih atau dengan -ho|--hosted opsi menggunakan perintah .NET CLI dotnet new blazorwasm . Untuk informasi selengkapnya, lihat Alat untuk ASP.NET Core Blazor.

Struktur proyek aplikasi sisi klien dalam solusi Webassembly yang dihosting Blazor ("Client" project) sama dengan struktur proyek untuk aplikasi mandiri Blazor WebAssembly . File tambahan dalam solusi yang dihosting Blazor WebAssembly :

  • Proyek "Server" mencakup pengontrol prakiraan cuaca yang Controllers/WeatherForecastController.cs mengembalikan data cuaca ke komponen proyek "Client" FetchData .
  • Proyek "Shared" mencakup kelas prakiraan cuaca di WeatherForecast.cs yang mewakili data cuaca untuk proyek "Client" dan ""Server.

Blazor WebAssembly

Blazor WebAssembly templat proyek: blazorwasm

Blazor WebAssembly Templat membuat file awal dan struktur direktori untuk aplikasiBlazor WebAssembly. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari aset statis, weather.json, dan interaksi pengguna dengan Counter komponen.

  • Pages folder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup komponen berikut:

    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi, termasuk appsettings.json dan file pengaturan aplikasi lingkungan untuk pengaturan konfigurasi. 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>).

  • _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.

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

Solusi yang dihosting Blazor WebAssembly mencakup proyek ASP.NET Core berikut:

  • "Client": Aplikasi Blazor WebAssembly .
  • "Server": Aplikasi yang melayani Blazor WebAssembly aplikasi dan data cuaca kepada klien.
  • "Shared": Proyek yang mempertahankan kelas, metode, dan sumber daya umum.

Solusi dihasilkan dari Blazor WebAssembly templat proyek di Visual Studio dengan kotak centang ASP.NET Core Hosted dipilih atau dengan -ho|--hosted opsi menggunakan perintah .NET CLI dotnet new blazorwasm . Untuk informasi selengkapnya, lihat Alat untuk ASP.NET Core Blazor.

Struktur proyek aplikasi sisi klien dalam solusi Webassembly yang dihosting Blazor ("Client" project) sama dengan struktur proyek untuk aplikasi mandiri Blazor WebAssembly . File tambahan dalam solusi yang dihosting Blazor WebAssembly :

  • Proyek "Server" mencakup pengontrol prakiraan cuaca yang Controllers/WeatherForecastController.cs mengembalikan data cuaca ke komponen proyek "Client" FetchData .
  • Proyek "Shared" mencakup kelas prakiraan cuaca di WeatherForecast.cs yang mewakili data cuaca untuk proyek "Client" dan ""Server.

Blazor WebAssembly

Blazor WebAssembly templat proyek: blazorwasm

Blazor WebAssembly Templat membuat file awal dan struktur direktori untuk aplikasiBlazor WebAssembly. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari aset statis, weather.json, dan interaksi pengguna dengan Counter komponen.

  • Pages folder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup komponen berikut:

    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen dan lembar gaya bersama 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi, termasuk appsettings.json dan file pengaturan aplikasi lingkungan untuk pengaturan konfigurasi. 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>).

  • _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.

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

Solusi yang dihosting Blazor WebAssembly mencakup proyek ASP.NET Core berikut:

  • "Client": Aplikasi Blazor WebAssembly .
  • "Server": Aplikasi yang melayani Blazor WebAssembly aplikasi dan data cuaca kepada klien.
  • "Shared": Proyek yang mempertahankan kelas, metode, dan sumber daya umum.

Solusi dihasilkan dari Blazor WebAssembly templat proyek di Visual Studio dengan kotak centang ASP.NET Core Hosted dipilih atau dengan -ho|--hosted opsi menggunakan perintah .NET CLI dotnet new blazorwasm . Untuk informasi selengkapnya, lihat Alat untuk ASP.NET Core Blazor.

Struktur proyek aplikasi sisi klien dalam solusi Webassembly yang dihosting Blazor ("Client" project) sama dengan struktur proyek untuk aplikasi mandiri Blazor WebAssembly . File tambahan dalam solusi yang dihosting Blazor WebAssembly :

  • Proyek "Server" mencakup pengontrol prakiraan cuaca yang Controllers/WeatherForecastController.cs mengembalikan data cuaca ke komponen proyek "Client" FetchData .
  • Proyek "Shared" mencakup kelas prakiraan cuaca di WeatherForecast.cs yang mewakili data cuaca untuk proyek "Client" dan ""Server.

Blazor WebAssembly

Blazor WebAssembly templat proyek: blazorwasm

Blazor WebAssembly Templat membuat file awal dan struktur direktori untuk aplikasiBlazor WebAssembly. Aplikasi ini diisi dengan kode demonstrasi untuk FetchData komponen yang memuat data dari aset statis, weather.json, dan interaksi pengguna dengan Counter komponen.

  • Pages folder: Berisi komponen aplikasi yang dapat dirutekan Blazor Razor (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup komponen berikut:

    • Counter component (Counter.razor): Mengimplementasikan halaman Penghitung.
    • FetchData component (FetchData.razor): Mengimplementasikan halaman Ambil data.
    • Index component (Index.razor): Mengimplementasikan Home halaman.

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

  • Shared folder: Berisi komponen bersama berikut:

    • MainLayoutkomponen (MainLayout.razor): Komponen tata letak 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.
    • SurveyPrompt komponen (SurveyPrompt.razor): Blazor komponen survei.

  • wwwroot folder: Folder Akar Web untuk aplikasi yang berisi aset statis publik aplikasi, termasuk appsettings.json dan file pengaturan aplikasi lingkungan untuk pengaturan konfigurasi. 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 app elemen DOM (<app>Loading...</app>).

  • _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.

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

    • Komponen App adalah komponen akar aplikasi. Komponen App ditentukan sebagai app elemen DOM (<app>Loading...</app> 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.

Solusi yang dihosting Blazor WebAssembly mencakup proyek ASP.NET Core berikut:

  • "Client": Aplikasi Blazor WebAssembly .
  • "Server": Aplikasi yang melayani Blazor WebAssembly aplikasi dan data cuaca kepada klien.
  • "Shared": Proyek yang mempertahankan kelas, metode, dan sumber daya umum.

Solusi dihasilkan dari Blazor WebAssembly templat proyek di Visual Studio dengan kotak centang ASP.NET Core Hosted dipilih atau dengan -ho|--hosted opsi menggunakan perintah .NET CLI dotnet new blazorwasm . Untuk informasi selengkapnya, lihat Alat untuk ASP.NET Core Blazor.

Struktur proyek aplikasi sisi klien dalam solusi Webassembly yang dihosting Blazor ("Client" project) sama dengan struktur proyek untuk aplikasi mandiri Blazor WebAssembly . File tambahan dalam solusi yang dihosting Blazor WebAssembly :

  • Proyek "Server" mencakup pengontrol prakiraan cuaca yang Controllers/WeatherForecastController.cs mengembalikan data cuaca ke komponen proyek "Client" FetchData .
  • Proyek "Shared" mencakup kelas prakiraan cuaca di WeatherForecast.cs yang mewakili data cuaca untuk proyek "Client" dan ""Server.

Blazor Lokasi skrip

Blazor Skrip disajikan dari sumber daya yang disematkan dalam kerangka kerja bersama ASP.NET Core.

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

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

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

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

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

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

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

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

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

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

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

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

<head> Lokasi dan <body> konten

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

Di aplikasi Blazor Server , <head> dan <body> konten terletak di Pages/_Host.cshtml file.

Di aplikasi Blazor Server , <head> dan <body> konten terletak di Pages/_Layout.cshtml file.

Di aplikasi Blazor Server , <head> dan <body> konten terletak di Pages/_Host.cshtml file.

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

Blazor ServerGanda /Blazor WebAssembly aplikasi

Untuk membuat aplikasi yang dapat berjalan sebagai Blazor Server aplikasi atau Blazor WebAssembly aplikasi, salah satu pendekatannya adalah menempatkan semua logika dan komponen aplikasi ke dalamRazor pustaka kelas (RCL) dan mereferensikan RCL dari proyek dan Blazor WebAssembly terpisahBlazor Server. Untuk layanan umum yang implementasinya berbeda berdasarkan model hosting, tentukan antarmuka layanan di RCL dan terapkan layanan dalam Blazor Server proyek dan Blazor WebAssembly .

Sumber Daya Tambahan: