ASP.NET Core Blazor

  • Artikel
  • 7 menit untuk membaca

Selamat datang Blazordi!

Blazor adalah kerangka kerja untuk membangun antarmuka pengguna web sisi klien interaktif dengan .NET:

  • Buat UI interaktif yang kaya menggunakan C# alih-alih JavaScript.
  • Bagikan logika aplikasi sisi server dan sisi klien yang ditulis dalam .NET.
  • Render UI sebagai HTML dan CSS untuk dukungan browser yang luas, termasuk browser seluler.
  • Integrasikan dengan platform hosting modern, seperti Docker.
  • Bangun aplikasi desktop dan seluler hibrid dengan .NET dan Blazor.
  • Buat UI interaktif yang kaya menggunakan C# alih-alih JavaScript.
  • Bagikan logika aplikasi sisi server dan sisi klien yang ditulis dalam .NET.
  • Render UI sebagai HTML dan CSS untuk dukungan browser yang luas, termasuk browser seluler.
  • Integrasikan dengan platform hosting modern, seperti Docker.

Menggunakan .NET untuk pengembangan web sisi klien menawarkan keuntungan berikut:

  • Tulis kode di C# alih-alih JavaScript.
  • Manfaatkan ekosistem .NET yang ada dari pustaka .NET.
  • Bagikan logika aplikasi di seluruh server dan klien.
  • Manfaatkan dari . Performa, keandalan, dan keamanan NET.
  • Tetap produktif di Windows, Linux, atau macOS dengan lingkungan pengembangan, seperti Visual Studio atau Visual Studio Code.
  • Build sekumpulan bahasa, kerangka kerja, dan alat umum yang stabil, kaya fitur, dan mudah digunakan.

Catatan

Blazor Untuk tutorial mulai cepat, lihat Membuat aplikasi pertama Blazor Anda.

Komponen

Blazor aplikasi didasarkan pada komponen. Komponen di Blazor adalah elemen UI, seperti halaman, dialog, atau formulir entri data.

Komponen adalah kelas .NET C# yang terpasang dalam rakitan .NET yang:

  • Tentukan logika penyajian UI yang fleksibel.
  • Menangani peristiwa pengguna.
  • Dapat disarangkan dan digunakan kembali.
  • Dapat dibagikan dan didistribusikan sebagai Razor pustaka kelas atau paket NuGet.

Kelas komponen biasanya ditulis dalam bentuk Razor halaman markup dengan .razor ekstensi file. Komponen dalam Blazor secara resmi disebut sebagai Razor komponen, secara informal sebagai Blazor komponen. Razor adalah sintaks untuk menggabungkan markup HTML dengan kode C# yang dirancang untuk produktivitas pengembang. Razor memungkinkan Anda beralih antara markup HTML dan C# dalam file yang sama dengan dukungan pemrograman IntelliSense di Visual Studio. Razor Halaman dan MVC juga menggunakan Razor. Tidak seperti Razor Pages dan MVC, yang dibangun di sekitar model permintaan/respons, komponen digunakan khusus untuk logika dan komposisi UI sisi klien.

Blazor menggunakan tag HTML alami untuk komposisi UI. Markup berikut Razor menunjukkan komponen (Dialog.razor) yang menampilkan dialog dan memproses peristiwa saat pengguna memilih tombol:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Dalam contoh sebelumnya, OnYes adalah metode C# yang dipicu oleh peristiwa tombol onclick . Teks dialog (ChildContent) dan judul (Title) disediakan oleh komponen berikut yang menggunakan komponen ini di UI-nya.

Komponen Dialog disarangkan dalam komponen lain menggunakan tag HTML. Dalam contoh berikut, Index komponen (Pages/Index.razor) menggunakan komponen sebelumnya Dialog . Atribut tag Title meneruskan nilai untuk judul ke Dialog properti komponen Title . Teks Dialog komponen (ChildContent) diatur oleh konten <Dialog> elemen . Dialog Saat komponen ditambahkan ke Index komponen, IntelliSense di Visual Studio mempercepat pengembangan dengan penyelesaian sintaks dan parameter.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

Dialog dirender saat Index komponen diakses di browser. Saat tombol dipilih oleh pengguna, konsol alat pengembang browser menunjukkan pesan yang ditulis oleh OnYes metode :

Komponen dialog dirender di browser yang berlapis di dalam komponen Indeks. Konsol alat pengembang browser menunjukkan pesan yang ditulis oleh kode C# saat pengguna memilih Ya! di UI.

Komponen dirender ke dalam memori representasi Model Objek Dokumen (DOM) browser yang disebut pohon render, yang digunakan untuk memperbarui UI dengan cara yang fleksibel dan efisien.

Blazor Server

Blazor Server menyediakan dukungan untuk komponen hosting Razor di server di aplikasi ASP.NET Core. Pembaruan UI ditangani melalui SignalR koneksi.

Runtime tetap berada di server dan menangani:

  • Eksekusi kode C# aplikasi.
  • Pengiriman peristiwa UI dari browser ke server.
  • Menerapkan pembaruan UI ke komponen yang dirender yang dikirim kembali oleh server.

Koneksi yang digunakan oleh Blazor Server untuk berkomunikasi dengan browser juga digunakan untuk menangani panggilan interop JavaScript.

Blazor Server menjalankan kode .NET di server dan berinteraksi dengan Model Objek Dokumen pada klien melalui SignalR koneksi

Blazor Server aplikasi merender konten secara berbeda dari model tradisional untuk merender UI di aplikasi ASP.NET Core menggunakan Razor tampilan atau Razor Halaman. Kedua model menggunakan Razor bahasa untuk menjelaskan konten HTML untuk penyajian, tetapi secara signifikan berbeda dalam bagaimana markup dirender.

Razor Saat Halaman atau tampilan dirender, setiap baris kode memancarkan Razor HTML dalam bentuk teks. Setelah penyajian, server membuang halaman atau melihat instans, termasuk status apa pun yang diproduksi. Ketika permintaan lain untuk halaman terjadi, seluruh halaman dirender ke HTML lagi dan dikirim ke klien.

Blazor Server menghasilkan grafik komponen untuk ditampilkan mirip dengan HTML atau XML Document Object Model (DOM). Grafik komponen mencakup status yang disimpan di properti dan bidang. Blazor mengevaluasi grafik komponen untuk menghasilkan representasi biner markup, yang dikirim ke klien untuk penyajian. Setelah koneksi dibuat antara klien dan server, elemen statis komponen yang telah dirender diganti dengan elemen interaktif. Melakukan pra-penyajian konten di server membuat aplikasi terasa lebih responsif pada klien.

Setelah komponen interaktif pada klien, pembaruan UI dipicu oleh interaksi pengguna dan peristiwa aplikasi. Ketika pembaruan terjadi, grafik komponen dirender, dan diff UI (perbedaan) dihitung. Diff ini adalah set terkecil pengeditan DOM yang diperlukan untuk memperbarui UI pada klien. Diff dikirim ke klien dalam format biner dan diterapkan oleh browser.

Komponen dibuang setelah pengguna menavigasi menjauh dari komponen.

Blazor WebAssembly

Blazor WebAssembly adalah kerangka kerja aplikasi satu halaman (SPA) untuk membangun aplikasi web sisi klien interaktif dengan .NET. Blazor WebAssembly menggunakan standar web terbuka tanpa plugin atau mengkompilasi ulang kode ke dalam bahasa lain. Blazor WebAssembly bekerja di semua browser web modern, termasuk browser seluler.

Menjalankan kode .NET di dalam browser web dimungkinkan oleh WebAssembly (disingkat wasm). WebAssembly adalah format bytecode ringkas yang dioptimalkan untuk unduhan cepat dan kecepatan eksekusi maksimum. WebAssembly adalah standar web terbuka dan didukung di browser web tanpa plugin.

Kode WebAssembly dapat mengakses fungsionalitas penuh browser melalui JavaScript, yang disebut interoperabilitas JavaScript, sering disingkat menjadi interop atau JS interopJavaScript. Kode .NET yang dijalankan melalui WebAssembly di browser berjalan di kotak pasir JavaScript browser dengan perlindungan yang disediakan kotak pasir terhadap tindakan berbahaya pada komputer klien.

Blazor WebAssembly menjalankan kode .NET di browser dengan WebAssembly.

Blazor WebAssembly Saat aplikasi dibuat dan dijalankan di browser:

  • File kode C# dan Razor file dikompilasi ke dalam rakitan .NET.
  • Rakitan dan runtime .NET diunduh ke browser.
  • Blazor WebAssembly bootstrap runtime .NET dan mengonfigurasi runtime untuk memuat rakitan untuk aplikasi. Blazor WebAssembly Runtime menggunakan interop JavaScript untuk menangani manipulasi DOM dan panggilan API browser.

Ukuran aplikasi yang diterbitkan, ukuran payload-nya, adalah faktor performa penting untuk kegunaan aplikasi. Aplikasi besar membutuhkan waktu yang relatif lama untuk diunduh ke browser, yang mengurangi pengalaman pengguna. Blazor WebAssembly mengoptimalkan ukuran payload untuk mengurangi waktu pengunduhan:

  • Kode yang tidak digunakan dilucuti dari aplikasi saat diterbitkan oleh Pemangkas Bahasa Perantara (IL).
  • Respons HTTP dikompresi.
  • Runtime dan rakitan .NET di-cache di browser.

Blazor Hybrid

Aplikasi hibrid menggunakan perpaduan teknologi asli dan web. Aplikasi Blazor Hybrid digunakan Blazor dalam aplikasi klien asli. Razor komponen berjalan secara asli dalam proses .NET dan merender UI web ke kontrol tersemat Web View menggunakan saluran interop lokal. WebAssembly tidak digunakan dalam aplikasi Hibrid. Aplikasi hibrid mencakup teknologi berikut:

  • .NET Multi-platform App UI (.NET MAUI): Kerangka kerja lintas platform untuk membuat aplikasi seluler dan desktop asli dengan C# dan XAML.
  • Windows Presentation Foundation (WPF): Kerangka kerja UI yang independen resolusi dan menggunakan mesin penyajian berbasis vektor, dibangun untuk memanfaatkan perangkat keras grafis modern.
  • Formulir Windows: Kerangka kerja UI yang membuat aplikasi klien desktop yang kaya untuk Windows. Platform pengembangan Formulir Windows mendukung serangkaian fitur pengembangan aplikasi yang luas, termasuk kontrol, grafik, pengikatan data, dan input pengguna.

Untuk informasi selengkapnya tentang membuat Blazor Hybrid aplikasi dengan kerangka kerja sebelumnya, lihat artikel berikut ini:

Interop JavaScript

Untuk aplikasi yang memerlukan pustaka JavaScript pihak ketiga dan akses ke API browser, komponen beroperasi dengan JavaScript. Komponen mampu menggunakan pustaka atau API apa pun yang dapat digunakan JavaScript. Kode C# dapat memanggil kode JavaScript, dan kode JavaScript dapat memanggil kode C#.

Berbagi kode dan .NET Standard

Blazor mengimplementasikan .NET Standard, yang memungkinkan Blazor proyek untuk mereferensikan pustaka yang sesuai dengan spesifikasi .NET Standard. .NET Standard adalah spesifikasi formal dari API .NET yang umum di seluruh implementasi .NET. Pustaka kelas .NET Standard dapat dibagikan di berbagai platform .NET, seperti Blazor, .NET Framework, .NET Core, Xamarin, Mono, dan Unity.

API yang tidak berlaku di dalam browser web (misalnya, mengakses sistem file, membuka soket, dan utas) melempar PlatformNotSupportedException.

Sumber Daya Tambahan: