Blazor WASM，自動更新數據變化

Question

我有一個 Blazor WASM 項目。 index.razor 頁面循環遍歷對象數組（修復訂單），並使用數組的每個元素構建一個表。 表格的每一行包含 2 個 <select> 字段，因此可以直接從表格中更改每個 object 的屬性數據，而無需實際打開編輯頁面。

當有人更改項目時，我正在使用 SignalR 自動更新所有連接的客戶端。 因此，當用戶更改 <select> 選項時，我需要調用 function 來更新數據庫並發送 SignalR 消息

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

我在 SelectionChanged(ro) 的入口處設置了一個斷點。 該應用程序從不從@onselectionchange="() => SelectionChanged(ro)" 調用 function。

我有什么選擇才能讓它工作？

表代碼：

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

Answer 1

您的代碼中只有一個小錯誤。

onselectionchange是用戶選擇文本時觸發的事件。 因此，您的方法未運行。

您可以改為選擇 onchange 事件，例如

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

使用@bind:event="oninput" Blazor 會在更新內容后立即寫回綁定。 這是在@onchange之前觸發的，因此您已在 model 中准備好更新的值。