Blazor将UI与代码连接时出现问题

Question

我在Visual Studio 2019中使用Blazor Server应用程序。在.rawer页面中，我有：

<div class="container">
<div class="row">
<div class="col-md">
<label for="ConnectionStringEdit" id="Label1">Connection String for destination</label>
</div>
<div class="col-md-7">
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" text=@ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" class="form-control">
</div>
<div class="col-md-auto">
<input type="submit" id="btnConnect" name="btnConnect" value="Connect" class="btn btn-primary" @onclick="Connect1">
</div>
</div>
</div>

现在在代码部分，我有

@code {

private string ConnectDestination { get; set; } = "";

private void Connect1()
{
if (ConnectDestination.Length > 0)
{
// do something
}
}
}

当我在输入中插入一些内容并按下按钮时，ConnectDestination不接受输入控件的值。所以最后一个If条件永远不成立。如何获取名为ConnectionStringEdit的Input控件的插入值？

感谢

Answer 1

应该是@bind-value="@ConnectDestination"

您也可以使用短指令@bind来代替：

@bind="@ConnectDestination"

注意：所有输入元素的类型都通过元素的value属性绑定。

注意：@bind-value和@bind都是编译器指令，指示编译器在后台发出代码，以启用变量和Html标记之间的双向数据绑定。编译器通过将变量绑定到元素的value属性来创建双向数据绑定，相当于

value="@ConnectDestination"，它创建从变量到绑定元素的单向绑定。编译器还创建了一个事件回调，它允许从元素绑定到变量，相当于以下内容：

@onchange="@((args) => ConnectDestination = args.Value?.ToString())"

这意味着，如果你希望对绑定有更多的控制权，你可以自己做。你通常会这样做：

value="@ConnectDestination" @onchange="OnChange" 

并定义这样的回调方法：

private void OnChange(ChangeEventArgs args) 
{
// Note that it is your responsibility to update the 
// ConnectDestination  variable:
ConnectDestination = args.Value?.ToString());
}

注意：这是错误的：

<input type="submit" id="btnConnect" name="btnConnect" value="Connect" class="btn btn-primary" @onclick="Connect1">

输入元素的类型属性应设置为button:

<input type="button" 

Blazor应用程序是一个SPA。。。意思是不服从。你唯一使用"；提交"；按钮是当您使用EditForm组件时；提交"；行动被Blazor拦截并取消。

Answer 2

您可以尝试

<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" @bind=@ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" class="form-control">

或

<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" value="@ConnectDestination"
@onchange="@((ChangeEventArgs __e) => ConnectDestination = __e?.Value?.ToString())" spellcheck="false" style="width: 585px; height: 26px;" class="form-control">