Блог

Когда пользователь добавляет элемент в список, все работает нормально, пока вы не удалите запись. Строка удаляется, но как только вы добавляете новую строку, все строки удаляются вместе с добавленной новой строкой. Проблема в том, что как только вы удаляете строку и добавляете новую, она загружается из базы данных, если вы еще не сохранили заказ, все введенные данные теряются.

Есть ли способ удалить, а затем добавить, не сохраняя заказ каждый раз, когда вы удаляете товар?

Функция удаления Js

 function del(e, id) {
e.currentTarget.parentElement.parentElement.remove()
if (id === 0) {
    var row = $(this).closest(".tablerow0");
    row.remove();
} else {
$.ajax({
    url: '/Business/Order/DeleteOrderItem',
    data: {
        id: id
    },
    contentType: 'application/json',
    success: function (data) {
    },
    error: function (e) {
        console.log(e)
    }
})
}
}
 

HTML

      <div id="orderItemsContainer" style="width: 100%;float: left;">
         @Html.EditorFor(model => model.Items)
     </div>
 

Добавить элемент

 //Add new item
$(document).on('click', '#btnAdd', 'click', function (e) {
$.ajax({
    async: true,
    data: $('#forming').serialize(),
    type: "POST",
    url: '/Business/Order/AddOrderItem',
    success: function (partialView) {
        console.log("partialView: "   partialView);
        $('#orderItemsContainer').html(partialView);
    }
  });
});
 

Кнопка удаления Html

     <button type="button" tabindex="-1" class="btntext-danger font-weight-bold clear-item" title="Remove" asp-action="DeleteOrderItem" asp-route-id="@Model.Id" asp-area="Business"
 onClick="$(this).closest('.tablerow0').remove(); Update(); del(event, @Model.Id);showHideBtn()">
 

Контроллер

     public IActionResult DeleteOrderItem(int id, [Bind("Items")] Order order)
    {
        if (id == 0)
        {
            return PartialView("Item", order);
        }
        var itemToDelete = _db.Items.Find(id);
        _db.Remove(itemToDelete);
        _db.SaveChanges();
        return Json(itemToDelete);
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> AddOrderItem([Bind("Items")] Order order)
    {
        order.Items.Add(new Item());
        return PartialView("Item", order);
    }
 

 public IActionResult DeleteOrderItem(int id, [Bind("Items")] Order order)
{
    if (id == 0)
    {
        return PartialView("Item", order);
    }
    var itemToDelete = _db.Items.Find(id);
    _db.Remove(itemToDelete);
    _db.SaveChanges();
    return Json(itemToDelete);
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> AddOrderItem([Bind("Items")] Order order)
{
    order.Items.Add(new Item());
    return PartialView("Item", order);
}
 

Проверьте приведенный выше код, при добавлении элементов элементы не вставляются в базу данных, но при удалении элементов он удалит элементы из базы данных. Таким образом, проблема может быть связана с этим.

Вы можете сослаться на комментарий, чтобы изменить свой код:

 public IActionResult DeleteOrderItem(int id, [Bind("Items")] Order order)
{
    if (id == 0)
    {
        return PartialView("Item", order);
    }
    //1. delete items from database.
    var itemToDelete = _db.Items.Find(id);
    _db.Remove(itemToDelete);
    _db.SaveChanges();

    //2. query database get the latest items:
    
    var result = _db.Items.ToList();

    //then return the items to the main page and display them
    return Json(result);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> AddOrderItem([Bind("Items")] Order order)
{
    //1. insert the items into database.
     
    //2. query the database, get the latest items.
   
    //3. add a new Item instance, to let use enter the new value.
    order.Items.Add(new Item());      
    return PartialView("Item", order);
}