在Blazor中筛选时，列表中的项目在屏幕上排序不正确

我正在开发一个照片库，客户可以在其中选择他们喜欢的照片，订购照片。。。有一个页面，用户可以在其中选择要访问的相册。相册以砖石风格的形式呈现，它们可以通过在搜索字段中键入名称进行过滤。过滤时一切正常。不需要的相册开始消失，并且顺序正确。但是，如果我删除一些键入的字符，相册就会以一个相当多余的顺序出现。我尝试了

OrderBy（）

，但结果是一样的

<div class="bricklayer">

            @foreach (var album in Albumes
                .Where(x => x.AlbumReducido.NombreAlbum.ToLowerInvariant().
                Contains(CadenaBusqueda.ToLowerInvariant())).
                ToList().OrderBy(al => al.AlbumReducido.NombreAlbum))
            {

                <div @key="album.GetHashCode()" class="tarjeta text-center" style="width:95%" @onclick="(async () => await SeleccionarAlbum(album.AlbumReducido.ID))">
                    <div class="text-dark w-75">
                        @album.AlbumReducido.NombreAlbum
                    </div>
                    <img class="img-fluid"  style="border-bottom-left-radius:1vh; border-bottom-right-radius:1vh;" src="@album.RutaThumbnail" />
                </div>
            }
            @{ Terminado = true;}
        </div>

这是代码

class=“bricklayer”

仅适用于我用于以砌体样式呈现项目的javascript库。如果我删除它，它不会影响顺序

CadenaBusqueda

是搜索字符串

<div class="bricklayer">

            @foreach (var album in Albumes
     .Where(x => x.AlbumReducido.NombreAlbum.ToLowerInvariant()
                  .Contains(CadenaBusqueda.ToLowerInvariant()))
     .OrderBy(al => al.AlbumReducido.NombreAlbum))
            {

                <div class="tarjeta text-center" style="width:95%" @onclick="(async () => await SeleccionarAlbum(album.AlbumReducido.ID))">
                    <div class="text-dark w-75">
                        @album.AlbumReducido.NombreAlbum
                    </div>
                    <img class="img-fluid"  style="border-bottom-left-radius:1vh; border-bottom-right-radius:1vh;" src="@album.RutaThumbnail" />
                </div>
            }
            @{ Terminado = true;}
        </div>

@foreach（相册中的相册）
.Where（x=>x.albumReduceido.NombreAlbum.ToLowerInvariant（）
.Contains（CadenaBusqueda.ToLowerInvariant（））
.OrderBy（al=>al.AlbumReducido.NombreAlbum））
{
@album.AlbumReducido.NombreAlbum
}
@{Terminado=true；}

提前谢谢。 编辑2：这是目前我包含你的建议的代码（我真的很感激）。结果完全一样

<div class="bricklayer">

            @foreach (var album in Albumes
                .Where(x => x.AlbumReducido.NombreAlbum.ToLowerInvariant().
                Contains(CadenaBusqueda.ToLowerInvariant())).
                ToList().OrderBy(al => al.AlbumReducido.NombreAlbum))
            {

                <div @key="album.GetHashCode()" class="tarjeta text-center" style="width:95%" @onclick="(async () => await SeleccionarAlbum(album.AlbumReducido.ID))">
                    <div class="text-dark w-75">
                        @album.AlbumReducido.NombreAlbum
                    </div>
                    <img class="img-fluid"  style="border-bottom-left-radius:1vh; border-bottom-right-radius:1vh;" src="@album.RutaThumbnail" />
                </div>
            }
            @{ Terminado = true;}
        </div>

@foreach（相册中的相册）
.Where（x=>x.albumReduceido.NombreAlbum.ToLowerInvariant（）。
包含（CadenaBusqueda.ToLowerInvariant（））。
ToList（）.OrderBy（al=>al.AlbumReducido.NombreAlbum））
{
@album.AlbumReducido.NombreAlbum
}
@{Terminado=true；}

编辑：我添加了一些屏幕截图：

这是列表的一部分，不进行任何筛选：

当我开始过滤时，一切正常：

但当我开始清除或完全清除搜索字段时，它会以一个额外的顺序出现：

---

这段代码看起来不错，你如何更改searchtext（CadenaBusqueda）？我打赌这是另一个实体框架错误。。。请尝试在OrderBy（…）之前具体化查询（call.ToList（）），看看会发生什么。谢谢@Vi100。刚刚尝试调用

.ToList（）

，结果相同。在这里@HenkHolterman是我更改搜索文本的地方：

@V100仍然有一个要点-您的

相册是IQueryable吗？ToList应该是分配相册的地方，而不是在foreach中。@Henk Holterman
Albums
本身就是一个
列表。对吗？