Blazor 相當於 WPF 的 ItemsControl+DataTemplate

Question

在 WPF 中，我可以通過DataTemplates自動將我的內容顯示在不同的模板中，具體取決於它的類型。

例如，我有兩個類ChildAViewModel和ChildBViewModel都實現了IChild接口。 父級現在有一個List<IChild> ，其中包含ChildAViewModel和ChildBViewModel的不同實例。

    public interface IChild
    {
        public string Name { get; set; }
    }

    public class ChildAViewModel : IChild
    {
        public string Name { get; set; }
    }

    public class ChildBViewModel : IChild
    {
        public string Name { get; set; }
    }

    public class ParentViewModel
    {
        public ParentViewModel()
        {
            Children = new();
            Children.Add(new ChildAViewModel() { Name = "ernie" });
            Children.Add(new ChildBViewModel() { Name = "bert" });
        }
        List<IChild> Children { get; set;}
    }

在父視圖中，我現在可以將子類綁定到DataTemplate並在ItemsControl中顯示我的List<IChild> 。

    <UserControl.Resources>

        <DataTemplate DataType="{x:Type local:ChildAViewModel}">
            <!--  something  -->
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:ChildBViewModel}">
            <!--  something different  -->
        </DataTemplate>

    </UserControl.Resources>

    <StackPanel>

        <ItemsControl ItemsSource="{Binding Children}"/>

    </StackPanel>

所以我讓每個孩子都顯示在正確的模板中。

但是，如何在 Blazor/Razor 中歸檔相同的結果：一個不同類的列表，但在不同的 UI 元素中顯示相同的界面？

Answer 1

XAML 和 Razor 是兩個完全不同的東西，所以沒有真正的等價物，但在 Blazor 中，您可以更靈活地直接在標記中執行操作。 例如，您可以直接switch類型：

@foreach (var item in Children)
{
    switch (item)
    {
        case ChildAViewModel:
            <div>template a...</div>
            break;
        case ChildBViewModel:
            <div>template b...</div>
            break;
    }
}

您還可以向組件添加兩個不同的模板參數。