如何在 Blazor Server 中将一个 TextBox 中的值填充到另一个 TextBox 中？

Answer 1

可以通过多种方式实现此目的。

Value

&

ValueChanged

此方法要求您为属性类型定义

TValue

和

ValueExpression

，并且您在此处定义的

TValue

将作为参数传递给

ValueChanged

处理程序方法。 它还要求您在处理程序方法中手动设置

Value

的属性。

<InputNumber Value="vm.Value1" ValueChanged="UpdateValues" TValue="int" ValueExpression="@( () => vm.Value1)"/>
<InputNumber @bind-Value="vm.Value2" />

@code {
    private void UpdateValues(int value)
    {
        vm.Value1 = value;
        vm.Value2 = value;
    }
}

@onblur

注意： 当组件失去焦点时，即使该值从未更改，也会触发此事件。

即使点击输入和退出输入也会触发此事件。它可以与

@bind-Value

指令或

Value

ValueChanged

长格式一起使用。如果使用

@bind

指令，则无需声明

ValueExpression

和

TValue

。传递给处理程序方法的参数是

FocusEventArgs

，因此您必须从模型本身获取更改后的值。

<InputNumber @bind-Value="vm.Value1" @onblur="UpdateWithBind"/>
<InputNumber @bind-Value="vm.Value2" />

@code {
    private void UpdateWithBlur(FocusEventArgs args)
    {
        vm.Value2 = vm.Value1;
    }
}

其他方法

---

@oninput

注意： 每个输入都会触发

使用此指令定义的处理程序方法会传递包含新输入值的

ChangeEventArgs

。这个和其他的区别在于它会在每个输入上触发该方法。

<InputNumber @bind-Value="vm.Value1" @oninput="UpdateOnInput" />
<InputNumber @bind-Value="vm.Value2" />

@code {
    private void UpdateOnInput(ChangeEventArgs e)
    {
        int value = int.Parse(e.Value.ToString());
        vm.Value2 = value;
    }
}

具有自定义 getter 和 setter 的属性

您还可以使用自定义属性 getter 和 setter 来实现此目的，这允许使用自动绑定

@bind-Value

。这使组件变得简单，但增加了类的复杂性，并且将组件 UI 逻辑分离到类中可能不是一个好主意。

<InputNumber @bind-Value="vm.Value1" />
<InputNumber @bind-Value="vm.Value2" />

@code {
    MyClass vm = new();
    public class MyClass
    {
        private int _value1;
        public int Value1 
        { 
            get { return _value1; }
            set 
            {
                _value1 = value;
                Value2 = value;
            }
        }
        public int Value2 { get; set; }
    }
}

---

.NET 7+

@bind-after

该指令不传递任何参数，用于设置值后要调用的方法。

<InputNumber @bind-Value="vm.Value1" @bind-Value:after="UpdateWithAfter"/>
<InputNumber @bind-Value="vm.Value2" />

@code {
    private void UpdateWithAfter(){
        vm.Value2 = vm.Value1;
    }
}

带有示例的演示片段

Answer 2

我不确定我是否完全理解您的意思，但这里有一些示例可以向您展示如何理解。

示例 1 手动设置绑定。我使用

ChangeMethod

设置机器人值。

示例 2 显示了自动绑定。

示例 3 显示自动绑定并使用

after

绑定来更新其他值。

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<InputNumber class="form-control" TValue="int" Value="vm.Value1" ValueChanged="ChangeMethod" ValueExpression="() => vm.Value1" />
<InputNumber class="form-control" @bind-Value="vm.Value2" />
<InputNumber class="form-control" @bind-Value="vm.Value1" @bind-Value:after="AfterMethod" />

@code {
    private Model vm = new();

    private void ChangeMethod(int value)
    {
        vm.Value1 = value;
        vm.Value2 = value;
    }

    private void AfterMethod()
    {
        vm.Value2 = vm.Value1;
    }

    public class Model
    {
        public int Value1 { get; set; }
        public int Value2 { get; set; }
    }
}