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

Question

我正在使用带有 ASP.NET Core 3.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.CarWeight[index]

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

Answer 1

也许有人会想出更好的主意来实现你想要的，但目前你可以用 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; }
    }
}

Answer 2

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

@bind:event="oninput"

见https://docs.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";
}

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

Change label text on Input Box value change

c#

asp.net-core

blazor

asp.net-core-3.1