In this article I will explain with an example, how to use Button Click event in Blazor App using ASP.Net Core (.Net Core 10) and Visual Studio 2026.
Note: For beginners in Blazor App (.Net Core 10), please refer my article .Net Core 10: Blazor Hello World - Create First App in 10 mins.
 

Software Information

This article makes use of Visual Studio 2026 and .Net CoreCore 10.
 

Code

This code is a standard Blazor component that dynamically displays a string on a webpage when the Button is clicked. Here is the breakdown:
 

Directive

@page: This is the routing directive and it tells Blazor that this component should be loaded when you visit the root URL (the home page) of the application.
@renderMode: Set as Interactive, so that the changes are reflected on the page.
Note: For more information, please refer my article .Net Core 10 Blazor: What is @rendermode InteractiveServer?.
 

MetaData

PageTitle - This is use to set the Page Title.
 

HTML Markup

The HTML Markup consists a HTML INPUT Button which has been assigned with a server-side click event handler and below that there is an H1 tag within which the name variable is printed using razor syntax.
 

@Code Block

The very first thing, is to declare a variable name.
Then inside the Print method, the name variable is initialized and set with a value.
@page "/"
@rendermode InteractiveServer
<PageTitle>Home</PageTitle>
 
@code {
    string? name;
 
    private void Print()
    {
         name = "Blazor";
    }
}
<input type="button" id="btnPrint" value="Print" @onclick = "Print" />
<h1>Hello, world!@name</h1>
 
 
 
 

Screenshot

.Net Core 10 Blazor: Learn Button Click event in 10 minutes
 
 

Testing Log

Compiled in: Visual Studio 2026
Framework: .Net Core 10.
Result: 100% Success
 
 

Downloads

Download Code