Data Binding Dua Arah pada ASP NET Core Blazor

Menggunakan @bind="@field", @bind="@property", @bind:event="oninput"

Pendahuluan

Pada data binding satu arah, field atau properti pada bagian @code logika diikat ke keluaran pada HTML untuk ditampilkan. Setiap perubahan nilai field atau properti pada bagian@code logika secara otomatis ditampilkan oleh HTML. Hal ini sudah dibahas pada tulisan sebelumnya.

Data Binding Satu Arah dan Event Binding pada ASP NET Core Blazor

Data binding dua arah mengikat elemen input dalam blok HTML ke field atau property di blok @code C# dan sebaliknya. Elemen input menampilkan nilai field atau property. Sebaliknya, mengubah nilai elemen input di blok HTML akan mengubah nilai field atau nilai property di blok @code C#.

Data binding dua arah

• Tambahkan @bind = "@field" atau @bind = "@property" ke elemen input di blok HTML untuk mengikatnya ke field atau property di blok @code C#.
• Sebagai contoh, lihat file komponen Tanggal.razor berikut.

• Perhatikan panah kuning pada gambar di atas. Elemen input dalam blok HTML pada baris 3 menampilkan tanggal dan hari saat ini secara default, yaitu nilai tanggal dalam blok @code C#. Berarti ini adalah output data binding. Jika Anda memasukkan nilai baru ke dalam elemen input pada baris 3, itu akan mengubah nilai tanggal pada baris 10. Ini adalah input data binding. Dengan demikian, panah kuning menunjukkan data binding dua arah.
• Mari kita lihat dua panah merah. Elemen pada baris 5 dan 7 menampilkan nilai tanggal pada baris 10. Ini merupakan data binding satu arah.
• Berikut adalah tampilan laman default.

• Secara default, komponen menampilkan tanggal hari ini dan nama harinya.

• Setiap perubahan data masukan secara otomatis diikuti dengan perubahan keluarannya.

Event On Change

• Blazor akan memperbarui nilai keluaran setelah event onchange terjadi.
• Event onchange muncul setelah kotak input kehilangan fokus sehingga ketika mengetikkan data input — berarti fokus masih di dalam kotak input — keluarannya tidak langsung berubah.
• Sebagai contoh, lihat komponen untuk menghitung kurs mata uang dolar ke rupiah yang disimpan dalam file komponen KursV1.razor berikut.

• Data binding pertama mengikat data masukan dari elemen HTML baris 5 dan 7 ke bagian @code logika baris 16.
• Data binding kedua mengikat data dari bagian @code logika baris 16 ke keluaran pada elemen HTML baris 11 dan 13.
• Mari kita lihat dua panah garis putus-putus merah pada gambar di atas. Elemen input pada baris 5 dan 7, secara default, menampilkan nilai awal dari baris 16. Jadi, ini adalah output data binding. Jika Anda memasukkan nilai @tanggal pada baris 5, itu akan mengubah nilai @tanggal pada baris 16. Input @dolarpada baris 7 mengubah nilai dollar pada baris 16. Ini adalah input data binding. Dengan demikian, dua panah garis putus-putus merah menunjukkan data binding dua arah.
• Tiga panah garis merah menerus adalah data binding satu arah. Elemen pada baris 11 dan 13 menampilkan nilai field pada baris 16.
• Dua panah garis putus-putus kuning adalah event binding. Dengan mengklik tombol Click to calculate akan memproses metode Calculate().

• Ketika ke dalam kotak input pertama diketik 13950, keluarannya tidak langsung berubah, tetap 14000. Keluarannya berubah menjadi 13950 setelah fokus pindah ke kotak input kedua.
• Begitu pula ketika ke dalam kotak input kedua diketik 125, keluarannya tidak langsung berubah, tetap 0. Keluarannya berubah menjadi 125 setelah fokus pindah ke tombol Klik untuk menghitung.
• Hal itu karena event onchange terjadi setelah kotak input kehilangan fokus terlebih dahulu.

Menggunakan@bind:event = "oninput"

• Event onchange dapat diubah ke event oninput dengan menggunakan pernyataan @bind:event = "oninput" sehingga setiap ketikan pada kotak input secara otomatis mengubah keluarannya.
• Sebagai contoh, lihat file komponen KursV2.razor berikut.

• Perhatikan atribut @bind:event="oninput" pada baris 5 dan 7. Dengan adanya pernyataan itu, ketika Anda mengetik di kotak input,, event oninput terjadi dan memicu input data binding sehingga setiap ketikan pada kotak input, secara otomatis juga ikut terketik pada keluarannya.
• Dengan mengklik tombol Klik untuk menghitung, event onclick terjadi dan memicu metode Calculate().

Membuat Komponen

Untuk memudahkan pembuatan komponen, copy kode berikut, lalu paste ke file komponen di Visual Studio.

File Tanggal.razor

@page "/tanggal"
<p>Date input: <input @bind="@tanggal" type="date"/></p>
<h3>Date: @tanggal.ToString("dd MMMM yyyy")</h3>
<h3>Day: @tanggal.ToString("dddd")</h3>
@code {
    public DateTime tanggal { get; set; } = DateTime.Today;
}

File KursV1.razor

@page "/kursV2"
<h2>Kurs mata uang dolar ke rupiah</h2>
<p>Satu dolar = <input @bind="@kursDolar" type="number" />rupiah</p>
<p>Berapa dolar uang Anda? <input @bind="@dolar" type="number" /></p>
<button class="btn btn-primary" @onclick="HitungKurs">
Klik untuk menghitung</button>
<p><br>Anda memiliki $ @dolar </p>
<p>Dengan kurs Rp @kursDolar per $, setara dengan Rp @rupiah</p>
@code {
    int kursDolar = 14000, dolar = 0, rupiah = 0;
void HitungKurs()
    {
        rupiah = dolar * kursDolar;
    }
}

File KursV2.razor

@page "/kursV2"
<h2>Kurs mata uang dolar ke rupiah</h2>
<p>Satu dolar = <input @bind="@kursDolar" type="number"
@bind:event="oninput" /> rupiah</p>
<p>Berapa dolar uang Anda? <input @bind="@dolar" type="number" @bind:event="oninput" /></p>
<button class="btn btn-primary" @onclick="HitungKurs">
Klik untuk menghitung</button>
<p><br>Anda memiliki $ @dolar </p>
<p>Dengan kurs Rp @kursDolar per $, setara dengan Rp @rupiah</p>
@code {
    int kursDolar = 14000, dolar = 0, rupiah = 0;
    void HitungKurs()
    {
        rupiah = dolar * kursDolar;
    }
}

File NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorWebAssemblyApp</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
   <ul class="nav flex-column">
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span>
            Counter
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span>
            Fetch data
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="TglHariIni">
            <span class="oi oi-calendar" aria-hidden="true"></span>
            Tgl Hari Ini
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="tanggal">
            <span class="oi oi-calendar" aria-hidden="true"></span>
            Tanggal dan hari
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="kursV1">
            <span class="oi oi-dollar" aria-hidden="true"></span>
            Kurs $→Rp versi 1
         </NavLink>
      </li>
      <li class="nav-item px-3">
         <NavLink class="nav-link" href="kursV2">
            <span class="oi oi-dollar" aria-hidden="true"></span>
            Kurs $→Rp versi 2
         </NavLink>
      </li>
   </ul>
</div>
@code {
   private bool collapseNavMenu = true;
   private string NavMenuCssClass => collapseNavMenu ?
                  "collapse" : null;
   private void ToggleNavMenu()
   {
      collapseNavMenu = !collapseNavMenu;
   }
}

Yang dicetak tebal adalah menu tambahan terkait dengan tiga komponen baru yang ditambahkan ke proyek.

Semoga berfaedah. Umpan balik Anda akan sangat berharga.

Jika Anda gemar membaca dan ingin menjadi anggota, Anda dapat bergabung dengan Medium via link referensi saya.

Join Medium with my referral link - M. Ramadhan

Saya akan memperoleh sedikit komisi, dan Anda akan mendapatkan akses penuh ke Medium.

Referensi

ASP.NET Core Blazor data binding

ASP.NET Core Blazor event handling

Microsoft Blazor