Blazor 点击计算器

Question

我是 C# 初学者，我想用 C# 和 blazor 编写一个计算器，但我不知道怎么做。 我的 HTML 已经完成，但我不知道 blazor 界面是如何工作的 这是我的 HTML： 谁能告诉我如何开始？

  @page "/calculator"
<PageTitle>Calculator</PageTitle>

<h1>Calculator</h1>
<div class="display">  
<p id="output">0</p>
<div class="first-row">
   <button id="r1-1">C</button>
   <button id="r1-3">%</button>
   <button id="r1-4">/</button>
</div>
<div class="second-row">
   <button id="r2-1" >7</button>
   <button id="r2-2" >8</button>
   <button id="r2-3" >9</button>
   <button id="r2-4" >x</button>
</div>
<div class="third-row">
   <button id="r3-1" >4</button>
   <button id="r3-2" >5</button>
   <button id="r3-3" >6</button>
   <button id="r3-4" >-</button>
</div>
<div class="fourth-row">
   <button id="r4-1"  >1</button>
   <button id="r4-2"  >2</button>
   <button id="r4-3"  >3</button>
   <button id="r4-4"  >+</button>
</div>
<div class="fifth-row">
  <button id="r5-1" >0</button>
  <button id="r5-2" >.</button>
  <button id="r5-3" >=</button>
</div>
 </div>

@code {
    
}

Answer 1

对于 blazor 按钮，您需要添加 onclick 函数。

例如：

<button @onclick="() => SomeFunction(5)" id="r5-3">5</button>

@code
{
   public void SomeFunction(int number)
   {
     Console.WriteLine(number);
   }
}