绑定到 select 元素时出现 Blazor 问题

Question

我正在使用 @bind-value 将 select 元素的 selected 值绑定到 Blazor 中的变量。它工作正常，如果我物理单击下拉列表和 select 一个值。但是，如果我 select 通过 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);
    }
}

这是我的 javascript 代码：

window.helperFunctions = {
    selectOption: function(op) {
        var selectBoxElement = document.getElementById("my-select-box");

        selectBoxElement.value = op;
    }
}

我还创建了一个fiddle to demonstrate。

如果您实际 select 下拉列表中的一个项目，您会发现它工作得很好。但是，如果您单击 3 个按钮之一，您会看到下拉列表中的值确实发生了变化，但 Blazor 似乎没有意识到该值发生了变化。

我该如何解决这个问题？

Answer 1

Blazor does not seem to realize the value changed

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

MyValue  = option;

但是调用 JS 函数变得多余...也许，您可以告诉我们您想要实现的目标。

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

绑定到 select 元素时出现 Blazor 问题

Blazor issue when binding to a select element

c#

blazor

blazor-client-side

blazor-webassembly