更改输入框值上的标签文本
更改输入框值上的标签文本
提问于 2021-03-04 09:11:36
我使用的是ASP.NET Core3.0的Blazor框架。
我有一个输入框，我在它旁边添加了一个标签HTML。当用户在输入框中输入(比如说5 )时，标签应该显示计算值5/2，即输入框的值除以2。
在Blazor框架中，我不了解如何添加jQuery。
代码是这样的：
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<input type="text" class="form-control form-control-sm border border-secondary" @bind="myModel.CarWeight[index]" />
</div>
</div>
@if (myModel.AppType == "LC" || myModel.AppType == "LN")
{
decimal calcRes = Convert.ToDecimal(myModel.CarWeight[index]) / 2;
<div class="col-sm-4">
<div class="justify-content-center mb-2">
<label class="col-form-label"><b>calcRes</b></label>
</div>
</div>
}请注意这一行: myModel.CarWeightindex
加载页面时，它将创建一个5行2列的条目表单。5个输入框。当用户填充任何输入框时，我希望相应的标签显示计算。
Stack Overflow用户
发布于 2021-03-04 12:08:29
也许有人会想出更好的方法来实现您想要的结果，但是目前您可以使用C#代码(.NET 5.0.103)来尝试这样的方法：
@page "/SampleComponent"
<input type="number" @bind="Operations[0].Input" @oninput="@( (input) => Calculate(input, 0))"/>
<label>@Operations[0].Result</label>
<input type="number" @bind="Operations[1].Input" @oninput="@( (input) => Calculate(input, 1))"/>
<label>@Operations[1].Result</label>
@code {
public List<Operation> Operations = new List<Operation>();
protected override void OnInitialized()
{
base.OnInitialized();
Operations.Add(new Operation{Input = 0, Result = 0});
Operations.Add(new Operation{Input = 0, Result = 0});
}
public void Calculate(ChangeEventArgs input, int id)
{
float result;
if(float.TryParse((string)input.Value, out result))
{
Operations[id].Result = result/2;
}
else
{
Operations[id].Result = 0;
}
}
public class Operation
{
public float Input { get; set; }
public float Result { get; set; }
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66471889
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号