将 UI 与代码连接起来的 Blazor 问题

Question

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

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

当我在 Input 中插入内容并按下按钮时，ConnectDestination 不会获取 Input Control 的值。所以这最后一个 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">

将 UI 与代码连接起来的 Blazor 问题

Blazor problem connecting the UI with the code

user-interface

asp.net-core

blazor

blazor-server-side