Dasar-dasar Blazor ASP.NET Core

Artikel Dasar-dasar memberikan panduan tentang konsep Blazor dasar. Beberapa konsep terkait dengan pemahaman dasar tentang komponen Razor, yang dijelaskan lebih lanjut di bagian berikutnya dari artikel ini dan dibahas secara mendetail dalam artikel Komponen.

Konsep penyajian klien dan server

Sepanjang Blazor dokumentasi, aktivitas yang terjadi pada sistem pengguna dikatakan terjadi di sisi klien atau sisi klien. Aktivitas yang terjadi di server dikatakan terjadi di server atau sisi server.

Istilah penyajian berarti menghasilkan markup HTML yang ditampilkan browser.

• Penyajian sisi klien (CSR) berarti markup HTML akhir dihasilkan oleh runtime .NET WebAssembly pada klien. Tidak ada HTML untuk UI yang dihasilkan klien aplikasi yang dikirim dari server ke klien untuk jenis penyajian ini. Interaktivitas pengguna dengan halaman diasumsikan. Tidak ada konsep seperti penyajian sisi klien statis . CSR diasumsikan interaktif, sehingga "penyajian sisi klien interaktif" dan "CSR interaktif" tidak digunakan oleh industri atau dalam Blazor dokumentasi.

• Penyajian sisi server (SSR) berarti markup HTML akhir dihasilkan oleh runtime ASP.NET Core di server. HTML dikirim ke klien melalui jaringan untuk ditampilkan oleh browser klien. Tidak ada HTML yang dibuat oleh klien untuk UI yang dihasilkan server aplikasi untuk jenis penyajian ini. SSR dapat terdiri dari dua varietas:

  • SSR statis: Server menghasilkan HTML statis yang tidak menyediakan interaktivitas pengguna atau mempertahankan Razor status komponen.
  • SSR interaktif: Blazor peristiwa memungkinkan interaktivitas pengguna dan Razor status komponen dikelola oleh Blazor kerangka kerja.

• Pra-penyajian adalah proses awalnya merender konten halaman di server tanpa mengaktifkan penanganan aktivitas untuk kontrol yang dirender. Server mengeluarkan UI HTML halaman sesegera mungkin sebagai respons terhadap permintaan awal, yang membuat aplikasi merasa lebih responsif terhadap pengguna. Pra-penyajian juga dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang digunakan mesin pencari untuk menghitung peringkat halaman. Pra-penyajian selalu diikuti oleh penyajian akhir, baik di server atau klien.

Komponen Razor

Aplikasi Blazor didasarkan pada komponen Razor, sering disebut hanya sebagai komponen. Komponen adalah elemen UI, seperti halaman, dialog, atau formulir entri data. Komponen adalah kelas C# .NET yang dibangun dalam rakitan .NET.

Razor mengacu pada bagaimana komponen biasanya ditulis dalam bentuk halaman markup Razor untuk logika dan komposisi UI sisi klien. Razor adalah sintaks untuk menggabungkan markup HTML dengan kode C# yang dirancang untuk produktivitas pengembang. File Razor menggunakan ekstensi file .razor.

Meskipun beberapa pengembang Blazor dan sumber daya online menggunakan istilah "komponen Blazor", dokumentasi menghindari istilah tersebut dan secara universal menggunakan "komponen Razor" atau "komponen".

Dokumentasi Blazor mengadopsi beberapa konvensi untuk menampilkan dan mendiskusikan komponen:

• Umumnya, contoh mematuhi konvensi pengodean ASP.NET Core/C# dan pedoman teknik. Untuk informasi selengkapnya, lihat sumber daya berikut ini:
  • panduan rekayasa kerangka kerja ASP.NET Core (dotnet/aspnetcore repositori GitHub)
  • Konvensi Pengodean C# (panduan C#)
• Kode proyek, jalur dan nama file, nama template proyek, dan istilah khusus lainnya dalam bahasa Inggris Amerika Serikat dan biasanya dipagari kode.
• Komponen biasanya dirujuk menggunakan nama kelas C# (Pascal case) diikuti dengan kata "komponen". Misalnya, komponen pengunggahan file umumnya disebut sebagai "komponen FileUpload".
• Biasanya, nama kelas C# komponen sama dengan nama filenya.
• Komponen yang dapat dirutekan biasanya mengatur URL relatifnya ke nama kelas komponen dalam kebab-case. Misalnya, komponen FileUpload menyertakan konfigurasi perutean untuk mengakses komponen yang dirender pada URL relatif /file-upload. Perutean dan navigasi tercakup dalam perutean dan navigasi Blazor ASP.NET Core.
• Ketika beberapa versi komponen digunakan, komponen tersebut diberi nomor secara berurutan. Misalnya, komponen tercapai FileUpload3 di /file-upload-3.
• Razor direktif di puncak definisi komponen (.razor file) diletakkan dalam urutan berikut: @page, (@rendermode .NET 8 atau yang lebih baru), @using pernyataan, direktif lain dalam urutan alfabet.
• Meskipun untuk anggota private tidak diperlukan, pengubah akses sering digunakan dalam contoh di artikel dan aplikasi sampel. Misalnya, private dinyatakan untuk mendeklarasikan bidang bernama maxAllowedFiles sebagai private int maxAllowedFiles = 3;.
• Nilai parameter komponen dimulai dengan simbol Razor cadangan @, namun tidak diwajibkan. Literal (misalnya, nilai boolean), kata kunci (misalnya, this), dan null karena nilai parameter komponen tidak diawali dengan @, tetapi ini juga hanya konvensi dokumentasi. Kode Anda sendiri dapat mengawali literal dengan @ jika Anda mau.
• Kelas C# menggunakan this kata kunci dan menghindari bidang prefiks dengan garis bawah (_) yang ditetapkan dalam konstruktor, yang berbeda dari pedoman rekayasa kerangka kerja inti ASP.NET.
• Dalam contoh yang menggunakan konstruktor utama (C# 12 atau yang lebih baru), parameter konstruktor utama biasanya digunakan langsung oleh anggota kelas. Dalam contoh artikel, baris kode dipisahkan agar pengguliran horizontal berkurang. Jeda ini tidak memengaruhi eksekusi tetapi dapat dihapus saat menempelkan ke proyek Anda.

Informasi tambahan tentang sintaks Razor komponen disediakan di bagian Razor sintaks dari komponen ASP.NET CoreRazor.

Berikut ini adalah contoh komponen penghitung dan bagian dari aplikasi yang dibuat dari template proyek Blazor. Cakupan komponen terperinci ditemukan di artikel Komponen nanti dalam dokumentasi. Contoh berikut menunjukkan konsep komponen yang terlihat di artikel Dasar-dasar sebelum mencapai artikel Komponen nanti dalam dokumentasi.

Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Komponen Counter sebelumnya:

• Menetapkan rutenya dengan arahan @page di baris pertama.
• Menetapkan judul halaman dan judul bagian.
• Menampilkan jumlah saat ini dengan @currentCount. currentCount adalah variabel bilangan bulat yang ditentukan dalam kode C# dari blok @code.
• Menampilkan tombol untuk memicu metode IncrementCount, yang juga ditemukan di blok @code dan meningkatkan nilai variabel currentCount.

Model Objek Dokumen (DOM)

Referensi ke Model Objek Dokumen menggunakan singkatan DOM.

Untuk informasi selengkapnya, lihat sumber daya berikut:

• Pengantar DOM (dokumentasi MDN)
• Spesifikasi Model Objek Dokumen Tingkat 1 (W3C)

Subset API .NET untuk aplikasi Blazor WebAssembly

Daftar terpilih dari API .NET tertentu yang didukung di browser untuk Blazor WebAssembly tidak tersedia. Namun, Anda dapat secara manual mencari daftar API .NET yang dianotasi dengan [UnsupportedOSPlatform("browser")] untuk menemukan API .NET yang tidak didukung di WebAssembly.

Untuk informasi selengkapnya, lihat sumber daya berikut:

• Pustaka kelas: Penganalisis kompatibilitas browser sisi klien
• Menganotasi API sebagai tidak didukung pada platform tertentu (dotnet/designs repositori GitHub

Aplikasi sampel

Aplikasi sampel dokumentasi tersedia untuk diperiksa dan diunduh:

Blazor sampel repositori GitHub (dotnet/blazor-samples)

Temukan aplikasi sampel dengan terlebih dahulu memilih folder versi yang cocok dengan versi .NET yang sedang Anda kerjakan.

Untuk informasi selengkapnya, daftar sampel di repositori, dan instruksi pengunduhan, lihat sampel Blazor file README repositori GitHub.

Aplikasi Pengujian Dasar repositori ASP.NET Core juga merupakan serangkaian sampel yang berguna untuk berbagai Blazor skenario:

BasicTestApp di sumber referensi ASP.NET Core (dotnet/aspnetcore)

Kelipatan byte

Ukuran byte dalam .NET menggunakan awalan metrik untuk kelipatan byte non-desimal berdasarkan kelipatan 1024.

Permintaan dukungan

Hanya masalah terkait dokumentasi yang sesuai untuk repositori dotnet/AspNetCore.Docs. Untuk dukungan produk, jangan buka masalah dokumentasi. Cari bantuan melalui satu atau beberapa saluran dukungan berikut:

• Stack Overflow (diberi tag: blazor)
• Tim ASP.NET Core Slack Umum
• Blazor Gitter

Untuk kemungkinan bug dalam kerangka kerja atau umpan balik produk, buka masalah untuk unit produk ASP.NET Core di masalah dotnet/aspnetcore. Laporan bug biasanya memerlukan berikut ini:

• Penjelasan masalah yang jelas: Ikuti petunjuk di template masalah GitHub yang disediakan oleh unit produk saat membuka masalah.
• Proyek repro minimal: Tempatkan proyek di GitHub untuk diunduh dan dijalankan oleh teknisi unit produk. Hubungkan silang proyek ke dalam komentar pembuka isu.

Untuk kemungkinan masalah dengan artikel Blazor, buka masalah dokumentasi. Untuk membuka masalah dokumentasi, gunakan tautan Buka umpan balik masalah dokumentasi di bagian bawah artikel. Metadata yang ditambahkan ke masalah Anda menyediakan data pelacakan dan secara otomatis melakukan ping pada penulis artikel. Jika subjek dibahas dengan unit produk sebelum membuka masalah dokumentasi, tempatkan tautan silang ke masalah rekayasa dalam komentar pembukaan masalah dokumentasi.

Untuk masalah atau umpan balik di Visual Studio, gunakan gerakan Laporkan Masalah atau Sarankan Fitur dari dalam Visual Studio, yang membuka masalah internal untuk Visual Studio. Untuk informasi selengkapnya, lihat Umpan Balik Visual Studio.

Untuk masalah dengan Visual Studio Code, mintalah dukungan di forum dukungan komunitas. Untuk laporan bug dan umpan balik produk, buka masalah di repo GitHub microsoft/vscode.

Masalah GitHub untuk dokumentasi Blazor secara otomatis ditandai untuk pemilahan pada proyek Blazor.Docs (repositori GitHub dotnet/AspNetCore.Docs). Harap tunggu beberapa saat untuk memperoleh respons, terutama saat akhir pekan dan hari libur. Biasanya, pembuat dokumentasi merespons dalam waktu 24 jam pada hari kerja.

Tautan komunitas ke sumber daya Blazor

Untuk kumpulan tautan ke sumber daya Blazor yang dikelola oleh komunitas, kunjungi Awesome Blazor.