Blazor WASM，自动更新数据变化

Question

我有一个 Blazor WASM 项目。 index.razor 页面循环遍历对象数组（维修订单）并使用数组的每个元素构建一个 table。 table 的每一行包含 2 个 字段，因此可以直接从 table 更改每个对象的属性数据，而无需实际打开编辑页面。

我正在使用 SignalR 在有人更改项目时自动更新所有连接的客户端。因此，当用户更改

选项

时，我需要调用一个函数来更新数据库并发送 SignalR 消息

我在 中使用 @onselectionchange="() => SelectionChanged(ro)"。

我在SelectionChanged(ro)的入口处设置了一个断点。该应用程序从不从@onselectionchange="() => SelectionChanged(ro)".

调用函数

我有什么选择才能让它工作？

Table代码：

@foreach (var ro in repairOrders)
        {
            <tr>
                <td>@ro.Tag</td>
                <td>@ro.Control</td>
                <td>@ro.Customer</td>
                <td>
                   
                    <select class="form-control" id="location" @bind="@ro.Location" @onselectionchange="() => SelectionChanged(ro)">
                    <option value="">Select Location</option>
                        @foreach(var loc in locationOptions)
                        {
                            <option value="@loc.Name">@loc.Name</option>
                        }
                    </select>
                </td>
                <td>

C#代码：

protected async Task SelectionChanged(RepairOrder _ro)
{
    await Http.PutAsJsonAsync("api/RepairOrders/" + _ro.Id.ToString(), _ro);
    if (IsConnected) await SendMessage();
}

您的代码中只有一个小错误。

onselectionchange 是用户选择文本时触发的事件。因此，您的方法不是 运行.

您可以改为选择更改事件，例如

<select @bind="..." 
@bind:event="oninput" 
@onchange="(x) =>  SelectionChanged(to)" ...>

使用 @bind:event="oninput" Blazor 会在某些内容更新后立即写回绑定。这是在 @onchange 之前触发的，因此您的模型中已准备好更新值。

©2023 WhoseBug

Answer 1

您的代码中只有一个小错误。

onselectionchange 是用户选择文本时触发的事件。因此，您的方法不是 运行.

您可以改为选择更改事件，例如

<select @bind="..." 
@bind:event="oninput" 
@onchange="(x) =>  SelectionChanged(to)" ...>

使用 @bind:event="oninput" Blazor 会在某些内容更新后立即写回绑定。这是在 @onchange 之前触发的，因此您的模型中已准备好更新值。