Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

En réalité c'est la suppression d'un utilisateur avec popup

Project/adminBlazor/adminBlazor/App.razor

@@ -1,13 +1,14 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
-
+<CascadingBlazoredModal>
+    <Router AppAssembly="@typeof(App).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+        <NotFound>
+            <PageTitle>Not found</PageTitle>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p role="alert">Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingBlazoredModal>

Project/adminBlazor/adminBlazor/Modals/DeleteConfirmation.razor

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

Project/adminBlazor/adminBlazor/Modals/DeleteConfirmation.razor.cs

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

Project/adminBlazor/adminBlazor/Pages/List.razor

@@ -49,9 +49,9 @@
     <DataGridColumn TItem="UserModel" Field="@nameof(UserModel.Id)" Caption="Modifier">
         <DisplayTemplate>
             <a href="EditUser/@(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>
+    </DataGrid>
 
 

Project/adminBlazor/adminBlazor/Pages/List.razor.cs

@@ -6,6 +6,9 @@ using adminBlazor.Models;
 using System.Net.Http;
 using System.Net.Http.Json;
 using adminBlazor.Services;
+using Blazored.Modal.Services;
+using Blazored.Modal;
+using adminBlazor.Modals;
 
 namespace adminBlazor.Pages
 {
@@ -24,6 +27,12 @@ namespace adminBlazor.Pages
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
@@ -61,6 +70,25 @@ namespace adminBlazor.Pages
                 _users = new List<UserModel>(response); // an actual data for the current page
             }
         }
+
+        private async void OnDelete(int id)
+        {
+            var parameters = new ModalParameters();
+            parameters.Add("Id", id);
+
+            var modal = Modal.Show<DeleteConfirmation>("Delete Confirmation", parameters);
+            var result = await modal.Result;
+
+            if (result.Cancelled)
+            {
+                return;
+            }
+
+            await DataService.Delete(id);
+
+            // Reload the page
+            NavigationManager.NavigateTo("list", true);
+        }
     }
 
 }

Project/adminBlazor/adminBlazor/Pages/_Host.cshtml

@@ -12,7 +12,8 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="adminBlazor.styles.css" rel="stylesheet" />
-    <link rel="icon" type="image/png" href="favicon.png"/>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>
@@ -30,6 +31,7 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="_content/Blazored.Modal/blazored.modal.js"></script>
 </body>
 </html>
 

Project/adminBlazor/adminBlazor/Program.cs

@@ -6,6 +6,7 @@ using Blazorise.Bootstrap;
 using Blazorise.Icons.FontAwesome;
 using Blazored.LocalStorage;
 using adminBlazor.Services;
+using Blazored.Modal;
 
 var builder = WebApplication.CreateBuilder(args);
 builder.Services.AddScoped<IDataService, DataLocalService>();
@@ -16,7 +17,7 @@ builder.Services.AddSingleton<WeatherForecastService>();
 
 builder.Services.AddHttpClient();
 builder.Services.AddBlazoredLocalStorage();
-
+builder.Services.AddBlazoredModal();
 
 
 builder.Services

Project/adminBlazor/adminBlazor/Services/DataLocalService.cs

@@ -104,6 +104,30 @@ namespace adminBlazor.Services
             // Modify the content of the item
 
 
+            // Save the data
+            await _localStorage.SetItemAsync("data", currentData);
+        }
+
+        public async Task Delete(int id)
+        {
+            // Get the current data
+            var currentData = await _localStorage.GetItemAsync<List<User>>("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);
         }

Project/adminBlazor/adminBlazor/Services/IDataService.cs

@@ -16,6 +16,8 @@ namespace adminBlazor.Services
         Task<User> GetById(int id);
 
         Task Update(int id, UserModel model);
+
+        Task Delete(int id);
     } 
    
 }

Project/adminBlazor/adminBlazor/_Imports.razor

@@ -10,3 +10,5 @@
 @using adminBlazor.Shared
 @using Blazorise.DataGrid
 @using adminBlazor.Services
+@using Blazored.Modal
+@using Blazored.Modal.Services

Project/adminBlazor/adminBlazor/adminBlazor.csproj

@@ -13,5 +13,9 @@
     <PackageReference Include="Blazorise.Bootstrap" Version="1.4.0" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.4.0" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.4.0" />
+    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Remove="Modals\DeleteConfirmation.cshtml" />
   </ItemGroup>
 </Project>