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

--

--

--

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What The Heck Is Continuous Integration (CI), Delivery (CD), And Deployment (CDP)? — Codefresh

Book Log: Agile Web Development with Rails 5.1

Our suggested way to analyze changes in your flutter app using GitHub actions and diffuse

How to Shrinker may have failed to optimize the Java bytecode

Launch of ELFI staking on the ELYFI BSC network

Kata Containers vPTG: Community Gathering, New Features, and A Glimpse of Kata 3.0

I was in Austin for the Artifact Conference

Thumbnails of Artifact Conference attendants at the photo booth

Best Mac App Remover 2015

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Bhapkar

Vaibhav Bhapkar

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

More from Medium

.NET and SharePoint Online with Azure AD

Blazor Server Project #11: Migrate from ASP.NET Core 3.1 to 6.0

.NET Unit Testing Code Coverage Report in Azure DevOps Build Pipeline

Publish a .NET Console App to Chocolatey using GitHub Actions