Avancée dans le tuto jusqu'au tableau html

CetteAppliVaMarcher/CetteAppliVaMarcher/Models/Item.cs

@@ -0,0 +1,15 @@
+namespace CetteAppliVaMarcher.Models
+{
+    public class Item
+    {
+        public int Id { get; set; }
+        public string DisplayName { get; set; }
+        public string Name { get; set; }
+        public int StackSize { get; set; }
+        public int MaxDurability { get; set; }
+        public List<string> EnchantCategories { get; set; }
+        public List<string> RepairWith { get; set; }
+        public DateTime CreatedDate { get; set; }
+        public DateTime? UpdatedDate { get; set; }
+    }
+}

CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor

@@ -1,3 +1,34 @@
 @page "/list"
 
 <h3>List</h3>
+
+@if (items != null)
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Id</th>
+                <th>Display Name</th>
+                <th>Stack Size</th>
+                <th>Maximum Durability</th>
+                <th>Enchant Categories</th>
+                <th>Repair With</th>
+                <th>Created Date</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var item in items)
+            {
+                <tr>
+                    <td>@item.Id</td>
+                    <td>@item.DisplayName</td>
+                    <td>@item.StackSize</td>
+                    <td>@item.MaxDurability</td>
+                    <td>@(string.Join(", ", item.EnchantCategories))</td>
+                    <td>@(string.Join(", ", item.RepairWith))</td>
+                    <td>@item.CreatedDate.ToShortDateString()</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}

CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor.cs

@@ -1,6 +1,21 @@
-namespace CetteAppliVaMarcher.Pages
+using CetteAppliVaMarcher.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace CetteAppliVaMarcher.Pages
 {
     public partial class List
     {
+        private Item[] items;
+
+        [Inject]
+        public HttpClient Http { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        protected override async Task OnInitializedAsync()
+        {
+            items = await Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json");
+        }
     }
 }

CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/testLayout.razor

@@ -0,0 +1,6 @@
+@page "/layout"
+@layout PtitLayoutTranquilou
+
+<PageTitle>layout</PageTitle>
+
+<p>Chouette</p>>

CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs

@@ -1,13 +1,13 @@
 using CetteAppliVaMarcher.Data;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
-
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
+builder.Services.AddHttpClient();
 
 var app = builder.Build();
 

CetteAppliVaMarcher/CetteAppliVaMarcher/Shared/NavMenu.razor

@@ -29,6 +29,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="layout">
+                <span class="oi oi-warning" aria-hidden="true"></span> NE CLIQUEZ PAS
+            </NavLink>
+        </div>
     </nav>
 </div>
 

CetteAppliVaMarcher/CetteAppliVaMarcher/Shared/PtitLayoutTranquilou.razor

@@ -0,0 +1,22 @@
+@inherits LayoutComponentBase
+
+<header>
+    <h1>Le layout de paul</h1>
+</header>
+
+<nav>
+    <p>CECI</p>
+    <p>n'est pas</p>
+    <p>beau, je suis désolé</p>
+</nav>
+
+@Body
+
+<footer>
+    @MethodeString
+</footer>
+
+@code {
+    public string MethodeString { get; set; } = 
+        "Bonjour ceci est le résultat d'une méthode merci beaucoup";
+}

CetteAppliVaMarcher/CetteAppliVaMarcher/wwwroot/fake-data.json

@@ -0,0 +1,337 @@
+[
+  {
+    "id": 1,
+    "displayname": "Earthmark",
+    "name": "earthmark",
+    "stacksize": 61,
+    "maxdurability": 26,
+    "enchantcategories": [
+      "vanishable",
+      "digger",
+      "armor_head"
+    ],
+    "repairwith": [],
+    "createddate": "2020-06-25",
+    "updateddate": "2022-01-04"
+  },
+  {
+    "id": 2,
+    "displayname": "Uplinx",
+    "name": "uplinx",
+    "stacksize": 23,
+    "maxdurability": 87,
+    "enchantcategories": [
+      "vanishable"
+    ],
+    "repairwith": [
+      "dark_oak_planks"
+    ],
+    "createddate": "2016-11-20",
+    "updateddate": null
+  },
+  {
+    "id": 3,
+    "displayname": "Bytrex",
+    "name": "bytrex",
+    "stacksize": 27,
+    "maxdurability": 91,
+    "enchantcategories": [
+      "armor"
+    ],
+    "repairwith": [
+      "warped_planks"
+    ],
+    "createddate": "2014-09-18",
+    "updateddate": null
+  },
+  {
+    "id": 4,
+    "displayname": "Quonata",
+    "name": "quonata",
+    "stacksize": 48,
+    "maxdurability": 94,
+    "enchantcategories": [
+      "breakable"
+    ],
+    "repairwith": [
+      "jungle_planks"
+    ],
+    "createddate": "2016-09-30",
+    "updateddate": "2014-11-09"
+  },
+  {
+    "id": 5,
+    "displayname": "Magmina",
+    "name": "magmina",
+    "stacksize": 55,
+    "maxdurability": 48,
+    "enchantcategories": [],
+    "repairwith": [],
+    "createddate": "2020-07-21",
+    "updateddate": "2015-02-03"
+  },
+  {
+    "id": 6,
+    "displayname": "Geekol",
+    "name": "geekol",
+    "stacksize": 2,
+    "maxdurability": 64,
+    "enchantcategories": [],
+    "repairwith": [],
+    "createddate": "2015-09-03",
+    "updateddate": null
+  },
+  {
+    "id": 7,
+    "displayname": "Waretel",
+    "name": "waretel",
+    "stacksize": 19,
+    "maxdurability": 93,
+    "enchantcategories": [],
+    "repairwith": [
+      "warped_planks"
+    ],
+    "createddate": "2020-08-25",
+    "updateddate": "2014-11-03"
+  },
+  {
+    "id": 8,
+    "displayname": "Darwinium",
+    "name": "darwinium",
+    "stacksize": 35,
+    "maxdurability": 24,
+    "enchantcategories": [
+      "weapon",
+      "armor_chest"
+    ],
+    "repairwith": [
+      "oak_planks"
+    ],
+    "createddate": "2017-03-28",
+    "updateddate": null
+  },
+  {
+    "id": 9,
+    "displayname": "Comtrail",
+    "name": "comtrail",
+    "stacksize": 54,
+    "maxdurability": 60,
+    "enchantcategories": [
+      "breakable"
+    ],
+    "repairwith": [
+      "crimson_planks",
+      "acacia_planks"
+    ],
+    "createddate": "2015-10-29",
+    "updateddate": "2021-12-21"
+  },
+  {
+    "id": 10,
+    "displayname": "Motovate",
+    "name": "motovate",
+    "stacksize": 53,
+    "maxdurability": 70,
+    "enchantcategories": [],
+    "repairwith": [
+      "spruce_planks",
+      "acacia_planks"
+    ],
+    "createddate": "2020-07-27",
+    "updateddate": null
+  },
+  {
+    "id": 11,
+    "displayname": "Radiantix",
+    "name": "radiantix",
+    "stacksize": 15,
+    "maxdurability": 47,
+    "enchantcategories": [
+      "breakable",
+      "armor_chest"
+    ],
+    "repairwith": [],
+    "createddate": "2022-04-17",
+    "updateddate": "2021-02-25"
+  },
+  {
+    "id": 12,
+    "displayname": "Overfork",
+    "name": "overfork",
+    "stacksize": 49,
+    "maxdurability": 73,
+    "enchantcategories": [],
+    "repairwith": [
+      "warped_planks"
+    ],
+    "createddate": "2014-06-30",
+    "updateddate": null
+  },
+  {
+    "id": 13,
+    "displayname": "Tripsch",
+    "name": "tripsch",
+    "stacksize": 51,
+    "maxdurability": 93,
+    "enchantcategories": [
+      "vanishable"
+    ],
+    "repairwith": [
+      "dark_oak_planks",
+      "crimson_planks"
+    ],
+    "createddate": "2020-04-01",
+    "updateddate": "2019-10-05"
+  },
+  {
+    "id": 14,
+    "displayname": "Gluid",
+    "name": "gluid",
+    "stacksize": 20,
+    "maxdurability": 77,
+    "enchantcategories": [],
+    "repairwith": [],
+    "createddate": "2019-09-11",
+    "updateddate": null
+  },
+  {
+    "id": 15,
+    "displayname": "Duoflex",
+    "name": "duoflex",
+    "stacksize": 52,
+    "maxdurability": 10,
+    "enchantcategories": [
+      "armor",
+      "vanishable",
+      "vanishable"
+    ],
+    "repairwith": [
+      "crimson_planks",
+      "spruce_planks"
+    ],
+    "createddate": "2019-01-15",
+    "updateddate": "2021-01-29"
+  },
+  {
+    "id": 16,
+    "displayname": "Miraclis",
+    "name": "miraclis",
+    "stacksize": 49,
+    "maxdurability": 1,
+    "enchantcategories": [
+      "armor_head",
+      "digger",
+      "breakable"
+    ],
+    "repairwith": [
+      "crimson_planks"
+    ],
+    "createddate": "2019-06-05",
+    "updateddate": null
+  },
+  {
+    "id": 17,
+    "displayname": "Bedder",
+    "name": "bedder",
+    "stacksize": 9,
+    "maxdurability": 93,
+    "enchantcategories": [
+      "weapon",
+      "armor",
+      "armor"
+    ],
+    "repairwith": [],
+    "createddate": "2017-03-24",
+    "updateddate": "2014-11-10"
+  },
+  {
+    "id": 18,
+    "displayname": "Oulu",
+    "name": "oulu",
+    "stacksize": 33,
+    "maxdurability": 79,
+    "enchantcategories": [
+      "armor",
+      "digger"
+    ],
+    "repairwith": [
+      "oak_planks"
+    ],
+    "createddate": "2021-04-04",
+    "updateddate": null
+  },
+  {
+    "id": 19,
+    "displayname": "Yogasm",
+    "name": "yogasm",
+    "stacksize": 38,
+    "maxdurability": 118,
+    "enchantcategories": [
+      "armor_chest",
+      "weapon"
+    ],
+    "repairwith": [
+      "oak_planks",
+      "spruce_planks"
+    ],
+    "createddate": "2017-12-17",
+    "updateddate": null
+  },
+  {
+    "id": 20,
+    "displayname": "Eventix",
+    "name": "eventix",
+    "stacksize": 61,
+    "maxdurability": 122,
+    "enchantcategories": [],
+    "repairwith": [
+      "crimson_planks"
+    ],
+    "createddate": "2014-04-22",
+    "updateddate": "2015-01-15"
+  },
+  {
+    "id": 21,
+    "displayname": "Andershun",
+    "name": "andershun",
+    "stacksize": 45,
+    "maxdurability": 39,
+    "enchantcategories": [
+      "vanishable"
+    ],
+    "repairwith": [
+      "crimson_planks"
+    ],
+    "createddate": "2019-12-30",
+    "updateddate": "2019-06-24"
+  },
+  {
+    "id": 22,
+    "displayname": "Austex",
+    "name": "austex",
+    "stacksize": 45,
+    "maxdurability": 35,
+    "enchantcategories": [
+      "armor_chest",
+      "vanishable"
+    ],
+    "repairwith": [
+      "birch_planks"
+    ],
+    "createddate": "2017-08-07",
+    "updateddate": null
+  },
+  {
+    "id": 23,
+    "displayname": "Slumberia",
+    "name": "slumberia",
+    "stacksize": 50,
+    "maxdurability": 46,
+    "enchantcategories": [
+      "armor_head"
+    ],
+    "repairwith": [],
+    "createddate": "2022-01-03",
+    "updateddate": null
+  }
+]