如何在不使用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
相关产品推荐
相关产品推荐

