Delete confirmation pop-up made

BlazorTp1/Modals/DeleteConfirmation.razor

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

BlazorTp1/Modals/DeleteConfirmation.razor.cs

@@ -0,0 +1,37 @@
+using Blazored.Modal.Services;
+using Blazored.Modal;
+using BlazorTp1.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTp1.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();
+        }
+    }
+}

BlazorTp1/Pages/List.razor.cs

@@ -2,6 +2,9 @@
 using BlazorTp1.Models;
 using Blazorise.DataGrid;
 using Blazored.LocalStorage;
+using Blazored.Modal.Services;
+using Blazored.Modal;
+using BlazorTp1.Modals;
 
 namespace BlazorTp1.Pages
 {
@@ -17,6 +20,12 @@ namespace BlazorTp1.Pages
         [Inject]
         public IWebHostEnvironment WebHostEnvironment { get; set; }
 
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
+
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -30,9 +39,23 @@ namespace BlazorTp1.Pages
                 totalItem = await DataService.Count();
             }
         }
-        private void OnDelete(int id)
+        private async void OnDelete(int id)
         {
+            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;
+            }
+
+            await DataService.Delete(id);
 
+            // Reload the page
+            NavigationManager.NavigateTo("list", true);
         }
     }
 }