Bagikan melalui

Alat untuk 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 alat untuk membangun Blazor aplikasi menggunakan beberapa alat:

  • Visual Studio (VS): Lingkungan pengembangan terintegrasi (IDE) paling komprehensif untuk pengembang .NET di Windows. Mencakup berbagai alat dan fitur untuk meningkatkan dan meningkatkan setiap tahap pengembangan perangkat lunak.
  • Visual Studio Code (VS Code) adalah editor kode lintas platform sumber terbuka yang dapat digunakan untuk mengembangkan Blazor aplikasi.
  • .NET CLI: Antarmuka baris perintah (CLI) .NET adalah toolchain lintas platform untuk mengembangkan, membangun, menjalankan, dan menerbitkan aplikasi .NET. .NET CLI disertakan dengan .NET SDK dan berjalan pada platform apa pun yang didukung oleh SDK.

Pilih pivot artikel ini yang cocok dengan pilihan alat Anda.

Untuk membuat Blazor aplikasi dengan Visual Studio, gunakan panduan berikut:

  • Instal versi terbaru Visual Studio dengan beban kerja ASP.NET dan pengembangan web.

  • Buat proyek baru menggunakan salah satu templat yang tersedia Blazor :

    • Blazor Aplikasi Web: Membuat Blazor aplikasi web yang mendukung penyajian sisi server interaktif (SSR interaktif) dan penyajian sisi klien (CSR). Blazor Templat Web App disarankan untuk memulai Blazor untuk mempelajari tentang fitur sisi server dan sisi Blazor klien.
    • Blazor WebAssembly Aplikasi Mandiri: Membuat aplikasi web klien mandiri yang dapat disebarkan sebagai situs statis.

Pilih Selanjutnya.

  • Instal versi terbaru Visual Studio dengan beban kerja ASP.NET dan pengembangan web.

  • Buat proyek baru:

    • Blazor Server Untuk pengalaman, pilih Blazor Server Templat aplikasi, yang mencakup kode demonstrasi dan Bootstrap, atau Blazor Server templat App Empty tanpa kode demonstrasi dan Bootstrap. Pilih Selanjutnya.
    • Untuk pengalaman mandiriBlazor WebAssembly, pilihBlazor WebAssemblyTemplat aplikasi, yang mencakup kode demonstrasi dan Bootstrap, atau Blazor WebAssembly templat App Empty tanpa kode demonstrasi dan Bootstrap. Pilih Selanjutnya.

  • Instal versi terbaru Visual Studio dengan beban kerja ASP.NET dan pengembangan web.

  • Buat proyek baru:

    • Untuk pengalaman Blazor Server , pilih Blazor Server templat Aplikasi . Pilih Selanjutnya.
    • Untuk pengalaman Blazor WebAssembly , pilih Blazor WebAssembly templat Aplikasi . Pilih Selanjutnya.

  • Berikan nama Proyek dan konfirmasikan bahwa Lokasi sudah benar.

  • Untuk informasi selengkapnya tentang opsi dalam dialog Informasi tambahan, lihatBlazorbagian templat proyek dan opsi templat.

  • Untuk aplikasi yang dihostingBlazor WebAssembly , pilih kotak centang ASP.NET Core Hosted di dialog Informasi tambahan.
  • Pilih Buat.

Visual Studio Code adalah Lingkungan Pengembangan Terpadu (IDE) lintas platform sumber terbuka yang dapat digunakan untuk mengembangkan Blazor aplikasi.

Instal versi terbaru Visual Studio Code untuk platform Anda.

Instal C# Dev Kit untuk Visual Studio Code. Untuk informasi selengkapnya, lihat Men-debug aplikasi ASP.NET CoreBlazor.

Jika Anda baru menggunakan Visual Studio Code, lihat dokumentasi Visual Studio Code. Jika Anda baru menggunakan .NET SDK, lihat Apa itu .NET SDK? dan artikel terkait dalam dokumentasi .NET SDK.

Buat proyek baru:

  • Buka VS Code.

  • Buka tampilan Explorer dan pilih tombol Buat Proyek .NET. Atau, Anda dapat memunculkan Palet Perintah menggunakan Ctrl+Shift+P, lalu ketik ".NET" dan temukan dan pilih perintah .NET: Proyek Baru.

  • Pilih Blazor templat proyek dari daftar.

  • Dalam dialog Lokasi Proyek, buat atau pilih folder untuk proyek.

  • Di Palet Perintah, berikan nama untuk proyek atau terima nama default.

  • Pilih Buat proyek untuk membuat proyek atau sesuaikan opsi proyek dengan memilih Perlihatkan semua opsi templat. Untuk informasi selengkapnya tentang templat dan opsi, lihat Blazor bagian templat proyek dan opsi templat.

  • Tekan F5 pada keyboard untuk menjalankan aplikasi dengan debugger atau Ctrl+F5 untuk menjalankan aplikasi tanpa debugger.

    Palet Perintah meminta Anda untuk memilih debugger. Pilih C# dari daftar.

    Selanjutnya, pilih konfigurasi peluncuran https .

  • Untuk menghentikan aplikasi, tekan Shift+F5 di keyboard.

Instruksi Visual Studio Code (VS Code) untuk pengembangan ASP.NET Core di beberapa bagian Blazor dokumentasi menggunakan .NET CLI, yang merupakan bagian dari .NET SDK. Perintah .NET CLI dikeluarkan di Terminal terintegrasi VS Code, yang default ke shell perintah PowerShell. Terminal dibuka dengan memilih Terminal Baru dari menu Terminal di bilah menu.

Untuk informasi selengkapnya tentang konfigurasi dan penggunaan Visual Studio Code, lihat dokumentasi Visual Studio Code.

Peluncuran yang dihosting Blazor WebAssembly dan konfigurasi tugas

Untuk solusi yang dihosting, tambahkan (atau pindahkanBlazor WebAssembly) .vscode folder dengan launch.json file dan tasks.json ke folder induk solusi, yang merupakan folder yang berisi folder proyek umum: Client, Server, dan Shared. Perbarui atau konfirmasikan bahwa konfigurasi dalam launch.json file dan tasks.json menjalankan aplikasi yang dihosting Blazor WebAssemblyServer dari proyek.

Properties/launchSettings.json Periksa file dan tentukan URL aplikasi dari applicationUrl properti . Bergantung pada versi kerangka kerja, protokol URL aman (HTTPS) https://localhost:{PORT} atau tidak aman (HTTP), http://localhost:{PORT}di mana {PORT} tempat penampung adalah port yang ditetapkan. Perhatikan URL untuk digunakan dalam launch.json file.

Dalam konfigurasi peluncuran .vscode/launch.json file:

  • Atur direktori kerja saat ini (cwd) ke Server folder proyek.
  • Tunjukkan URL aplikasi dengan url properti . Gunakan nilai yang direkam sebelumnya dari Properties/launchSettings.json file.
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Dalam konfigurasi sebelumnya:

  • Tempat {SERVER APP FOLDER} penampung adalah Server folder proyek, biasanya Server.
  • Tempat {URL} penampung adalah URL aplikasi, yang ditentukan dalam file aplikasi Properties/launchSettings.json di applicationUrl properti .

Jika Google Chrome lebih disukai daripada Microsoft Edge, perbarui atau tambahkan properti "browser": "chrome" tambahan ke konfigurasi.

Contoh .vscode/launch.json file berikut:

  • Menyetel direktori kerja saat ini ke Server folder.
  • Mengatur URL untuk aplikasi ke http://localhost:7268.
  • Mengubah browser default dari Microsoft Edge ke Google Chrome.
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

File lengkap .vscode/launch.json :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

Di .vscode/tasks.json, tambahkan build argumen yang menentukan jalur ke Server file proyek aplikasi:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

Dalam argumen sebelumnya:

  • Tempat {SERVER APP FOLDER} penampung adalah Server folder proyek, biasanya Server.
  • Tempat {PROJECT NAME} penampung adalah nama aplikasi, biasanya berdasarkan nama solusi yang diikuti oleh .Server dalam aplikasi yang dihasilkan dari Blazor WebAssembly templat proyek.

Contoh .vscode/tasks.json file dengan proyek bernama ServerBlazorHosted di Server folder solusi:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

Catatan

Hanya penelusuran kesalahan browser yang didukung saat ini.

Anda tidak dapat membangun kembali aplikasi backend Server secara otomatis dari solusi yang dihosting Blazor WebAssembly selama penelusuran kesalahan, misalnya dengan menjalankan aplikasi dengan dotnet watch run.

.vscode/launch.json (launch konfigurasi):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

Dalam konfigurasi sebelumnya untuk direktori kerja saat ini (cwd), {SERVER APP FOLDER} tempat penampung adalah Server folder proyek, biasanya "Server".

Jika Microsoft Edge digunakan dan Google Chrome tidak diinstal pada sistem, tambahkan properti "browser": "edge" tambahan ke konfigurasi.

Contoh untuk folder Server proyek dan yang menelurkan Microsoft Edge sebagai browser untuk debug berjalan alih-alih browser default Google Chrome:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (dotnet argumen perintah ):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

Dalam argumen sebelumnya:

  • Tempat {SERVER APP FOLDER} penampung adalah Server folder proyek, biasanya "Server".
  • Tempat {PROJECT NAME} penampung adalah nama aplikasi, biasanya berdasarkan nama solusi diikuti dengan ".Server" dalam aplikasi yang dihasilkan dari Blazor templat proyek.

Contoh berikut dari tutorial untuk menggunakan SignalR dengan Blazor WebAssembly aplikasi menggunakan nama Server folder proyek dan nama proyek dari BlazorWebAssemblySignalRApp.Server:

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

.NET SDK adalah sekumpulan pustaka dan alat yang digunakan pengembang untuk membuat aplikasi dan pustaka .NET.

Instal .NET SDK. Perintah dikeluarkan dalam shell perintah menggunakan .NET CLI.

Jika sebelumnya Anda menginstal satu atau beberapa .NET SDK dan ingin melihat versi aktif Anda, jalankan perintah berikut dalam shell perintah:

dotnet --version

Jika Anda baru menggunakan .NET SDK, lihat Apa itu .NET SDK? dan artikel terkait dalam dokumentasi .NET SDK.

Buat proyek baru:

  • Ubah ke direktori menggunakan cd perintah ke tempat Anda ingin membuat folder proyek (misalnya, cd c:/users/Bernie_Kopell/Documents).

  • Blazor Untuk pengalaman Aplikasi Web dengan penyajian sisi server interaktif default (SSR interaktif), jalankan perintah berikut:

    dotnet new blazor -o BlazorApp

  • Untuk pengalaman mandiri Blazor WebAssembly , jalankan perintah berikut dalam shell perintah yang menggunakan blazorwasm templat:

    dotnet new blazorwasm -o BlazorApp

Buat proyek baru:

  • Ubah ke direktori menggunakan cd perintah ke tempat Anda ingin membuat folder proyek (misalnya, cd c:/users/Bernie_Kopell/Documents).

  • Blazor Server Untuk pengalaman dengan kode demonstrasi dan Bootstrap, jalankan perintah berikut:

    dotnet new blazorserver -o BlazorApp

  • Untuk pengalaman mandiri Blazor WebAssembly dengan kode demonstrasi dan Bootstrap, jalankan perintah berikut:

    dotnet new blazorwasm -o BlazorApp

  • Untuk pengalaman yang dihosting Blazor WebAssembly dengan kode demonstrasi dan Bootstrap, tambahkan opsi yang dihosting (-ho/--hosted) ke perintah:

    dotnet new blazorwasm -o BlazorApp -ho

Buat proyek baru:

  • Ubah ke direktori menggunakan cd perintah ke tempat Anda ingin membuat folder proyek (misalnya, cd c:/users/Bernie_Kopell/Documents).

  • Blazor WebAssembly Untuk pengalaman, jalankan perintah berikut:

    dotnet new blazorwasm -o BlazorApp

  • Untuk pengalaman yang dihosting Blazor WebAssembly , tambahkan opsi yang dihosting (-ho atau --hosted) ke perintah :

    dotnet new blazorwasm -o BlazorApp -ho

  • Blazor Server Untuk pengalaman, jalankan perintah berikut:

    dotnet new blazorserver -o BlazorApp

Untuk informasi selengkapnya tentang templat dan opsi, lihat Blazor bagian templat proyek dan opsi templat.

Menjalankan aplikasi

Penting

Saat menjalankan Aplikasi Web, jalankan Blazor aplikasi dari proyek server solusi, yang merupakan proyek dengan nama yang tidak berakhiran .Client.

Penting

Saat menjalankan aplikasi yang dihosting, jalankan Blazor WebAssembly aplikasi dari proyek solusi Server .

Tekan Ctrl+F5 pada keyboard untuk menjalankan aplikasi tanpa debugger.

Visual Studio menampilkan dialog berikut saat proyek tidak dikonfigurasi untuk menggunakan SSL:

Percayai dialog sertifikat yang ditandatangani sendiri

Pilih Ya jika Anda mempercayai sertifikat SSL Inti ASP.NET.

Dialog berikut ditampilkan:

Dialog peringatan keamanan

Pilih Ya untuk mengakui risiko dan menginstal sertifikat.

Untuk informasi tentang mempercayai sertifikat pengembangan HTTPS untuk browser Firefox, lihat Menerapkan HTTPS di ASP.NET Core.

Visual Studio:

  • Mengkompilasi dan menjalankan aplikasi.
  • Meluncurkan browser default di https://localhost:{PORT}, yang menampilkan UI aplikasi. Tempat {PORT} penampung adalah port acak yang ditetapkan pada pembuatan aplikasi. Jika Anda perlu mengubah port karena konflik port lokal, ubah port dalam file proyek Properties/launchSettings.json .

Untuk informasi tentang mempercayai sertifikat pengembangan HTTPS untuk browser selain Firefox, lihat panduan kepercayaan sertifikat pengembangan HTTPS. Saat menggunakan browser Firefox, lihat panduan kepercayaan sertifikat untuk Firefox.

Di Visual Studio Code, tekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS) untuk menjalankan aplikasi tanpa penelusuran kesalahan.

Pada perintah Pilih debugger di Palet Perintah di bagian atas UI Visual Studio Code, pilih C#. Pada perintah berikutnya, pilih profil HTTPS ([https]).

Browser default diluncurkan di https://localhost:{PORT}, yang menampilkan UI aplikasi. Tempat {PORT} penampung adalah port acak yang ditetapkan pada pembuatan aplikasi. Jika Anda perlu mengubah port karena konflik port lokal, ubah port dalam file proyek Properties/launchSettings.json .

Untuk informasi tentang mempercayai sertifikat pengembangan HTTPS untuk browser selain Firefox, lihat panduan kepercayaan sertifikat pengembangan HTTPS. Saat menggunakan browser Firefox, lihat bagian panduan kepercayaan sertifikat untuk Firefox di artikel tersebut.

Dalam shell perintah yang dibuka ke folder akar proyek, jalankan dotnet watch perintah untuk mengkompilasi dan memulai aplikasi:

dotnet watch

Browser default diluncurkan di https://localhost:{PORT}, yang menampilkan UI aplikasi. Tempat {PORT} penampung adalah port acak yang ditetapkan pada pembuatan aplikasi. Jika Anda perlu mengubah port karena konflik port lokal, ubah port dalam file proyek Properties/launchSettings.json .

Saat aplikasi yang dibuat dari Blazor templat proyek Aplikasi Web dijalankan dengan .NET CLI, aplikasi berjalan di titik akhir HTTP (tidak aman) karena profil pertama yang ditemukan dalam file pengaturan peluncuran aplikasi (Properties/launchSettings.json) adalah profil HTTP (tidak aman), yang bernama http. Profil HTTP ditempatkan di posisi pertama untuk memudahkan transisi mengadopsi keamanan SSL/HTTPS untuk pengguna non-Windows.

Salah satu pendekatan untuk menjalankan aplikasi dengan SSL/HTTPS adalah meneruskan |--launch-profile-lpopsi dengan https nama profil ke dotnet watch perintah:

dotnet watch -lp https

Pendekatan alternatif adalah memindahkan profil di https atas http profil dalam Properties/launchSettings.json file dan menyimpan perubahan. Setelah mengubah urutan profil dalam file, dotnet watch perintah selalu menggunakan https profil secara default.

Menghentikan aplikasi

Hentikan aplikasi menggunakan salah satu pendekatan berikut:

  • Tutup jendela browser.
  • Di Visual Studio, baik:

    • Gunakan tombol Berhenti di bilah menu Visual Studio:

      Tombol Berhenti di bilah menu Visual Studio

    • Tekan Shift+F5 pada keyboard.

Hentikan aplikasi menggunakan pendekatan berikut:

  1. Tutup jendela browser.
  2. Di Visual Studio Code, baik:
    • Dari menu Jalankan, pilih Hentikan Penelusuran Kesalahan.
    • Tekan Shift+F5 pada keyboard.

Hentikan aplikasi menggunakan pendekatan berikut:

  1. Tutup jendela browser.
  2. Di shell perintah, tekan Ctrl+C (Windows) atau ⌘+C (macOS).

File solusi Visual Studio (.sln)

Solusinya adalah kontainer untuk mengatur satu atau beberapa proyek kode terkait. File solusi menggunakan format unik dan tidak dimaksudkan untuk diedit secara langsung.

Visual Studio dan Visual Studio Code (VS Code) menggunakan file solusi (.sln) untuk menyimpan pengaturan solusi. .NET CLI tidak mengatur proyek menggunakan file solusi, tetapi dapat membuat file solusi dan mencantumkan/memodifikasi proyek dalam file solusi melalui dotnet sln perintah . Perintah .NET CLI lainnya menggunakan jalur file solusi untuk berbagai perintah penerbitan, pengujian, dan pengemasan.

Sepanjang Blazor dokumentasi, solusi digunakan untuk menjelaskan aplikasi yang dibuat dari Blazor WebAssembly templat proyek dengan opsi ASP.NET Core Hosted diaktifkan atau dari Blazor Hybrid templat proyek. Aplikasi yang dihasilkan dari templat proyek ini menyertakan file solusi (.sln) secara default. Untuk aplikasi yang dihosting Blazor WebAssembly di mana pengembang tidak menggunakan Visual Studio, file solusi dapat diabaikan atau dihapus jika tidak digunakan dengan perintah .NET CLI.

Untuk informasi selengkapnya, lihat sumber daya berikut:

Blazor templat proyek dan opsi templat

Kerangka kerja ini Blazor menyediakan templat proyek untuk membuat aplikasi baru. Templat digunakan untuk membuat proyek dan solusi baru Blazor terlepas dari alat yang Anda pilih untuk Blazor pengembangan (Visual Studio, Visual Studio Code, atau antarmuka baris perintah .NET (CLI)):

  • Blazor Templat proyek Aplikasi Web: blazor
  • Templat proyek aplikasi mandiri Blazor WebAssembly : blazorwasm
  • Blazor Server templat proyek: blazorserver, blazorserver-empty
  • Blazor WebAssembly templat proyek: blazorwasm, blazorwasm-empty
  • Blazor Server templat proyek: blazorserver
  • Blazor WebAssembly templat proyek: blazorwasm

Untuk informasi selengkapnya tentang Blazor templat proyek, lihat struktur proyek ASP.NET CoreBlazor.

Istilah dan konsep penyajian yang digunakan dalam subbagian berikut diperkenalkan di bagian berikut dari artikel gambaran umum Dasar :

Panduan terperinci tentang mode render disediakan oleh artikel mode render ASP.NET CoreBlazor.

Mode render interaktif

  • Penyajian sisi server interaktif (SSR interaktif) diaktifkan secara default dengan opsi Server .
  • Untuk hanya mengaktifkan interaktivitas dengan penyajian sisi klien (CSR), gunakan opsi WebAssembly .
  • Untuk mengaktifkan mode penyajian interaktif dan kemampuan untuk beralih secara otomatis di antara mode penyajian saat runtime, gunakan opsi mode render Otomatis (Server dan WebAssembly) (otomatis).
  • Jika interaktivitas diatur ke None, aplikasi yang dihasilkan tidak memiliki interaktivitas. Aplikasi ini hanya dikonfigurasi untuk penyajian sisi server statis.

Mode render Otomatis Interaktif awalnya menggunakan SSR interaktif saat bundel aplikasi .NET dan runtime diunduh ke browser. Setelah runtime .NET WebAssembly diaktifkan, mode render beralih ke penyajian Interactive WebAssembly.

Secara default, Blazor templat Aplikasi Web memungkinkan SSR statis dan interaktif menggunakan satu proyek. Jika Anda juga mengaktifkan CSR, proyek menyertakan proyek klien tambahan (.Client) untuk komponen berbasis WebAssembly Anda. Output bawaan dari proyek klien diunduh ke browser dan dijalankan pada klien. Komponen apa pun yang menggunakan mode WebAssembly atau render otomatis harus dibangun dari proyek klien.

Penting

Saat menggunakan Blazor Aplikasi Web, sebagian Blazor besar komponen contoh dokumentasi memerlukan interaktivitas untuk berfungsi dan menunjukkan konsep yang dibahas oleh artikel. Saat Anda menguji komponen contoh yang disediakan oleh artikel, pastikan aplikasi mengadopsi interaktivitas global atau komponen mengadopsi mode render interaktif.

Lokasi interaktivitas

Opsi lokasi interaktivitas:

  • Per halaman/komponen: Default menyiapkan interaktivitas per halaman atau per komponen.
  • Global: Menggunakan opsi ini menyiapkan interaktivitas secara global untuk seluruh aplikasi.

Lokasi interaktivitas hanya dapat diatur jika mode render Interaktif tidak None dan autentikasi tidak diaktifkan.

Halaman sampel

Untuk menyertakan halaman sampel dan tata letak berdasarkan gaya Bootstrap, gunakan opsi Sertakan halaman sampel. Nonaktifkan opsi ini untuk proyek tanpa halaman sampel dan gaya Bootstrap.

Panduan tambahan tentang opsi templat

Untuk informasi selengkapnya tentang opsi templat, lihat sumber daya berikut ini:

  • Templat default .NET untuk artikel baru dotnet dalam dokumentasi .NET Core:
  • Meneruskan opsi bantuan (-h atau --help) ke dotnet new perintah CLI dalam shell perintah:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h

Untuk informasi selengkapnya tentang opsi templat, lihat sumber daya berikut ini:

  • Templat default .NET untuk artikel baru dotnet dalam dokumentasi .NET Core:
  • Meneruskan opsi bantuan (-h atau --help) ke dotnet new perintah CLI dalam shell perintah:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Sumber Daya Tambahan: