主页 / coding / 问题 / 77024666
Accepted
BarnumBailey
Asked: 2023-09-02 00:23:45 +0800 CST

Blazor - 清除所有选择选项而不重新获取数据

  • 772

Blazor .NET 6.0，我有基本的选择元素：

<select id="ProductItems" @onchange="ProductSelections" multiple size="10">
    @if (items!= null)
    {
        @foreach (var item in items)
        {
            <option value="@item.Id">@item.Description</option>
        }
    }
</select>

我被要求提供一个按钮来清除任何选定选项的列表。我不想有一个代码繁重的解决方案，我也不想编写任何js代码。

一种有效的解决方案是，如果我在单击按钮时重新获取数据：

List<MyItems> items = new List<MyItems>();
....
private async void ButtonClearClick() 
{
    items = new List<MyItems>();  // clear variable.
    items = await GetAllItems();  // web api call to reload variable.
    StateHasChanged();
}

这确实会导致选择短暂折叠并重新加载，但至少所有选项都被清除。
接下来，我转向重构该解决方案以避免数据库调用，并认为使用临时变量可以完成同样的事情：

private void ButtonClearClick2() 
{
    List <MyItems> temp = new List<MyItems>();
    items.ForEach(i => temp.Add(i)); // copy into temp.

    items = new List<MyItems>(); // clear variable.
    temp.ForEach(i => items.Add(i)); // copy back into variable.
    StateHasChanged();
}

然而这不起作用，选项仍然被选中。也没有崩溃/重新加载效果，这告诉我没有重新加载任何内容。有人可以解释第二次尝试出了什么问题吗？我缺少什么？

blazor

1 个回答

  1. Best Answer

    您需要将选择绑定到属性的T[]类型。然后，当您清除该数组时，您也将清除选定的选项。TMyItem.Id

    <select @bind="firstIds" multiple size="10">
    @if (options!= null)
    {
        @foreach (var item in options)
        {
            <option value="@item.Id">@item.Description</option>
        }
    }
</select>
<button @onclick="ClearFirstSelection">Clear First Selection</button>
@code{
    int[] firstIds = new int[0];
    private void ClearFirstSelection()
    {
        firstIds = new int[0];
    }
}

    这是演示这一点的片段。

    泰勒里克片段

    • 1

相关问题