更改输入框值上的标签文本

Question

我正在使用Blazor框架与ASP。. NET Core 3.0.

我有一个输入框，我添加了一个标签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。CarWeight(指数)

加载页面时，它创建一个5行2列的入口表单。5个输入框。当用户填写任何输入框时，我希望相应的标签显示计算结果。

Answer 1

您可以在特定事件上更新绑定值

@bind:事件="oninput"

见https://learn.microsoft.com/en - us/aspnet/core/blazor/components/data binding?view=aspnetcore - 5.0

你会得到这个非常简单的代码

@page "/"
<input type="number" @bind="inputVal" @bind:event="oninput" />
<label>@(Convert.ToDouble(inputVal)/2)</label>
@code{
string inputVal = "0";
}

Answer 2

也许有人会想出更好的主意来实现你想要的，但目前你可以尝试这样的东西与c#代码(。净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; }
}
}