ASP.NET Core Blazor

Selamat datang di Blazor!

Blazor adalah kerangka kerja web frontend .NET yang mendukung penyajian sisi server dan interaktivitas klien dalam satu model pemrograman:

• Buat UI interaktif yang kaya menggunakan C#.
• 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.
• Bangun aplikasi desktop dan seluler hibrid dengan .NET dan Blazor.

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

• Tulis kode di C#, yang dapat meningkatkan produktivitas dalam pengembangan dan pemeliharaan aplikasi.
• Manfaatkan ekosistem .NET yang ada dari pustaka .NET.
• Manfaatkan performa, keandalan, dan keamanan .NET.
• Tetap produktif di Windows, Linux, atau macOS dengan lingkungan pengembangan, seperti Visual Studio atau Visual Studio Code. Integrasikan dengan platform hosting modern, seperti Docker.
• Build sekumpulan bahasa, kerangka kerja, dan alat umum yang stabil, kaya fitur, dan mudah digunakan.

Catatan

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

Komponen

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

Komponen adalah kelas .NET C# yang dibangun ke dalam rakitan .NET yang:

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

Kelas komponen biasanya ditulis dalam bentuk halaman markup Razor dengan ekstensi file .razor. Komponen dalam Blazor secara resmi disebut sebagai komponen Razor, secara informal disebut sebagai komponen Blazor. Razor adalah sintaks untuk menggabungkan markup HTML dengan kode C# yang dirancang untuk produktivitas pengembang. Razor memungkinkan Anda untuk beralih antara markup HTML dan C# dalam file yang sama dengan dukungan pemrograman IntelliSense di Visual Studio.

Blazor menggunakan tag HTML alami untuk komposisi UI. Markup berikut Razor menunjukkan komponen yang menaikkan penghitung saat pengguna memilih tombol.

<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++;
    }
}

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

Membangun aplikasi web tumpukan penuh dengan Blazor

Blazor Web Apps menyediakan arsitektur berbasis komponen dengan penyajian sisi server dan interaktivitas sisi klien penuh dalam satu solusi, di mana Anda dapat beralih antara mode penyajian sisi server dan sisi klien dan bahkan mencampurnya di halaman yang sama.

Blazor Web Apps dapat dengan cepat mengirimkan UI ke browser dengan merender konten HTML secara statis dari server sebagai respons terhadap permintaan. Halaman dimuat dengan cepat karena penyajian UI dilakukan dengan cepat di server tanpa perlu mengunduh bundel JavaScript besar. Blazor juga dapat lebih meningkatkan pengalaman pengguna dengan berbagai peningkatan progresif pada penyajian server, seperti navigasi yang ditingkatkan dengan posting formulir dan penyajian streaming konten yang dihasilkan secara asinkron.

Blazormendukung penyajian sisi server interaktif (SSR interaktif), di mana interaksi UI ditangani dari server melalui koneksi real time dengan browser. SSR interaktif memungkinkan pengalaman pengguna yang kaya seperti yang diharapkan dari aplikasi klien tetapi tanpa perlu membuat titik akhir API untuk mengakses sumber daya server. Konten halaman untuk halaman interaktif telah dirender sebelumnya, di mana konten di server awalnya dihasilkan dan dikirim ke klien 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.

Blazor Web Apps mendukung interaktivitas dengan penyajian sisi klien (CSR) yang bergantung pada runtime .NET yang dibuat dengan WebAssembly yang dapat Anda unduh dengan aplikasi Anda. Saat berjalan Blazor di WebAssembly, kode .NET Anda dapat mengakses fungsionalitas penuh browser dan interop dengan JavaScript. Kode .NET Anda berjalan di kotak pasir keamanan browser dengan perlindungan yang disediakan kotak pasir terhadap tindakan berbahaya pada komputer klien.

Blazor aplikasi sepenuhnya dapat menargetkan berjalan di WebAssembly di browser tanpa keterlibatan server. Untuk aplikasi mandiriBlazor WebAssembly, aset disebarkan sebagai file statis ke server web atau layanan yang mampu melayani konten statis kepada klien. Setelah diunduh, aplikasi mandiri Blazor WebAssembly dapat di-cache dan dijalankan secara offline sebagai Aplikasi Web Progresif (PWA).

Membangun aplikasi klien asli dengan Blazor Hybrid

Blazor Hybrid memungkinkan penggunaan Razor komponen dalam aplikasi klien asli dengan perpaduan teknologi asli dan web untuk platform web, seluler, dan desktop. Kode berjalan secara asli dalam proses .NET dan merender UI web ke kontrol yang disematkan Web View menggunakan saluran interop lokal. WebAssembly tidak digunakan di aplikasi Hibrid. Aplikasi hibrid dibangun dengan .NET Multi-platform App UI (.NET MAUI), yang merupakan kerangka kerja lintas platform untuk membuat aplikasi seluler dan desktop asli dengan C# dan XAML.

Mendukung Blazor HybridWindows Presentation Foundation (WPF) dan Formulir Windows ke aplikasi transisi dari teknologi sebelumnya ke .NET MAUI.

Langkah berikutnya

BlazorTutorial - Membangun aplikasipertama Blazor Anda ASP.NET platform yang didukung Core Blazor