You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在不使用JavaScript的Blazor页面中实现onchange行为?

Blazor资金申请页面实时填充获批金额的绑定问题

我正在开发一个供各部门申请资金的业务页面,需要根据已填写的金额值实时填充获批金额。我知道用JavaScript可以实现,但希望通过Blazor的@bind属性和razor.cs文件以规范方式实现。

但当我尝试给元素添加@onchange事件时,出现了以下错误:

Severity Code Description Project File Line Suppression State Error (active) RZ10008 The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind-value' directive attribute.

之后我尝试了另一种写法:仅使用value=@BoardApprovedAmt(对应页面控制器中的属性),此时onchange不再报错,但HandleInputChange()方法始终无法触发。相关代码示例如下:

<hr />
<div class="row">
    <div class="col-sm-4 col-md-4">
        <label for="ceoApprAmount" class="form-label">CEO Approved Amount</label>
        <input @bind-value="@CeoApprovedAmt" type="text" pattern="-?\d+(\.\d{1,2})?" class="form-control form-control-sm" id="ceoApprAmount" />
    </div>
    <div class="col-sm-4 col-md-4">
        <label for="boardApprAmount" class="form-label">Board Approved Amount</label>
        <input value="@BoardApprovedAmt" onchange="HandleInputChange()" type="text" pattern="-?\d+(\.\d{1,2})?" class="form-control form-control-sm" id="boardApprAmount" />
    </div>

    <div class="col-sm-4 col-md-4">
        <label for="awardedAmount" class="form-label">Awarded Amount</label>
        <input value="@SourceInput" type="text" pattern="-?\d+(\.\d{1,2})?" class="form-control form-control-sm" id="awardedAmount" />
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-md-4">
        <label for="requestedAmount" class="form-label">Requested Amount</label>
        <input @bind-value="@RequestedAmt" type="text" pattern="-?\d+(\.\d{1,2})?" class="form-control form-control-sm" id="requestedAmount" />
    </div>
    <div class="col-sm-4 col-md-4">
        <label for="directorApprAmount" class="form-label">Director Approved Amount</label>
        <input @bind-value="@DirectorApprAmt" type="text" pattern="-?\d+(\.\d{1,2})?" class="form-control form-control-sm" id="directorApprAmount" />
    </div>
</div>

内容的提问来源于stack exchange,提问作者thinker

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 16:32:00