Share via

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.

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 Aplikasi Web

Blazor Templat proyek Aplikasi Web: blazor

Blazor Templat proyek Aplikasi Web menyediakan satu titik awal untuk menggunakan Razor komponen 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.

Secara default, Blazor templat Aplikasi Web 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.

Untuk informasi selengkapnya, lihat mode render ASP.NET CoreBlazor.

  • Proyek server:

    • Components Folder:

      • 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 menunjukkan kepada pengguna komponen mana yang saat ini ditampilkan.
        • NavMenu.razor.css: Lembar gaya untuk menu navigasi aplikasi.

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

        • Countercomponent (Counter.razor): Mengimplementasikan halaman Penghitung.
        • Error komponen (Error.razor): Mengimplementasikan halaman Kesalahan .
        • Home component (Home.razor): Mengimplementasikan Home halaman.
        • Weather komponen (Weather.razor): Menerapkan halaman Prakiraan cuaca .

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

      • Routes komponen (Routes.razor): Menyiapkan perutean menggunakan Router komponen. Untuk komponen interaktif sisi klien, Router komponen mencegat navigasi browser dan merender halaman yang cocok dengan alamat yang diminta.

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

    • 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 run perintah, cukup letakkan https profil di atas http profil dalam file.

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

    • Program.csfile: Titik masuk proyek server 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): Menyediakan pengaturan konfigurasi untuk proyek server.

  • Proyek klien (.Client):

    • Pages folder: Berisi komponen sisi Razor klien yang dapat dirutekan aplikasi (.razor). Rute untuk setiap halaman ditentukan menggunakan direktif @page . Templat mencakup Counter komponen (Counter.razor) yang mengimplementasikan halaman Penghitung.

      Struktur .Client folder komponen proyek berbeda dari Blazor struktur folder proyek utama Aplikasi Web karena proyek utama adalah proyek ASP.NET Core standar. Proyek utama harus memperhitungkan Blazoraset lain untuk proyek ASP.NET Core yang tidak terkait dengan .

      Proyek .Client ini murni proyek Blazor dan tidak diperlukan untuk berintegrasi sebanyak ASP.NET fitur dan spesifikasi non-CoreBlazor , sehingga menggunakan struktur folder komponen yang kurang kompleks. Namun, 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.

    • Folder Akar Web untuk proyek sisi klien yang berisi aset statis publik aplikasi, termasuk file pengaturan aplikasi (appsettings.Development.json, appsettings.json) yang menyediakan pengaturan konfigurasi untuk proyek sisi klien.

    • Program.csfile: Titik masuk proyek sisi klien yang menyiapkan host WebAssembly dan berisi logika startup proyek, termasuk pendaftaran layanan, konfigurasi, pengelogan, dan alur pemrosesan permintaan.

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

File dan folder tambahan mungkin muncul di aplikasi yang dihasilkan dari Blazor templat proyek Aplikasi Web 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 BlazorRazor (.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 BlazorRazor (.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 BlazorRazor (.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 BlazorRazor (.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 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 run perintah, 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 BlazorRazor (.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 BlazorRazor (.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 BlazorRazor (.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 BlazorRazor (.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 Di Aplikasi Web, 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 Di Aplikasi Web, <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 dalamRazorpustaka 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: