fini jusque fin de globalisation

BlazorApp1/App.razor

@@ -1,4 +1,5 @@
-<Router AppAssembly="@typeof(App).Assembly">
+<CascadingBlazoredModal>
+<Router AppAssembly="@typeof(App).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
@@ -10,3 +11,4 @@
         </LayoutView>
     </NotFound>
 </Router>
+</CascadingBlazoredModal>

BlazorApp1/BlazorApp1.csproj

@@ -8,9 +8,11 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.LocalStorage" Version="4.2.0" />
+    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
     <PackageReference Include="Blazorise.Bootstrap" Version="1.1.2" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.2" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.2" />
+    <PackageReference Include="Microsoft.Extensions.Localization.Abstractions" Version="7.0.0" />
   </ItemGroup>
 
 </Project>

BlazorApp1/Controllers/CultureController.cs

@@ -0,0 +1,35 @@
+using Microsoft.AspNetCore.Localization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace BlazorApp1.Controllers
+{
+
+    /// <summary>
+    /// The culture controller.
+    /// </summary>
+    [Route("[controller]/[action]")]
+    public class CultureController : Controller
+    {
+        /// <summary>
+        /// Sets the culture.
+        /// </summary>
+        /// <param name="culture">The culture.</param>
+        /// <param name="redirectUri">The redirect URI.</param>
+        /// <returns>
+        /// The action result.
+        /// </returns>
+        public IActionResult SetCulture(string culture, string redirectUri)
+        {
+            if (culture != null)
+            {
+                // Define a cookie with the selected culture
+                this.HttpContext.Response.Cookies.Append(
+                    CookieRequestCultureProvider.DefaultCookieName,
+                    CookieRequestCultureProvider.MakeCookieValue(
+                        new RequestCulture(culture)));
+            }
+
+            return this.LocalRedirect(redirectUri);
+        }
+    }
+}

BlazorApp1/Factories/ItemFactory.cs

@@ -0,0 +1,48 @@
+using BlazorApp1.Models;
+
+namespace BlazorApp1.Factories
+{
+    public static class ItemFactory
+    {
+        public static ItemModel ToModel(Item item, byte[] imageContent)
+        {
+            return new ItemModel
+            {
+                Id = item.Id,
+                DisplayName = item.DisplayName,
+                Name = item.Name,
+                RepairWith = item.RepairWith,
+                EnchantCategories = item.EnchantCategories,
+                MaxDurability = item.MaxDurability,
+                StackSize = item.StackSize,
+                ImageContent = imageContent
+            };
+        }
+
+        public static Item Create(ItemModel model)
+        {
+            return new Item
+            {
+                Id = model.Id,
+                DisplayName = model.DisplayName,
+                Name = model.Name,
+                RepairWith = model.RepairWith,
+                EnchantCategories = model.EnchantCategories,
+                MaxDurability = model.MaxDurability,
+                StackSize = model.StackSize,
+                CreatedDate = DateTime.Now
+            };
+        }
+
+        public static void Update(Item item, ItemModel model)
+        {
+            item.DisplayName = model.DisplayName;
+            item.Name = model.Name;
+            item.RepairWith = model.RepairWith;
+            item.EnchantCategories = model.EnchantCategories;
+            item.MaxDurability = model.MaxDurability;
+            item.StackSize = model.StackSize;
+            item.UpdatedDate = DateTime.Now;
+        }
+    }
+}

BlazorApp1/Modals/DeleteConfirmation.razor

@@ -0,0 +1,10 @@
+<div class="simple-form">
+    
+    <p>
+        Are you sure you want to delete @item.DisplayName ?
+    </p>
+
+    <button @onclick="ConfirmDelete" class="btn btn-danger">Delete</button>
+
+    <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
+</div>

BlazorApp1/Modals/DeleteConfirmation.razor.cs

@@ -0,0 +1,37 @@
+using BlazorApp1.Models;
+using Blazored.Modal;
+using Blazored.Modal.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp1.Modals
+{
+    public partial class DeleteConfirmation
+    {
+        [CascadingParameter]
+        public BlazoredModalInstance ModalInstance { get; set; }
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Parameter]
+        public int Id { get; set; }
+
+        private Item item = new Item();
+
+        protected override async Task OnInitializedAsync()
+        {
+            // Get the item
+            item = await DataService.GetById(Id);
+        }
+
+        void ConfirmDelete()
+        {
+            ModalInstance.CloseAsync(ModalResult.Ok(true));
+        }
+
+        void Cancel()
+        {
+            ModalInstance.CancelAsync();
+        }
+    }
+}

BlazorApp1/Pages/Add.razor.cs

@@ -7,25 +7,11 @@ namespace BlazorApp1.Pages
 {
     public partial class Add
     {
-        [Inject]
-        public ILocalStorageService LocalStorage { get; set; }
-
-        [Inject]
-        public NavigationManager NavigationManager { get; set; }
-
-        [Inject]
-        public IWebHostEnvironment WebHostEnvironment { get; set; }
-
         /// <summary>
         /// The default enchant categories.
         /// </summary>
         private List<string> enchantCategories = new List<string>() { "armor", "armor_head", "armor_chest", "weapon", "digger", "breakable", "vanishable" };
 
-        /// <summary>
-        /// The default repair with.
-        /// </summary>
-        private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
-
         /// <summary>
         /// The current item model
         /// </summary>
@@ -35,44 +21,21 @@ namespace BlazorApp1.Pages
             RepairWith = new List<string>()
         };
 
-        private async void HandleValidSubmit()
+        /// <summary>
-        {
+        /// The default repair with.
-            // Get the current data
+        /// </summary>
-            var currentData = await LocalStorage.GetItemAsync<List<Item>>("data");
+        private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
-
-            // Simulate the Id
-            itemModel.Id = currentData.Max(s => s.Id) + 1;
-
-            // Add the item to the current data
-            currentData.Add(new Item
-            {
-                Id = itemModel.Id,
-                DisplayName = itemModel.DisplayName,
-                Name = itemModel.Name,
-                RepairWith = itemModel.RepairWith,
-                EnchantCategories = itemModel.EnchantCategories,
-                MaxDurability = itemModel.MaxDurability,
-                StackSize = itemModel.StackSize,
-                CreatedDate = DateTime.Now
-            });
-
-            // Save the image
-            var imagePathInfo = new DirectoryInfo($"{WebHostEnvironment.WebRootPath}/images");
 
-            // Check if the folder "images" exist
+        [Inject]
-            if (!imagePathInfo.Exists)
+        public IDataService DataService { get; set; }
-            {
-                imagePathInfo.Create();
-            }
 
-            // Determine the image name
+        [Inject]
-            var fileName = new FileInfo($"{imagePathInfo}/{itemModel.Name}.png");
+        public NavigationManager NavigationManager { get; set; }
 
-            // Write the file content
+        private async void HandleValidSubmit()
-            await File.WriteAllBytesAsync(fileName.FullName, itemModel.ImageContent);
+        {
+            await DataService.Add(itemModel);
 
-            // Save the data
-            await LocalStorage.SetItemAsync("data", currentData);
             NavigationManager.NavigateTo("list");
         }
 

BlazorApp1/Pages/Counter.razor

@@ -13,6 +13,6 @@
 
     private void IncrementCount()
     {
-        currentCount++;
+        currentCount=currentCount+8000;
     }
 }

BlazorApp1/Pages/Edit.razor

@@ -0,0 +1,83 @@
+@page "/edit/{Id:int}"
+@using BlazorApp1.Models
+
+<h3>Edit</h3>
+
+<EditForm Model="@itemModel" OnValidSubmit="@HandleValidSubmit">
+    <DataAnnotationsValidator />
+    <ValidationSummary />
+
+    <p>
+        <label for="display-name">
+            Display name:
+            <InputText id="display-name" @bind-Value="itemModel.DisplayName" />
+        </label>
+    </p>
+    <p>
+        <label for="name">
+            Name:
+            <InputText id="name" @bind-Value="itemModel.Name" />
+        </label>
+    </p>
+    <p>
+        <label for="stack-size">
+            Stack size:
+            <InputNumber id="stack-size" @bind-Value="itemModel.StackSize" />
+        </label>
+    </p>
+    <p>
+        <label for="max-durability">
+            Max durability:
+            <InputNumber id="max-durability" @bind-Value="itemModel.MaxDurability" />
+        </label>
+    </p>
+    <p>
+        Enchant categories:
+        <div>
+            @foreach (var item in enchantCategories)
+            {
+                <label>
+                    <input type="checkbox" @onchange="@(e => OnEnchantCategoriesChange(item, e.Value))" checked="@(itemModel.EnchantCategories.Contains(item) ? "checked" : null)" />@item
+                </label>
+            }
+        </div>
+    </p>
+    <p>
+        Repair with:
+        <div>
+            @foreach (var item in repairWith)
+            {
+                <label>
+                    <input type="checkbox" @onchange="@(e => OnRepairWithChange(item, e.Value))" checked="@(itemModel.RepairWith.Contains(item) ? "checked" : null)" />@item
+                </label>
+            }
+        </div>
+    </p>
+    <p>
+        <label>
+            Current Item image:
+            @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
+            {
+                <img src="images/@(itemModel.Name).png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px"/>
+            }
+            else
+            {
+                <img src="images/default.png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px"/>
+            }
+        </label>
+    </p>
+    <p>
+        <label>
+            Item image:
+            <InputFile OnChange="@LoadImage" accept=".png" />
+        </label>    
+    </p>
+    <p>
+        <label>
+            Accept Condition:
+            <InputCheckbox @bind-Value="itemModel.AcceptCondition" />
+        </label>
+    </p>
+
+    <button type="submit">Submit</button>
+</EditForm>

BlazorApp1/Pages/Edit.razor.cs

@@ -0,0 +1,109 @@
+using BlazorApp1.Factories;
+using BlazorApp1.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace BlazorApp1.Pages
+{
+    public partial class Edit
+    {
+        [Parameter]
+        public int Id { get; set; }
+
+        /// <summary>
+        /// The default enchant categories.
+        /// </summary>
+        private List<string> enchantCategories = new List<string>() { "armor", "armor_head", "armor_chest", "weapon", "digger", "breakable", "vanishable" };
+
+        /// <summary>
+        /// The current item model
+        /// </summary>
+        private ItemModel itemModel = new()
+        {
+            EnchantCategories = new List<string>(),
+            RepairWith = new List<string>()
+        };
+
+        /// <summary>
+        /// The default repair with.
+        /// </summary>
+        private List<string> repairWith = new List<string>() { "oak_planks", "spruce_planks", "birch_planks", "jungle_planks", "acacia_planks", "dark_oak_planks", "crimson_planks", "warped_planks" };
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [Inject]
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
+
+        protected override async Task OnInitializedAsync()
+        {
+            var item = await DataService.GetById(Id);
+
+            var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");
+
+            if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
+            {
+                fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
+            }
+
+            // Set the model with the item
+            itemModel = ItemFactory.ToModel(item, fileContent);
+        }
+
+        private async void HandleValidSubmit()
+        {
+            await DataService.Update(Id, itemModel);
+
+            NavigationManager.NavigateTo("list");
+        }
+
+        private async Task LoadImage(InputFileChangeEventArgs e)
+        {
+            // Set the content of the image to the model
+            using (var memoryStream = new MemoryStream())
+            {
+                await e.File.OpenReadStream().CopyToAsync(memoryStream);
+                itemModel.ImageContent = memoryStream.ToArray();
+            }
+        }
+
+        private void OnEnchantCategoriesChange(string item, object checkedValue)
+        {
+            if ((bool)checkedValue)
+            {
+                if (!itemModel.EnchantCategories.Contains(item))
+                {
+                    itemModel.EnchantCategories.Add(item);
+                }
+
+                return;
+            }
+
+            if (itemModel.EnchantCategories.Contains(item))
+            {
+                itemModel.EnchantCategories.Remove(item);
+            }
+        }
+
+        private void OnRepairWithChange(string item, object checkedValue)
+        {
+            if ((bool)checkedValue)
+            {
+                if (!itemModel.RepairWith.Contains(item))
+                {
+                    itemModel.RepairWith.Add(item);
+                }
+
+                return;
+            }
+
+            if (itemModel.RepairWith.Contains(item))
+            {
+                itemModel.RepairWith.Remove(item);
+            }
+        }
+    }
+}

BlazorApp1/Pages/Index.razor

@@ -1,9 +1,11 @@
 @page "/"
+@using System.Globalization
 
 <PageTitle>Index</PageTitle>
 
 <h1>Hello, world!</h1>
-
 Welcome to your new app.
-
+<p>
+    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
+</p>
 <SurveyPrompt Title="How is Blazor working for you?" />

BlazorApp1/Pages/List.razor

@@ -1,10 +1,11 @@
 @page "/list"
 @using BlazorApp1.Models
 
+<h3>@Localizer["Title"]</h3>
 <h3>List</h3>
 
 <div>
-    <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
+    <NavLink class="btn btn-success" href="Add" Match="NavLinkMatch.All">
         <i class="fa fa-plus"></i> Ajouter
     </NavLink>
 </div>
@@ -43,4 +44,10 @@
         </DisplayTemplate>
     </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+        <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-danger" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
+        </DisplayTemplate>
+    </DataGridColumn>
 </DataGrid>

BlazorApp1/Pages/_Layout.cshtml

@@ -12,6 +12,7 @@
     <link href="css/site.css" rel="stylesheet" />
     <link href="BlazorApp1.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
 </head>
 <body>
     @RenderBody()
@@ -28,7 +29,7 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
-    
+    <script src="_content/Blazored.Modal/blazored.modal.js"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
 
     <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />

BlazorApp1/Pages/list.razor.cs

@@ -1,63 +1,65 @@
-using BlazorApp1.Models;
+using BlazorApp1.Modals;
+using BlazorApp1.Models;
 using Blazored.LocalStorage;
+using Blazored.Modal;
+using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 
 namespace BlazorApp1.Pages
 {
     public partial class List
     {
+        [Inject]
+        public IStringLocalizer<List> Localizer { get; set; }
         private List<Item> items;
 
         private int totalItem;
 
         [Inject]
-        public HttpClient Http { get; set; }
+        public NavigationManager NavigationManager { get; set; }
 
-        [Inject]
+        [CascadingParameter]
-        public ILocalStorageService LocalStorage { get; set; }
+        public IModalService Modal { get; set; }
 
         [Inject]
-        public IWebHostEnvironment WebHostEnvironment { get; set; }
+        public IDataService DataService { get; set; }
 
         [Inject]
-        public NavigationManager NavigationManager { get; set; }
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
 
-        protected override async Task OnAfterRenderAsync(bool firstRender)
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
-            // Do not treat this action if is not the first render
+            if (e.CancellationToken.IsCancellationRequested)
-            if (!firstRender)
             {
                 return;
             }
 
-            var currentData = await LocalStorage.GetItemAsync<Item[]>("data");
+            if (!e.CancellationToken.IsCancellationRequested)
-
-            // Check if data exist in the local storage
-            if (currentData == null)
             {
-                // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+                items = await DataService.List(e.Page, e.PageSize);
-                var originalData = Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
+                totalItem = await DataService.Count();
-                await LocalStorage.SetItemAsync("data", originalData);
             }
         }
 
-        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        private async void OnDelete(int id)
         {
-            if (e.CancellationToken.IsCancellationRequested)
+            var parameters = new ModalParameters();
+            parameters.Add(nameof(Item.Id), id);
+
+            var modal = Modal.Show<DeleteConfirmation>("Delete Confirmation", parameters);
+            var result = await modal.Result;
+
+            if (result.Cancelled)
             {
                 return;
             }
 
-            // When you use a real API, we use this follow code
+            await DataService.Delete(id);
-            //var response = await Http.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
-            var response = (await LocalStorage.GetItemAsync<Item[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
 
-            if (!e.CancellationToken.IsCancellationRequested)
+            // Reload the page
-            {
+            NavigationManager.NavigateTo("list", true);
-                totalItem = (await LocalStorage.GetItemAsync<List<Item>>("data")).Count;
-                items = new List<Item>(response); // an actual data for the current page
-            }
         }
     }
 }

BlazorApp1/Program.cs

@@ -1,10 +1,12 @@
 using BlazorApp1.Data;
 using Blazored.LocalStorage;
+using Blazored.Modal;
 using Blazorise;
 using Blazorise.Bootstrap;
 using Blazorise.Icons.FontAwesome;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Localization;
-using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Options;
+using System.Globalization;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -18,6 +20,25 @@ builder.Services
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();
 builder.Services.AddBlazoredLocalStorage();
+builder.Services.AddScoped<IDataService, DataLocalService>();
+builder.Services.AddBlazoredModal();
+
+// Add the controller of the app
+builder.Services.AddControllers();
+
+// Add the localization to the app and specify the resources path
+builder.Services.AddLocalization(opts => { opts.ResourcesPath = "Resources"; });
+
+// Configure the localtization
+builder.Services.Configure<RequestLocalizationOptions>(options =>
+{
+    // Set the default culture of the web site
+    options.DefaultRequestCulture = new RequestCulture(new CultureInfo("en-US"));
+
+    // Declare the supported culture
+    options.SupportedCultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("fr-FR") };
+    options.SupportedUICultures = new List<CultureInfo> { new CultureInfo("en-US"), new CultureInfo("fr-FR") };
+});
 
 var app = builder.Build(); 
 
@@ -35,6 +56,20 @@ app.UseStaticFiles();
 
 app.UseRouting();
 
+var options = ((IApplicationBuilder)app).ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>();
+
+if (options?.Value != null)
+{
+    // use the default localization
+    app.UseRequestLocalization(options.Value);
+}
+
+// Add the controller to the endpoint
+app.UseEndpoints(endpoints =>
+{
+    endpoints.MapControllers();
+});
+
 app.MapBlazorHub();
 app.MapFallbackToPage("/_Host");
 

BlazorApp1/Ressources/Pages.List.fr-FR.resx

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Title" xml:space="preserve">
+    <value>Liste</value>
+  </data>
+</root>

BlazorApp1/Ressources/Pages.List.resx

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Title" xml:space="preserve">
+    <value>List</value>
+  </data>
+</root>

BlazorApp1/Services/DataLocalService.cs

@@ -0,0 +1,164 @@
+using BlazorApp1.Factories;
+using BlazorApp1.Models;
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components;
+
+public class DataLocalService : IDataService
+{
+    private readonly HttpClient _http;
+    private readonly ILocalStorageService _localStorage;
+    private readonly NavigationManager _navigationManager;
+    private readonly IWebHostEnvironment _webHostEnvironment;
+
+    public DataLocalService(
+        ILocalStorageService localStorage,
+        HttpClient http,
+        IWebHostEnvironment webHostEnvironment,
+        NavigationManager navigationManager)
+    {
+        _localStorage = localStorage;
+        _http = http;
+        _webHostEnvironment = webHostEnvironment;
+        _navigationManager = navigationManager;
+    }
+
+    public async Task Add(ItemModel model)
+    {
+        // Get the current data
+        var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+        // Simulate the Id
+        model.Id = currentData.Max(s => s.Id) + 1;
+
+        // Add the item to the current data
+        currentData.Add(ItemFactory.Create(model));
+
+        // Save the image
+        var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+        // Check if the folder "images" exist
+        if (!imagePathInfo.Exists)
+        {
+            imagePathInfo.Create();
+        }
+
+        // Determine the image name
+        var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+        // Write the file content
+        await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+
+        // Save the data
+        await _localStorage.SetItemAsync("data", currentData);
+    }
+
+    public async Task<int> Count()
+    {
+        return (await _localStorage.GetItemAsync<Item[]>("data")).Length;
+    }
+
+    public async Task<List<Item>> List(int currentPage, int pageSize)
+    {
+        // Load data from the local storage
+        var currentData = await _localStorage.GetItemAsync<Item[]>("data");
+
+        // Check if data exist in the local storage
+        if (currentData == null)
+        {
+            // this code add in the local storage the fake data
+            var originalData = await _http.GetFromJsonAsync<Item[]>($"{_navigationManager.BaseUri}fake-data.json");
+            await _localStorage.SetItemAsync("data", originalData);
+        }
+
+        return (await _localStorage.GetItemAsync<Item[]>("data")).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList();
+    }
+    
+
+public async Task<Item> GetById(int id)
+    {
+        // Get the current data
+        var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+        // Get the item int the list
+        var item = currentData.FirstOrDefault(w => w.Id == id);
+
+        // Check if item exist
+        if (item == null)
+        {
+            throw new Exception($"Unable to found the item with ID: {id}");
+        }
+
+        return item;
+    }
+
+    public async Task Update(int id, ItemModel model)
+    {
+        // Get the current data
+        var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+        // Get the item int the list
+        var item = currentData.FirstOrDefault(w => w.Id == id);
+
+        // Check if item exist
+        if (item == null)
+        {
+            throw new Exception($"Unable to found the item with ID: {id}");
+        }
+
+        // Save the image
+        var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+
+        // Check if the folder "images" exist
+        if (!imagePathInfo.Exists)
+        {
+            imagePathInfo.Create();
+        }
+
+        // Delete the previous image
+        if (item.Name != model.Name)
+        {
+            var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+            if (oldFileName.Exists)
+            {
+                File.Delete(oldFileName.FullName);
+            }
+        }
+
+        // Determine the image name
+        var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+
+        // Write the file content
+        await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+
+        ItemFactory.Update(item, model);
+
+        // Save the data
+        await _localStorage.SetItemAsync("data", currentData);
+        
+       
+    }
+    public async Task Delete(int id)
+    {
+        // Get the current data
+        var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+        // Get the item int the list
+        var item = currentData.FirstOrDefault(w => w.Id == id);
+
+        // Delete item in
+        currentData.Remove(item);
+
+        // Delete the image
+        var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+        var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+        if (fileName.Exists)
+        {
+            File.Delete(fileName.FullName);
+        }
+
+        // Save the data
+        await _localStorage.SetItemAsync("data", currentData);
+    }
+}

BlazorApp1/Services/IDataServicee.cs

@@ -0,0 +1,14 @@
+using BlazorApp1.Models;
+
+public interface IDataService
+{
+    Task Add(ItemModel model);
+
+    Task<int> Count();
+
+    Task<List<Item>> List(int currentPage, int pageSize);
+    Task<Item> GetById(int id);
+
+    Task Update(int id, ItemModel model);
+    Task Delete(int id);
+}

BlazorApp1/Shared/CultureSelector.razor

@@ -0,0 +1,43 @@
+@using  System.Globalization
+@inject NavigationManager NavigationManager
+
+<p>
+    <label>
+        Select your locale:
+        <select @bind="Culture">
+            @foreach (var culture in supportedCultures)
+            {
+                <option value="@culture">@culture.DisplayName</option>
+            }
+        </select>
+    </label>
+</p>
+
+@code
+{
+    private CultureInfo[] supportedCultures = new[]
+    {
+        new CultureInfo("en-US"),
+        new CultureInfo("fr-FR")
+    };
+
+    private CultureInfo Culture
+    {
+        get => CultureInfo.CurrentCulture;
+        set
+        {
+            if (CultureInfo.CurrentUICulture == value)
+            {
+                return;
+            }
+
+            var culture = value.Name.ToLower(CultureInfo.InvariantCulture);
+
+            var uri = new Uri(this.NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
+            var query = $"?culture={Uri.EscapeDataString(culture)}&" + $"redirectUri={Uri.EscapeDataString(uri)}";
+
+            // Redirect the user to the culture controller to set the cookie
+            this.NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
+        }
+    }
+}

BlazorApp1/Shared/MainLayout.razor

@@ -10,6 +10,9 @@
     <main>
         <div class="top-row px-4">
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+             <div class="px-4">
+                <CultureSelector />
+            </div>
         </div>
 
         <article class="content px-4">

BlazorApp1/_Imports.razor

@@ -8,4 +8,6 @@
 @using Microsoft.JSInterop
 @using BlazorApp1
 @using BlazorApp1.Shared
-@using Blazorise.DataGrid
+@using Blazorise.DataGrid
+@using Blazored.Modal
+@using Blazored.Modal.Services