Fonctionnement du display de plusieurs types

Component/Card.razor

@@ -1,6 +1,6 @@
-@*@typeparam TItem
+@typeparam TItem
 <div class="card text-center">
     @CardHeader(Item)
     @CardBody(Item)
     @CardFooter
-</div>*@
+</div>

Component/Card.razor.cs

@@ -1,16 +1,19 @@
 using Microsoft.AspNetCore.Components;
 
-public partial class Card<TItem>
+namespace Blazor.Component
 {
-    [Parameter]
+    public partial class Card<TItem>
-    public RenderFragment<TItem> CardBody { get; set; }
+    {
+        [Parameter]
+        public RenderFragment<TItem> CardBody { get; set; }
 
-    [Parameter]
+        [Parameter]
-    public RenderFragment CardFooter { get; set; }
+        public RenderFragment CardFooter { get; set; }
 
-    [Parameter]
+        [Parameter]
-    public RenderFragment<TItem> CardHeader { get; set; }
+        public RenderFragment<TItem> CardHeader { get; set; }
 
-    [Parameter]
+        [Parameter]
-    public TItem Item { get; set; }
+        public TItem Item { get; set; }
+    }
 }

Component/ShowItems.razor

@@ -0,0 +1,12 @@
+@typeparam TItem
+
+<div>
+    @if ((Items?.Count ?? 0) != 0)
+    {
+        @foreach (var item in Items)
+        {
+            @ShowTemplate(item)
+            ;
+        }
+    }
+</div>

Component/ShowItems.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Blazor.Component
+{
+    public partial class ShowItems<TItem>
+    {
+        [Parameter]
+        public List<TItem> Items { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> ShowTemplate { get; set; }
+    }
+}

Pages/Index.razor

@@ -1,6 +1,10 @@
 @page "/"
 @using System.Globalization
+@using Blazor.Component
 @using Blazor.Models;
+@using Component;
+@using Models;
+@using Blazor.Pages;
 
 <PageTitle>Index</PageTitle>
 
@@ -10,24 +14,21 @@ Welcome to your new app.
 
 <p>
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>@*
+</p>
-<Card Item="CakeItem">
+<ShowItems Items="Cakes" >
-    <CardHeader>
+    <ShowTemplate Context="CakeContext">
-        <div class="card-header">
+        <div class="card text-center">
-            Cake Token Number - @context.Id
+            <div class="card-header">
+                Cake Token Id - @CakeContext.Id
+            </div>
+            <div class="card-body">
+                <h5 class="card-title">@CakeContext.Name</h5>
+                <p class="card-text">Price $@CakeContext.Cost</p>
+            </div>
+            <div class="card-footer text-muted">
+                Click Here
+            </div>
         </div>
-    </CardHeader>
+    </ShowTemplate>
-    <CardBody>
+</ShowItems>
-        <div class="card-body">
-            <div>@context.Name</div>
-            <div>$ @context.Cost</div>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>*@
-
 <SurveyPrompt Title="How is Blazor working for you?" />

Pages/Index.razor.cs

@@ -10,5 +10,34 @@ namespace Blazor.Pages
             Name = "Black Forest",
             Cost = 50
         };
+        public List<Cake> Cakes { get; set; }
+
+        protected override Task OnAfterRenderAsync(bool firstRender)
+        {
+            LoadCakes();
+            StateHasChanged();
+            return base.OnAfterRenderAsync(firstRender);
+        }
+
+        public void LoadCakes()
+        {
+            Cakes = new List<Cake>
+        {
+            // items hidden for display purpose
+            new Cake
+            {
+                Id = 1,
+                Name = "Red Velvet",
+                Cost = 60
+            },
+            new Cake
+            {
+                Id = 2,
+                Name = "Tiramisu",
+                Cost= 1000000,
+            }
+        };
+        }
     }
+
 }

Pages/List.razor

@@ -29,12 +29,6 @@
             }
         </DisplayTemplate>
     </DataGridColumn>
-    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
-        <DisplayTemplate>
-            <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
-            <button type="button" class="btn btn-primary" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
-        </DisplayTemplate>
-    </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
     <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
     <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
@@ -48,4 +42,10 @@
             @(string.Join(", ", ((Item)context).RepairWith))
         </DisplayTemplate>
     </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
+        <DisplayTemplate>
+            <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
+            <button type="button" class="btn btn-primary" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
+        </DisplayTemplate>
+    </DataGridColumn>
 </DataGrid>