Blazor click计算器

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);
   }
}