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

Answer 1

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

示例 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; }
    }
}

Answer 2

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

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;
    }
}

@onbur

当组件失去焦点时会触发此事件。这可以与

@bind-Value

指令一起使用，因此不需要声明

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;
    }
}

---

.NET 7+

@bind-after

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

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

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

带有示例的演示片段