Blazor

Pengenalan Blazor

Apa itu Blazor, dua hosting model utamanya (Server & WebAssembly), dan cara menjalankan project pertamamu.

Component Dasar

Membuat component lewat file .razor, campuran markup HTML dan blok kode C#.

Data Binding dengan @bind

Two-way data binding pada input form lewat directive @bind.

Event Handling di Blazor

Menangani interaksi pengguna lewat atribut @onclick, @onsubmit, dan event lainnya.

Parameters: Mengirim Data ke Component Anak

Mendefinisikan properti yang bisa diisi dari luar component lewat atribut [Parameter].

Conditional Rendering: @if

Menampilkan elemen secara kondisional lewat blok @if/@else biasa dari C#.

List Rendering: @foreach

Menampilkan koleksi data sebagai daftar elemen lewat @foreach.

Component Composition & RenderFragment

Menyisipkan konten kustom ke component anak lewat RenderFragment, setara children di React.

EventCallback: Komunikasi Anak ke Induk

Mengirim event dari component anak kembali ke induk lewat EventCallback.

Dependency Injection dengan @inject

Menyuntikkan Service ke component lewat directive @inject.

Routing: Directive @page

Mendaftarkan halaman lewat directive @page langsung di file component-nya.

Route Parameters

Mengambil parameter dinamis dari URL lewat placeholder di @page dan atribut [Parameter].

Lifecycle Methods

Menjalankan kode di titik tertentu siklus hidup component lewat method override, mis. OnInitializedAsync.

Forms & Validation

Membangun form dengan validasi otomatis lewat EditForm dan DataAnnotations.

HttpClient & Fetching Data

Mengambil data dari API lewat HttpClient, dikombinasikan dengan lifecycle method untuk loading state.

CascadingParameter

Membagikan data ke banyak component turunan tanpa passing Parameter manual di tiap level.

Blazor Server vs WebAssembly

Perbedaan mendasar dua hosting model Blazor: di mana kode C#-nya benar-benar berjalan.

JS Interop Dasar

Memanggil fungsi JavaScript dari C# (dan sebaliknya) lewat IJSRuntime, untuk kasus yang tidak bisa ditangani Blazor murni.

Tugas Akhir

Latihan akhir menggabungkan @bind, @foreach, EventCallback, dan lifecycle method dalam satu aplikasi Todo List.