时间戳

首页 > 解决方案 > Blazor WASM，自动更新数据更改

c# - Blazor WASM，自动更新数据更改

问题描述

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

当有人更改项目时，我正在使用 SignalR 自动更新所有连接的客户端。因此，当用户更改 <select> 选项时，我需要调用一个函数来更新数据库并发送 SignalR 消息

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

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

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

表代码：

@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();
}

标签： c#selectbindingblazor-webassembly

解决方案

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

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

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

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

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

推荐阅读