Как удалить только изображения, которые удаляются с веб-страницы, используя Javascript

Question

В ASP. Net Сердечник MVC. Я создал одну страницу CREAT продукта, которая позволяет пользователям создавать продукт и загружать несколько изображений этого продукта.

Теперь на странице редактирования этого продукта я отображаю все эти изображения в теге <div> с javascript of удалить функцию, чтобы удалить изображение, которое пользователь хочет удалить, и снова сохранить сведения о продукте.

С этого момента я не понимаю, как сообщить ProductController.cs, какие изображения следует удалить из базы данных, а какие нет ' т.

Может ли кто-нибудь направить меня в правильном направлении, как именно этот процесс должен работать?

Answer 1

1. Вы можете запускать jquery вызов при каждом удалении изображения; работает для меньшего набора изображений
2. Вы можете сохранить удаленные идентификаторы изображений в массиве и сериализовать массив в скрытое поле и передать массив, когда вы делаете один jquery вызов ProductController.cs при редактировании и отправке .

Решение можно найти в этом репозитории

https://github.com/rajdeepdebnath/aspnetcore-mvc-collection

Мое представление

@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>
}

Мой контроллер

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; }
    }