如何在 Blazor 中创建 Razor 页面列表

Question

我正在尝试创建一个剃刀页面列表。
我解释自己，在我的“Index.razor”中，我实际上有：

@page "/"
@inject IJSRuntime JSRuntime

<h1 style="text-align:center;color:red" >Hey :)</h1>
<br />
<Counter/>
<NewCounter/>
<AnotherVersion/>

谁重定向到 Counter.razor、NewCounter.razor 和 AnotherVersion.razor。

但是，就像一个字符串列表一样，我想创建类似的东西：有一个这样的列表：

List<Page> myPage = new List<Page>{Counter, NewCounter, AnotherVersion};

@page "/"
@inject IJSRuntime JSRuntime

<h1 style="text-align:center;color:red" >Hey :)</h1>
<br />
@for(int i = 0; i < myPage.Count; i++)
{
    myPage[i];
}

Answer 1

@page "/"

@foreach (string pageName in pageNames)
{    
   <ul>
      <li><a href="@pageName">@pageName</a></li>
   </ul>
}

@code {

   private List<string> pageNames = new List<string> 
   { 
      "Counter", 
      "NewCounter", 
      "AnotherVersion" 
   };

}

Answer 2

您可以使用DynamicComponent来呈现类型中的组件。

@foreach (var component in new[]{ typeof(SurveyPrompt), typeof(Counter), typeof(NewCounter) })
{
    <DynamicComponent Type=@component />
}

Answer 3

好的，有人发布答案并在之后立即将其删除。
所以，这里的答案：

@page "/"
@inject IJSRuntime JSRuntime

<h1 style="text-align:center;color:@bgColor" >My Dashboard</h1>
<br />
@foreach (var component in widget)
{
    <DynamicComponent Type=@component />
}

@code {
    public System.Type[] widget = new[] { typeof(Counter), typeof(NewCounter), typeof(AnotherVersion) };
}

（如果他转发他的消息，我会删除我的）