C#新手如何为已完成HTML结构的Blazor点击计算器实现交互逻辑

Blazor的交互核心是数据绑定和内置事件托管，不需要像传统前端那样写JS操作DOM，所有逻辑都可以直接在@code块用C#完成，你可以按照以下步骤逐步实现：

先在@code块里声明几个变量用来存储计算器的运行状态：

@code {
    // 计算器屏幕当前显示的内容
    private string CurrentDisplay { get; set; } = "0";
    // 存储第一个输入的操作数
    private decimal FirstNumber { get; set; }
    // 存储当前选中的运算符
    private string CurrentOperator { get; set; } = string.Empty;
    // 标记下一次输入是否需要清空当前显示（比如选完运算符后输第二个数）
    private bool IsNewInput { get; set; } = true;
}

把你原有代码里的显示标签内容替换成绑定变量，后续变量值变化时界面会自动刷新，不需要手动操作DOM：

<p id="output">@CurrentDisplay</p>

Blazor用@onclick特性绑定点击回调，支持直接传参数：

• 数字按钮统一绑定同一个数字处理方法，把对应数字作为参数传入

<button id="r2-1" @onclick="() => OnNumberClicked(7)">7</button>
<button id="r2-2" @onclick="() => OnNumberClicked(8)">8</button>
<!-- 其余数字按钮按照相同规则修改即可 -->

• 运算符按钮绑定运算符处理方法

<button id="r1-4" @onclick="() => OnOperatorClicked("/")">/</button>
<button id="r2-4" @onclick="() => OnOperatorClicked("*")">x</button>
<!-- 其余运算符按钮按照相同规则修改即可 -->

• 功能按钮绑定对应处理方法

<button id="r1-1" @onclick="OnClearClicked">C</button>
<button id="r5-3" @onclick="OnCalculateClicked">=</button>

把以下方法补到@code块里即可完成基础的计算功能：

@code {
    // 上面的状态变量声明放在这里

    // 数字按钮点击处理
    private void OnNumberClicked(int number)
    {
        if (IsNewInput)
        {
            CurrentDisplay = number.ToString();
            IsNewInput = false;
        }
        else
        {
            CurrentDisplay += number.ToString();
        }
    }

    // 运算符按钮点击处理
    private void OnOperatorClicked(string op)
    {
        FirstNumber = decimal.Parse(CurrentDisplay);
        CurrentOperator = op;
        IsNewInput = true;
    }

    // 等号计算逻辑
    private void OnCalculateClicked()
    {
        decimal secondNumber = decimal.Parse(CurrentDisplay);
        decimal result = 0;
        switch (CurrentOperator)
        {
            case "+": result = FirstNumber + secondNumber; break;
            case "-": result = FirstNumber - secondNumber; break;
            case "*": result = FirstNumber * secondNumber; break;
            case "/": 
                if (secondNumber != 0) 
                    result = FirstNumber / secondNumber; 
                else 
                {
                    CurrentDisplay = "Error";
                    return;
                }
                break;
        }
        CurrentDisplay = result.ToString();
        IsNewInput = true;
    }

    // 清空按钮逻辑
    private void OnClearClicked()
    {
        CurrentDisplay = "0";
        FirstNumber = 0;
        CurrentOperator = string.Empty;
        IsNewInput = true;
    }
}

基础逻辑跑通后你可以自行补充边缘情况处理，比如小数点输入限制、百分号功能、连续计算逻辑、异常输入提示等，所有逻辑都可以直接用C#实现，不需要额外写JS代码。

内容的提问来源于stack exchange，提问作者user15441817