Share via

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 di berbagai platform. Pilih platform Anda di bagian atas artikel ini.

Untuk membuat Blazor aplikasi di Windows, 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.

Catatan

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

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

  • Blazor Untuk Aplikasi Web dalam dialog Informasi tambahan:

    • Daftar dropdown mode render interaktif

      • Penyajian sisi server interaktif (SSR interaktif) diaktifkan secara default dengan opsi Server .
      • Untuk hanya mengaktifkan interaktivitas dengan penyajian sisi klien (CSR), pilih opsi WebAssembly .
      • Untuk mengaktifkan mode penyajian interaktif dan kemampuan untuk beralih secara otomatis di antara mode penyajian saat runtime, pilih 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.

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

    • Daftar dropdown lokasi interaktivitas

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

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

    • Untuk menyertakan halaman sampel dan tata letak berdasarkan gaya Bootstrap, pilih kotak centang Sertakan halaman sampel. Nonaktifkan opsi ini untuk proyek tanpa halaman sampel dan gaya Bootstrap.

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

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

  • Pilih Buat.

  • Tekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS) untuk menjalankan aplikasi.

Saat menjalankan solusi yang dihosting Blazor WebAssemblydi Visual Studio, proyek startup solusi adalah Server proyek.

Untuk informasi selengkapnya tentang memercayai sertifikat pengembangan ASP.NET Core HTTPS, lihat Menerapkan HTTPS di ASP.NET Core.

Penting

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

Saat aplikasi diluncurkan, hanya Properties/launchSettings.json file dalam proyek yang Server digunakan.

Untuk membuat Blazor aplikasi di Linux atau macOS, gunakan panduan berikut:

Gunakan antarmuka baris perintah .NET (CLI) untuk menjalankan perintah dalam shell perintah.

Instal versi terbaru .NET Core SDK. Jika sebelumnya Anda menginstal SDK, Anda dapat menentukan versi yang diinstal dengan menjalankan perintah berikut:

dotnet --version

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.

Buat proyek baru:

  • Blazor Untuk pengalaman Aplikasi Web dengan penyajian sisi server interaktif default, jalankan perintah berikut dalam shell perintah yang menggunakan blazor templat proyek:

    dotnet new blazor -o BlazorApp

    Untuk hanya mengaktifkan penyajian sisi klien, gunakan opsi yang -int|--interactivity diatur ke WebAssembly:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Untuk mengaktifkan penyajian sisi server interaktif diikuti oleh penyajian sisi klien, gunakan opsi yang -int|--interactivity diatur ke Auto:

    dotnet new blazor -o BlazorApp -int Auto

    Jika interaktivitas dinonaktifkan dengan mengatur -int|--interactivity opsi ke None, aplikasi yang dihasilkan tidak memiliki interaktivitas. Aplikasi ini hanya dikonfigurasi untuk penyajian sisi server statis:

    dotnet new blazor -o BlazorApp -int None

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

    Secara default, Blazor templat Aplikasi Web memungkinkan penyajian sisi server statis dan interaktif menggunakan satu proyek. Jika Anda juga mengaktifkan mode render 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 apa pun yang menggunakan mode render Interactive WebAssembly atau Interactive Auto harus dibuat dari proyek klien.

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

    Aplikasi default lokasi interaktivitas berdasarkan per komponen/halaman. Untuk membuat interaktivitas di seluruh aplikasi, gunakan -ai|--all-interactive opsi :

    dotnet new blazor -o BlazorApp -ai

    Memilih opsi ini mengatur interaktivitas untuk seluruh aplikasi dalam App komponen dengan menentukan mode render untuk tingkat HeadOutlet atas dan Routes komponen. Mengatur interaktivitas pada komponen ini menyebarluaskan interaktivitas ke semua komponen anak di aplikasi.

    Lokasi interaktivitas hanya dapat diatur jika mode render interaktif (-int|--interactivity) tidak None dan autentikasi tidak diaktifkan.

    Untuk membuat aplikasi tanpa halaman sampel dan gaya, gunakan -e|--empty opsi :

    dotnet new blazor -o BlazorApp -e

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

    dotnet new blazorwasm -o BlazorApp

    Untuk membuat aplikasi mandiri Blazor WebAssembly tanpa halaman sampel dan gaya, gunakan -e|--empty opsi :

    dotnet new blazorwasm -o BlazorApp -e

Buat proyek baru:

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

    dotnet new blazorserver -o BlazorApp

  • Atau, buat Blazor Server aplikasi tanpa kode demonstrasi dan Bootstrap menggunakan blazorserver-empty templat proyek:

    dotnet new blazorserver-empty -o BlazorApp

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

    dotnet new blazorwasm -o BlazorApp

  • Atau, buat aplikasi mandiri Blazor WebAssembly tanpa kode demonstrasi dan Bootstrap menggunakan blazorwasm-empty templat proyek:

    dotnet new blazorwasm-empty -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

  • Atau, buat aplikasi yang dihosting Blazor WebAssembly tanpa kode demonstrasi dan Bootstrap menggunakan blazorwasm-empty templat dengan opsi yang dihosting:

    dotnet new blazorwasm-empty -o BlazorApp -ho

Buat proyek baru:

  • 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

BlazorApp Buka folder di Visual Studio Code.

Saat Visual Studio Code meminta Anda menambahkan aset untuk membangun dan men-debug proyek, pilih Ya.

Jika Visual Studio Code tidak secara otomatis menawarkan untuk menambahkan aset build dan debug (.vscodefolder dengan launch.json file dan tasks.json ), pilih Tampilkan>Palet Perintah dan ketik ".NET" ke dalam kotak pencarian. Dari daftar perintah, pilih perintah ".NET: Generate Assets for Build and Debug".

Catatan

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

File proyek Properties/launchSettings.json menyertakan inspectUri properti untuk proksi penelusuran kesalahan untuk profil apa pun di bagian profiles file:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

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.

Penting

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

Saat aplikasi diluncurkan, hanya Properties/launchSettings.json file dalam proyek yang Server digunakan.

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"
    }
  ]
}

Tekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS) untuk menjalankan aplikasi.

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",
    ...
],
...

Tekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS) untuk menjalankan aplikasi.

Mempercayai sertifikat pengembangan

Untuk informasi selengkapnya, lihat Menerapkan HTTPS di ASP.NET Core.

File solusi Visual Studio (.sln)

Solusinya adalah kontainer untuk mengatur satu atau beberapa proyek kode terkait. Visual Studio menggunakan file solusi (.sln) untuk menyimpan pengaturan solusi. File solusi menggunakan format unik dan tidak dimaksudkan untuk diedit secara langsung.

Alat di luar Visual Studio dapat berinteraksi dengan file solusi:

  • .NET CLI 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.
  • Visual Studio Code dapat menjalankan dotnet sln perintah dan perintah .NET CLI lainnya melalui terminal terintegrasinya tetapi tidak menggunakan pengaturan dalam file solusi secara langsung.

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 ini dalam dokumentasi Visual Studio:

Menggunakan Visual Studio Code untuk pengembangan lintas platform Blazor

Visual Studio Code adalah Lingkungan Pengembangan Terpadu (IDE) lintas platform sumber terbuka yang dapat digunakan untuk mengembangkan Blazor aplikasi. Gunakan .NET CLI untuk membuat aplikasi baru Blazor untuk pengembangan dengan Visual Studio Code. Untuk informasi selengkapnya, lihat versi Linux/macOS dari artikel ini.

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

Blazor opsi templat

Blazor Kerangka kerja ini menyediakan templat 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
  • Blazor WebAssembly Templat proyek aplikasi mandiri: 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.

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 blazor -h
    • dotnet new blazorwasm -h
  • 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
  • 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: