How to remove only images which are removed from webpage using Javascript - asp.net-core

Question

In ASP.Net Core MVC. I have created one product CREAT page which allows users to create product and upload multiple images of that product.
Now in editing page of this product I display all these pictures in <div> tag, with javascript of delete function to delete the picture which user want to remove and save the product details again.
From this point I don't understand how to tell ProductController.cs that which images should be deleted from database and which shouldn't.
Can someone put me on right direction, how exactly this process should work?

Answer 1

You can fire jquery call at each image delete; works for smaller set of images
You can store the deleted image-ids in an array and serialize the array to an hidden field and pass the array when you make one jquery call to ProductController.cs on edit submit.
You can check this repository for the solution
https://github.com/rajdeepdebnath/aspnetcore-mvc-collection
My view
#model List<WebApplication4.Controllers.Product>
#{
ViewData["Title"] = "Home Page";
}
#using (Html.BeginForm("Edit", "Home", FormMethod.Post))
{
if (Model != null)
{
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Desc</th>
<th>Images</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
var product = Model[i];
var id = $"product[{i}].Id";
var name = $"product[{i}].Name";
var description = $"product[{i}].Description";
<tr>
<td>#product.Id<input type="hidden" value="#product.Id" name='#id' /></td>
<td><input type="text" value="#product.Name" name='#name' /></td>
<td><input type="text" value="#product.Description" name='#description' /></td>
<td>
#foreach (var image in product.ImageIdArr)
{
<span class="image" data-imageid="#image" style="display:inline-block;width:20px;height:20px;background-color:darkseagreen;">😊</span>
}
</td>
</tr>
}
</tbody>
</table>
<input type="hidden" value="[]" name="DeleteImageIdArr" id="DeleteImageIdArr" />
<input type="submit" value="submit" />
}
}
#section Scripts{
<script>
$(document).ready(function () {
$('.image').click(function (v) {
console.log(v);
console.log(v.target.dataset.imageid);
var arr = [];
arr = JSON.parse($('#DeleteImageIdArr').val());
console.log(Array.isArray(arr));
if (arr.indexOf(v.target.dataset.imageid) < 0) {
arr.push(v.target.dataset.imageid);
}
$('#DeleteImageIdArr').val(JSON.stringify(arr))
console.log($('#DeleteImageIdArr').val());
console.log(v.target.hidden);
v.target.hidden = true;
});
$.ajax();
});
</script>
}
My controller
public class HomeController : Controller
{
public IActionResult Index()
{
var products = GetProducts();
return View(products);
}
[HttpPost]
public IActionResult Edit(List<Product> product, string[] DeleteImageIdArr)
{
var products = GetProducts();
return View("Index", products);
}
public List<Product> GetProducts()
{
var products = new List<Product> {
new Product{ Id=1, Name="Test 1", Description="Test 1", ImageIdArr=new int[]{ 1,2,3 } },
new Product{ Id=1, Name="Test 2", Description="Test 2", ImageIdArr=new int[]{ 4,5,6 } },
new Product{ Id=1, Name="Test 3", Description="Test 3", ImageIdArr=new int[]{ 7,8,9 } },
};
return products;
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int[] ImageIdArr { get; set; }
}