ça devrait fonctionner avec component

BlazorTest1/Components/Card.razor.cs

@@ -1,4 +1,7 @@
-public partial class Card<TItem>
+using Microsoft.AspNetCore.Components;
+namespace BlazorTest1.Components
+{
+    public partial class Card<TItem>
     {
         [Parameter]
         public RenderFragment<TItem> CardBody { get; set; }
@@ -12,3 +15,4 @@
         [Parameter]
         public TItem Item { get; set; }
     }
+}

BlazorTest1/Components/Crafting.razor

@@ -13,7 +13,6 @@
                         }
                     </div>
                 </div>
-
             </div>
 
             <div class="col-6">

BlazorTest1/Components/Crafting.razor.cs

@@ -0,0 +1,80 @@
+using BlazorTest1.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorTest1.Components
+{
+    public partial class Crafting
+    {
+        private Item _recipeResult;
+
+        public Crafting()
+        {
+            Actions = new ObservableCollection<CraftingAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+        }
+
+        public ObservableCollection<CraftingAction> Actions { get; set; }
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        public List<Item> RecipeItems { get; set; }
+
+        public Item RecipeResult
+        {
+            get => this._recipeResult;
+            set
+            {
+                if (this._recipeResult == value)
+                {
+                    return;
+                }
+
+                this._recipeResult = value;
+                this.StateHasChanged();
+            }
+        }
+
+        [Parameter]
+        public List<CraftingRecipe> Recipes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the java script runtime.
+        /// </summary>
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
+        public void CheckRecipe()
+        {
+            RecipeResult = null;
+
+            // Get the current model
+            var currentModel = string.Join("|", this.RecipeItems.Select(s => s != null ? s.Name : string.Empty));
+
+            this.Actions.Add(new CraftingAction { Action = $"Items : {currentModel}" });
+
+            foreach (var craftingRecipe in Recipes)
+            {
+                // Get the recipe model
+                var recipeModel = string.Join("|", craftingRecipe.Have.SelectMany(s => s));
+
+                this.Actions.Add(new CraftingAction { Action = $"Recipe model : {recipeModel}" });
+
+                if (currentModel == recipeModel)
+                {
+                    RecipeResult = craftingRecipe.Give;
+                }
+            }
+        }
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
+        }
+    }
+}

BlazorTest1/Components/Crafting.razor.css

@@ -0,0 +1,19 @@
+.css-grid {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 286px;
+}
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}
+
+.actions {
+    border: 1px solid black;
+    height: 250px;
+    overflow: scroll;
+}

BlazorTest1/Components/Crafting.razor.js

@@ -0,0 +1,16 @@
+window.Crafting =
+{
+    AddActions: function (data) {
+
+        data.forEach(element => {
+            var div = document.createElement('div');
+            div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index;
+
+            if (element.item) {
+                div.innerHTML += ' - Item Name: ' + element.item.name;
+            }
+
+            document.getElementById('actions').appendChild(div);
+        });
+    }
+}

BlazorTest1/Components/CraftingAction.cs

@@ -1,6 +1,10 @@
-public class CraftingAction
+using BlazorTest1.Models;
+namespace BlazorTest1.Components
+{
+    public class CraftingAction
     {
         public string Action { get; set; }
         public int Index { get; set; }
         public Item Item { get; set; }
     }
+}

BlazorTest1/Components/CraftingItem.razor

@@ -1,4 +1,5 @@
-<div
+
+<div
     class="item"
     ondragover="event.preventDefault();"
     draggable="true"

BlazorTest1/Components/CraftingItem.razor.cs

@@ -1,6 +1,8 @@
-using BlazorTest1.Components;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
+using BlazorTest1.Models;
 
+namespace BlazorTest1.Components
+{
     public partial class CraftingItem
     {
         [Parameter]
@@ -58,3 +60,4 @@ public partial class CraftingItem
             Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
         }
     }
+}

BlazorTest1/Components/CraftingItem.razor.css

@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}

BlazorTest1/Components/CraftingRecipe.cs

@@ -1,4 +1,5 @@
-public class CraftingRecipe
+using BlazorTest1.Models;
+public class CraftingRecipe
 {
     public Item Give { get; set; }
     public List<List<string>> Have { get; set; }

BlazorTest1/Components/MyFirstChildComponent.razor

@@ -0,0 +1,14 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [CascadingParameter]
+    public MyRootComponent RootComponent { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MyFirstChildComponent - @RootComponent.Text</strong>
+    <div>
+        @ChildContent
+    </div>
+</div>

BlazorTest1/Components/MyRootComponent.razor

@@ -0,0 +1,16 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public string Text { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MyRootComponent - @Text</strong>
+    <div>
+        <CascadingValue Value="@this">
+            @ChildContent
+        </CascadingValue>
+    </div>
+</div>

BlazorTest1/Components/MySecondChildComponent.razor

@@ -0,0 +1,14 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [CascadingParameter]
+    public MyRootComponent RootComponent { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MySecondChildComponent - @RootComponent.Text</strong>
+    <div>
+        @ChildContent
+    </div>
+</div>

BlazorTest1/Components/ShowItems.razor.cs

@@ -1,4 +1,7 @@
-public partial class ShowItems<TItem>
+using Microsoft.AspNetCore.Components;
+namespace BlazorTest1.Components
+{
+    public partial class ShowItems<TItem>
     {
         [Parameter]
         public List<TItem> Items { get; set; }
@@ -6,3 +9,4 @@
         [Parameter]
         public RenderFragment<TItem> ShowTemplate { get; set; }
     }
+}

BlazorTest1/Modals/DeleteConfirmation.razor.cs

@@ -1,4 +1,12 @@
-public partial class DeleteConfirmation
+using Blazored.Modal;
+using Blazored.Modal.Services;
+using BlazorTest1.Models;
+using BlazorTest1.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTest1.Modals
+{
+    public partial class DeleteConfirmation
     {
         [CascadingParameter]
         public BlazoredModalInstance ModalInstance { get; set; }
@@ -27,3 +35,4 @@
             ModalInstance.CancelAsync();
         }
     }
+}

BlazorTest1/Models/Cake.cs

@@ -1,6 +1,9 @@
-public class Cake
+namespace BlazorTest1.Models
+{
+    public class Cake
     {
         public int Id { get; set; }
         public string Name { get; set; }
         public decimal Cost { get; set; }
     }
+}

BlazorTest1/Models/Item.cs

@@ -1,4 +1,6 @@
-public class Item
+namespace BlazorTest1.Models
+{
+    public class Item
     {
         public int Id { get; set; }
         public string DisplayName { get; set; }
@@ -10,3 +12,4 @@
         public DateTime CreatedDate { get; set; }
         public DateTime? UpdatedDate { get; set; }
     }
+}

BlazorTest1/Pages/CallJsExample1.razor

@@ -0,0 +1,35 @@
+@page "/call-js-example-1"
+@inject IJSRuntime JS
+
+<h1>Call JS <code>convertArray</code> Function</h1>
+
+<p>
+    <button @onclick="ConvertArray">Convert Array</button>
+</p>
+
+<p>
+    @text
+</p>
+
+<p>
+    <a href="https://www.imdb.com/title/tt0379786/" target="_blank">Serenity</a><br>
+    <a href="https://www.imdb.com/name/nm0472710/" target="_blank">David Krumholtz on IMDB</a>
+</p>
+
+@code {
+    private MarkupString text;
+
+    private uint[] quoteArray = 
+        new uint[]
+        {
+            60, 101, 109, 62, 67, 97, 110, 39, 116, 32, 115, 116, 111, 112, 32,
+            116, 104, 101, 32, 115, 105, 103, 110, 97, 108, 44, 32, 77, 97,
+            108, 46, 60, 47, 101, 109, 62, 32, 45, 32, 77, 114, 46, 32, 85, 110,
+            105, 118, 101, 114, 115, 101, 10, 10,
+        };
+
+    private async Task ConvertArray()
+    {
+        text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));
+    }
+}

BlazorTest1/Pages/CallJsExample3.razor

@@ -0,0 +1,36 @@
+@page "/call-js-example-3"
+@inject IJSRuntime JS
+
+<h1>Call JS Example 3</h1>
+
+<p>
+    <button @onclick="SetStock">Set Stock</button>
+</p>
+
+@if (stockSymbol is not null)
+{
+    <p>@stockSymbol price: @price.ToString("c")</p>
+}
+
+@if (result is not null)
+{
+    <p>@result</p>
+}
+
+@code {
+    private Random r = new();
+    private string? stockSymbol;
+    private decimal price;
+    private string? result;
+
+    private async Task SetStock()
+    {
+        stockSymbol = 
+            $"{(char)('A' + r.Next(0, 26))}{(char)('A' + r.Next(0, 26))}";
+        price = r.Next(1, 101);
+        var interopResult = 
+            await JS.InvokeAsync<string>("displayTickerAlert2", stockSymbol, price);
+        result = $"Result of TickerChanged call for {stockSymbol} at " +
+            $"{price.ToString("c")}: {interopResult}";
+    }
+}

BlazorTest1/Pages/Index.razor

@@ -1,113 +1,3 @@
-@page "/"
-@using System.Globalization
-
-<PageTitle>Index</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
-
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
-
-<Card>
-    <CardHeader>
-        <div class="card-header">
-           My Templated Component
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
 </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <h5>Welcome To Template Component</h5>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>
-
-<Card>
-    <CardHeader>
-        <div class="card-header">
-            Templated Component
-        </div>
-    </CardHeader>
-    <CardHeader>
-        <div class="card-header">
-            Hi I'm duplicated header
-        </div>
-    </CardHeader>
-</Card>
-
-<Card Item="CakeItem">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @context.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <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>
-
-<Card Item="CakeItem" Context="cakeContext">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @cakeContext.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <div>@cakeContext.Name</div>
-            <div>$ @cakeContext.Cost</div>
-        </div>
-    </CardBody>
-</Card>
-
-<Card Item="CakeItem">
-    <CardHeader Context="headContext">
-        <div class="card-header">
-            Cake Token Number - @headContext.Id
-        </div>
-    </CardHeader>
-    <CardBody Context="bodyContext">
-        <div class="card-body">
-            <div>@bodyContext.Name</div>
-            <div>$ @bodyContext.Cost</div>
-        </div>
-    </CardBody>
-</Card>
-
-<ShowItems Items="Cakes" >
-    <ShowTemplate Context="CakeContext">
-        <div class="card text-center">
-            <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>
-    </ShowTemplate>
-</ShowItems>
-
-<TestRenderFragment>
-    <div>Content of my TestRenderFragment</div>
-</TestRenderFragment>
-
-<SurveyPrompt Title="How is Blazor working for you?" />

BlazorTest1/Pages/Index.razor.cs

@@ -1,33 +1,30 @@
-public partial class Index
+using BlazorTest1.Models;
+using BlazorTest1.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTest1.Pages {
+    public partial class Index
     {
-    ...
+        [Inject]
+        public IDataService DataService { get; set; }
 
-    public List<Cake> Cakes { get; set; }
+        public List<Item> Items { get; set; } = new List<Item>();
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
-    {
-        LoadCakes();
-        StateHasChanged();
-        return base.OnAfterRenderAsync(firstRender);
-    }
+        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
 
-    public void LoadCakes()
-    {
-        Cakes = new List<Cake>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            // items hidden for display purpose
-            new Cake
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
             {
-                Id = 1,
-                Name = "Red Velvet",
-                Cost = 60
-            },
-        };
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
     }
-    private Cake CakeItem = new Cake
-    {
-        Id = 1,
-        Name = "Black Forest",
-        Cost = 50
-    };
 }

BlazorTest1/Pages/List.razor.cs

@@ -2,6 +2,8 @@
 using Blazored.Modal;
 using Blazored.Modal.Services;
 using Blazorise.DataGrid;
+using BlazorTest1.Modals;
+using BlazorTest1.Models;
 using BlazorTest1.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;

BlazorTest1/Pages/_Layout.cshtml

@@ -7,6 +7,7 @@
 <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
 
 <script src="_content/Blazored.Modal/blazored.modal.js"></script>
+<script src="Components/Crafting.razor.js"></script>
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

BlazorTest1/Services/DataLocalService.cs

@@ -179,5 +179,23 @@ namespace BlazorTest1.Services
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
+        public Task<List<CraftingRecipe>> GetRecipes()
+        {
+            var items = new List<CraftingRecipe>
+        {
+            new CraftingRecipe
+            {
+                Give = new Item { DisplayName = "Diamond", Name = "diamond" },
+                Have = new List<List<string>>
+                {
+                    new List<string> { "dirt", "dirt", "dirt" },
+                    new List<string> { "dirt", null, "dirt" },
+                    new List<string> { "dirt", "dirt", "dirt" }
+                }
+            }
+        };
+
+            return Task.FromResult(items);
+        }
     }
 }

BlazorTest1/Services/IDataServices.cs

@@ -13,6 +13,9 @@ namespace BlazorTest1.Services
         Task<Item> GetById(int id);
 
         Task Update(int id, ItemModel model);
+
         Task Delete(int id);
+
+        Task<List<CraftingRecipe>> GetRecipes();
     }
 }

BlazorTest1/_Imports.razor

@@ -9,3 +9,9 @@
 @using BlazorTest1
 @using BlazorTest1.Shared
 @using Blazorise.DataGrid
+@using Blazorise.Components
+@using BlazorTest1.Components
+@using BlazorTest1.Models
+@using BlazorTest1.Modals
+@using BlazorTest1.Pages
+@using BlazorTest1.Data