Added DataTable to the project and configured columns.

BulkyWeb/Areas/Admin/Controllers/ProductController.cs

@@ -112,39 +112,32 @@ public IActionResult Upsert(ProductVM productVM, IFormFile? file)
             }
         }
 
-        public IActionResult Delete(int? id)
+        #region API CALLS
+        [HttpGet]
+        public IActionResult GetAll()
         {
-            if (id == null || id == 0)
-            {
-                return NotFound();
-            }
-
-            Product product = _unitOfWork.Product.Get(p => p.Id == id);
-
-            if (product == null)
-            {
-                return NotFound();
-            }
-
-            return View(product);
+            List<Product> objProductList = _unitOfWork.Product.GetAll(includeProperties: "Category").ToList();
+            return Json(new { data = objProductList });
         }
 
-        [HttpPost, ActionName("Delete")]
-        public IActionResult Delete(int id)
+        public IActionResult Delete(int? id)
         {
-            Product product = _unitOfWork.Product.Get(p => p.Id == id);
+            var productToBeDeleted = _unitOfWork.Product.Get(p => p.Id == id);
+            if (productToBeDeleted == null)
+            {
+                return Json(new { success = false, message = "Error while deleting" });
+            }
 
-            if (product == null)
+            var oldFilePath = Path.Combine(_webHostEnvironment.WebRootPath, productToBeDeleted.ImageUrl.TrimStart('\\'));
+            if (System.IO.File.Exists(oldFilePath))
             {
-                TempData["Error"] = "Book not found";
-                return RedirectToAction("Index");
+                System.IO.File.Delete(oldFilePath);
             }
 
-            _unitOfWork.Product.Remove(product);
+            _unitOfWork.Product.Remove(productToBeDeleted);
             _unitOfWork.Save();
-            TempData["Success"] = "Book deleted successfully";
-
-            return RedirectToAction("Index");
+            return Json(new { success = true, message = "Book deleted successfully" });
         }
+        #endregion
     }
 }

BulkyWeb/Areas/Admin/Views/Product/Index.cshtml

@@ -18,46 +18,21 @@
                 </a>
             </div>
         </div>
-        <table class="table table-bordered table-striped">
+        <table id="tblData" class="table table-bordered table-striped" style="width:100%">
             <thead>
                 <tr>
-                    <th>
-                        Title
-                    </th>
-                    <th>
-                        Author
-                    </th>
-                    <th>
-                        ISBN
-                    </th>
-                    <th>
-                        Price
-                    </th>
-                    <th>
-                        Category
-                    </th>
+                    <th>Title</th>
+                    <th>Author</th>
+                    <th>ISBN</th>
+                    <th>Price</th>
+                    <th>Category</th>
+                    <th></th>
                 </tr>
             </thead>
-            <tbody>
-                @foreach (var obj in Model.OrderBy(b => b.Id))
-                {
-                    <tr>
-                        <td>@obj.Title</td>
-                        <td>@obj.Author</td>
-                        <td>@obj.ISBN</td>
-                        <td>@obj.Price</td>
-                        <td>@obj.Category.Name</td>
-                        <td>
-                            <div class="w-75 btn-group" role="group">
-                                <a asp-controller="Product" asp-action="Upsert" asp-route-id="@obj.Id" class="btn btn-primary mx-2">
-                                    <i class="bi bi-pencil-square"></i> Edit
-                                </a>
-                                <a asp-controller="Product" asp-action="Delete" asp-route-id="@obj.Id" class="btn btn-danger mx-2">
-                                    <i class="bi bi-trash"></i> Delete
-                                </a>
-                            </div>
-                    </tr>
-                }
         </table>
     </div>
 </div>
+
+@section Scripts {
+    <script src="~/js/product.js"></script>
+}

BulkyWeb/Areas/Admin/Views/Product/Upsert.cshtml

@@ -84,8 +84,7 @@
                     </div>
                 </div>
                 <div class="col-2">
-                    <img src="@Model.Product.ImageUrl" width="100%"
-                         style="border-radius:5px; border: 1px solid #bbb9b9;" alt="Book Image" />
+                    <img src="@Model.Product.ImageUrl" style="border-radius:5px; border: 1px solid #bbb9b9; width:100%;" alt="Book Image" />
                 </div>
             </div>
         </form>

BulkyWeb/Views/Shared/_Layout.cshtml

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="~/BookBazaar.styles.css" asp-append-version="true" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
+    <link rel="stylesheet" href="//cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css">
 </head>
 <body>
     <header>
@@ -62,6 +63,7 @@
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.tiny.cloud/1/idefu98uibhy9ivtvjypr8q08egl0jnbpqgo7ov2upvvqit8/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="//cdn.datatables.net/2.1.8/js/dataTables.min.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>

BulkyWeb/wwwroot/js/product.js

@@ -0,0 +1,27 @@
+
+$(document).ready(function () {
+    loadDataTable();
+});
+
+function loadDataTable() {
+    dataTable = $('#tblData').DataTable({
+        "ajax": { url: '/admin/product/getall' },
+        "columns": [
+            { data: 'title', width: '25%' },
+            { data: 'author', width: '15%' },
+            { data: 'isbn', width: '15%' },
+            { data: 'listPrice', width: '10%' },
+            { data: 'category.name', width: '10%' },
+            {
+                data: 'id',
+                "render": function (data) {
+                    return `<div class="w-75 btn-group" role="group">
+                    <a href="/admin/product/upsert?id=${data}" class="btn btn-primary mx-2"><i class="bi bi-pencil-square"></i> Edit </a>
+                    <a href="/admin/product/delete/${data}" class="btn btn-danger mx-2"><i class="bi bi-trash-fill"></i> Delete </a>
+                    </div>`
+                },
+                width: '25%'
+            }
+        ]
+    });
+}