C# 绑定到select元素时Blazor问题

我正在使用

@bind value

将select元素的选定值绑定到Blazor中的变量。如果我实际单击下拉列表并选择一个值，它工作正常。但是，如果我通过Javascript在下拉列表中选择一个值，Blazor似乎无法检测到更改。我写了一个非常简单的程序来演示

这是我的组件

.cshtml

代码：

@page "/"
@inject IJSRuntime JsRuntime

<select id="my-select-box" @bind-value="MyValue" @bind-value:event="onchange">
    <option value="0">-- Select Something --</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<br />

@if (MyValue == "0") {
    <div>Select an option</div>
} else {
    <div>You chose @MyValue</div>
}

<div style="margin-top: 20px">
    <button @onclick="@(() => SelectOptionThroughJs("1"))">Select Option 1</button>
    <button @onclick="@(() => SelectOptionThroughJs("2"))">Select Option 2</button>
    <button @onclick="@(() => SelectOptionThroughJs("3"))">Select Option 3</button>
</div>

@code {
    public string MyValue {get;set;} = "0";

    public async Task SelectOptionThroughJs(string option)
    {
        await JsRuntime.InvokeVoidAsync("helperFunctions.selectOption", option);
    }
}

我还创建了一个

如果您从下拉列表中实际选择一个项目，您将看到它工作正常。但是，如果您单击3个按钮中的一个，您将在下拉列表中看到值确实发生了更改，但是Blazor似乎没有意识到值发生了更改

如何解决此问题

Blazor似乎没有意识到价值的改变

正是。。。 select元素绑定到属性MyValue，并且每当呈现当前组件时，select元素都会从属性中获取其值。通过JS Interop更改选择对属性MyValue没有影响。最简单的解决方法是将MyValue的值设置为传递给JS函数的参数，如下所示：

MyValue  = option;

但是调用JS函数就变得多余了。。。也许，你可以告诉我们你想要实现什么

---

需要记住的一点是，您不应该将JS用于干扰Blazor渲染系统的任务。

我在这里发布的示例只是为了演示。我实际做的是使用创建一个自动完成文本框。它工作得很好，但问题是。当我开始输入一些东西，比如“aus”，然后从列表中选择一些东西，比如“Austria”，Blazor将变量设置为“aus”，而不是“Austria”。我相信这个问题和你描述的一模一样。因为文本框是通过Javascript设置的，Blazor没有意识到值的改变。你不应该这样编码。完全用C语言实现自动完成，而不使用JS。您可以使用ling和其他方法，如Task.Delay，根据用户类型等延迟搜索。这里有一个链接，指向我就类似问题提出的一个问题，您可以从中获得一些有关如何进行搜索的线索：。就我所记得的，社区创造了一些解决方案，你可以寻找。目前，Blazor无法提供Angualr在这方面提供的功能，但我相信社区提供的一些解决方案是很好的。感谢您的帮助和投入。@Icemanind，以下链接是指向Steve Sanderson创建的示例应用程序：。它在共享文件夹中包含一个名为Autocomplete的组件。我没有检查代码或尝试它，但我相信您会发现它非常有用。

MyValue  = option;