confiramtion avant suppression

ProjetBlazor/App.razor

@@ -1,12 +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)">
+<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>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingBlazoredModal>

ProjetBlazor/Modals/DeleteConfirmation.razor

@@ -0,0 +1,10 @@
+<div class="simple-form">
+
+    <p>
+        Voulez vous vraiment supprimmer @musique.titre ?
+    </p>
+
+    <button @onclick="ConfirmDelete" class="btn btn-primary">Delete</button>
+
+    <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
+</div>

ProjetBlazor/Modals/DeleteConfirmation.razor.cs

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

ProjetBlazor/Pages/MusiquesListe.razor.cs

@@ -1,6 +1,9 @@
-using Blazorise.DataGrid;
+using Blazored.Modal;
+using Blazored.Modal.Services;
+using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
+using ProjetBlazor.Modals;
 using ProjetBlazor.Modeles;
 using ProjetBlazor.Services;
 
@@ -24,6 +27,8 @@ namespace ProjetBlazor.Pages
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
 
         private async Task OnReadData(DataGridReadDataEventArgs<Musique> e)
         {
@@ -38,13 +43,26 @@ namespace ProjetBlazor.Pages
             }
         }
 
-        private async Task OnDelete(int id)
+
+        private async void OnDelete(int id)
         {
+            var parameters = new ModalParameters();
+            parameters.Add(nameof(Musique.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("MusiquesListe",true);
+            NavigationManager.NavigateTo("list", true);
         }
-    
+
     }
+
 }

ProjetBlazor/Pages/_Layout.cshtml

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="ProjetBlazor.styles.css" rel="stylesheet" />
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>
@@ -32,5 +33,6 @@
     <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
     <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
     <script src="_framework/blazor.server.js"></script>
+    <script src="_content/Blazored.Modal/blazored.modal.js"></script>
 </body>
 </html>

ProjetBlazor/Program.cs

@@ -1,3 +1,4 @@
+using Blazored.Modal;
 using Blazorise;
 using Blazorise.Bootstrap;
 using Blazorise.Icons.FontAwesome;
@@ -18,6 +19,7 @@ builder.Services
 
 builder.Services.AddScoped<IDataService, DataApiService>();
 builder.Services.AddHttpClient();
+builder.Services.AddBlazoredModal();
 
 // Add the controller of the app
 builder.Services.AddControllers();

ProjetBlazor/ProjetBlazor.csproj

@@ -11,6 +11,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
     <PackageReference Include="Blazorise.Bootstrap" Version="1.1.5" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.5" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.5" />

ProjetBlazor/_Imports.razor

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