JS Interop Dasar — CompileDaily Study

Penjelasan

Ada kalanya Blazor perlu memanggil API browser yang belum punya wrapper C# bawaan (mis. localStorage, animasi CSS kompleks) — dilakukan lewat JS Interop, di-@inject IJSRuntime, lalu panggil InvokeAsync<T>("namaFungsiJs", argumen...) untuk menjalankan fungsi JavaScript yang sudah didefinisikan di file .js terpisah.

Contoh Konsep

@* wwwroot/js/localstorage.js *@
@* export function simpan(key, value) {
    localStorage.setItem(key, value);
} *@

@inject IJSRuntime JS

<button @onclick="SimpanData">Simpan ke localStorage</button>

@code {
    private async Task SimpanData()
    {
        await JS.InvokeVoidAsync("simpan", "nama", "CompileDaily");
    }
}

Praktikum

Buat contoh pemanggilan JS Interop: @inject IJSRuntime JS, method async TampilkanAlert() yang memanggil JS.InvokeVoidAsync("alert", "Halo dari Blazor!") — memakai fungsi alert() bawaan browser langsung tanpa perlu file .js terpisah.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Pakai JS Interop HANYA kalau memang benar-benar dibutuhkan (API browser yang belum ada wrapper C#-nya) — untuk kebutuhan UI biasa (styling, kondisional, data binding), tetap pakai fitur Blazor native, karena JS Interop menambah kompleksitas dan sedikit overhead komunikasi antara dunia C# dan JavaScript.