@dotnet/

使用 Blazor

Blazor 的 GitHub 存储库包含可排序列表的源代码以及演示。对于您自己的项目，您只需要 Shared/.razor、Shared/.razor.css 和 Shared/.razor.js 文件。

组件是一个通用组件，它采用项目列表和定义如何呈现可排序列表中每个项目的 。例如，假设您有一个如下所示的书籍列表......

public class Book{    public string Title { get; set; } = "";    public string Author { get; set; }  = "";    public int Year { get; set; }}
public List books = new List{    new Book { Title = "The Very Hungry Caterpillar", Author = "Eric Carle", Year = 1969 },    new Book { Title = "Where the Wild Things Are", Author = "Maurice Sendak", Year = 1963 },    new Book { Title = "Goodnight Moon", Author = "Margaret Wise Brown", Year = 1947 },    new Book { Title = "The Cat in the Hat", Author = "Dr. Seuss", Year = 1957 },    new Book { Title = "Charlotte's Web", Author = "E.B. White", Year = 1952 },    new Book { Title = "Harry Potter and the Sorcerer's Stone", Author = "J.K. Rowling", Year = 1997 },    new Book { Title = "The Lion, the Witch and the Wardrobe", Author = "C.S. Lewis", Year = 1950 },    new Book { Title = "Matilda", Author = "Roald Dahl", Year = 1988 },    new Book { Title = "The Giving Tree", Author = "Shel Silverstein", Year = 1964 },    new Book { Title = "Oh, the Places You'll Go!", Author = "Dr. Seuss", Year = 1990 }};

您可以在 中像下面这样呈现此列表......

    "books" Context="book">                    
class="book">                
@book.Title            
            

组件将使用 呈现项目列表，然后使用 使列表变得可以排序。Context 参数用于定义变量的名称，该变量将用于表示列表中的每个项目。在本例中，Context 是 book，因此列表中的每个项目都将由一个名为 book 的变量表示。

但是，如果您此时尝试拖放项目，您会发现无论您怎么拖放一个项目，它都会回到之前的位置。这是因为我们没有告诉 在列表排序时该做什么。我们通过处理 事件并自己进行排序来做到这一点。

    "books" Context="book" OnUpdate="@SortList">                    
class="book">                
@book.Title            
            
...public void SortList((int oldIndex, int newIndex) indices){    // deconstruct the tuple    var (oldIndex, newIndex) = indices;
    var items = this.books;    var itemToMove = items[oldIndex];    items.RemoveAt(oldIndex);
    if (newIndex < items.Count)    {{        items.Insert(newIndex, itemToMove);    }}    else    {{        items.Add(itemToMove);    }}}

每当列表排序时，都会调用 事件处理程序。它将传递一个包含已移动项目的旧索引和新索引的元组。在 方法中，我们将元组解构为两个变量，然后使用它们来移动列表中的项目。

永远不要改变 Blazor 控制的 DOM，这一点非常重要。Blazor 保留 DOM 的内部副本，如果您使用 等内容更改它，您将得到奇怪的结果，因为页面状态将与 Blazor 的内部状态不同步。因此，我们在幕后所做的就是取消 移动，这样被移动的项目就不会真的在页面上移动。然后我们移动列表中的项目，Blazor 将按照新顺序重新渲染列表。

一个更复杂的例子

是一个非常强大的库，它可以做的不仅仅是排序列表。它还可以在列表之间排序、克隆项目、过滤项目等等。 组件支持许多这样的功能。让我们看一个更复杂的例子——两个列表之间的排序......

    
class="container">        
class="columns">            
class="column">                
Books                "books" Context="book" OnRemove="@AddToFavoriteList" Group="favorites">                                            
class="book">                            
@book.Title                        
                                                
            
class="column">                
Favorite Books                "favoriteBooks" Context="book" OnRemove="@RemoveFromFavoriteList" Group="favorites">                                            
class="book">                            
@book.Title                        
                                                
        
    

在此示例中，我们有两个列表 - 所有书籍的列表和最喜欢的书籍的列表。它们通过 Group 属性链接在一起。

我们希望能够将书籍从所有书籍列表拖放到最喜欢的书籍列表中。要做到这一点，我们需要处理两个列表的 事件。

public void AddToFavoriteList((int oldIndex, int newIndex) indices){    var (oldIndex, newIndex) = indices;
    var book = books[oldIndex];    favoriteBooks.Insert(newIndex, book);    books.RemoveAt(oldIndex);}
public void RemoveFromFavoriteList((int oldIndex, int newIndex) indices){    var (oldIndex, newIndex) = indices;
    var book = favoriteBooks[oldIndex];    books.Insert(newIndex, book);    favoriteBooks.RemoveAt(oldIndex);}

设置 的样式

默认情况下， 包含一些默认样式，这些样式在拖动时会隐藏“ghost”元素。这将在您拖动时在项目之间产生间隙。如果没有这种样式更改，项目本身将显示为可放置拖动项目的目标。这有点奇怪，因为这意味着您拖动的项目也是您放置拖动项目的目的地。但如果这就是您想要选的样式，您可以覆盖 .razor.css 文件中的样式，或者根本不包含它。

由于 内呈现的所有内容都呈现在 子项内，因此您必须使用“::deep”修饰符才能使任何更改生效。

如果您从父页面/组件（即 Index.razor.css）设置 的样式，则必须将 包装在容器元素中，并使用“::deep”修饰符。如果您不这样做，您的样式将不会生效，您也会因为我制作这个组件却没有这个功能而感到悲伤、困惑和生气。这是 Blazor 的问题，而不是 的问题。您可以在 ASP.NET Core 文档中阅读有关范围样式的更多信息。

我觉得没有人会读最后一段，很多人可能会哀号。我先说声抱歉，但其实我已经尝试过了。

ASP.NET Core 文档

#child--support

为什么不使用 HTML5 拖放？

这是一个很好的问题，也是我在使用 解决方案之前研究过的一个问题。总而言之，原生 HTML5 对拖放的支持还不够强大，无法实现合适的排序。例如，无法对大部分拖放行为进行样式化。它看起来……很愚蠢……而且我们对此无能为力。它对跨浏览器的支持也很不稳定。有一些基本属性仅适用于 Chrome。

综上所述， 实际上会尝试使用 HTML5 拖放，并在 iOS 等平台上退回到 解决方案。但是，您仍然无法控制样式，并且会出现看起来愚蠢的拖放操作。所以我在 上关闭了 HTML5 的方式。如果您希望它重新打开，请进入 .razor.razor.js 文件并删除 : true 属性。我可能会在某个时候将其作为一个设置。

支持也很不稳定

获取 Blazor

查看 Blazor 并告诉我们您的想法！您可以用它做很多事情，包括克隆项目、禁用某些项目的排序、指定拖动手柄等等。我们还没有实现 的所有功能。欢迎拉取请求！

Blazor

Blazor 是一个开源社区项目。

微信公众号｜微软开发者MSDN

新浪微博｜微软中国MSDN

·END·