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;}
}

在父视图中，我现在可以将子类绑定到DataTemplates并在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;
}
}

你也可以给你的组件添加两个不同的模板参数。