Binding data to an @onclick event

Question

Hi, I am trying to transfer what was a WPF desktop app to a Blazor app (.net 8). I tried the following code in Telerik REPL for Blazor and it worked as expected:

<h3>AntCalc</h3>  
<label>Please enter frequency in Mhz: </label> 
<input @bind="freq" /> 
<p role="status">Wavelength: @wavelength m.</p>  

<button class="btn btn-primary" @onclick="Calc">Enter</button>

@code {     

public double freq { get; set; }     
public double wavelength = 0;      
private void Calc()     
	{         
		wavelength = 300 / freq;     
	}       
}

However, when I transfer it to the app in development in VS, with the addition of an @page directive at the top, the onclick event doesn't bind to the Calc() function as it should and the result remains '0'. Probably something simple that I am overlooking but it's been bugging me for days now. GitHub repo is at https://github.com/m0cvo/AntCalcB Any help would be appreciated.

Answer 1

Add @rendermode InteractiveWebAssembly to the top of the page. Next, build and restart the application.

@page "/frequency"
@rendermode InteractiveWebAssembly
<h3>Frequency</h3>

<label>Please enter frequency in Mhz: </label>
<input @bind="freq" />
<p role="status">Wavelength: @wavelength m.</p>

<button class="btn btn-primary" @onclick="Calc">Enter</button>


@code {

	public double freq { get; set; } = 1;
	public double wavelength = 0;
	private void Calc()
	{
		wavelength = 300 / freq;
	}
}