Blazor Events

In this article, we will explore events in Blazor,

Events are executed in the response of interaction, for example, click event fires when we click on particular control of webpage or OnChange event fires when we change the value of dropdown or change in checkbox selection.

Let’s check out the example below which contains the onclick event on the delete button and onchange event on radio button selection which will display and hides the delete buttons.

Productlist.razor

@page “/”
@inherits ProductlistBase
<h3>Productlist</h3>
@if (Products == null)
{
<div class=”spinner”></div>
}
else
{
<div>
<input type=”checkbox” value=”Select Option” @onchange=”@(()=>displayButton=!displayButton)”/>
<br/>
@foreach (var product in Products)
{
<span>Product Id: @product.productId</span>
<span>Product Name: @product.ProductName</span>
@if (displayButton)
{
<button type=”button” name=”Delete” @onclick=”DeleteProduct”>Delete</button>
}
<br/>
}
</div>
}

productlistBase.cs

using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Pages
{
public class ProductlistBase:ComponentBase
{
[Inject]
public IProductService productService { get; set; }
public IEnumerable<Product> Products { get; set; }
public bool displayButton { get; set; } = false;
protected override async Task OnInitializedAsync()
{
Products = (await productService.GetProducts()).ToList();
}
public void DeleteProduct()
{
Console.WriteLine(“Testing”);
}
}
}

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com